选择器

##标签选择器 选择所有 div 标签：

div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

ID 选择器

选择 ID 为 rect-1 的标签：

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

类选择器

选择所有 rectangle 类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

• :link：链接访问前的样式
• :visited：链接访问后的样式
• :hover：鼠标悬停时的样式
• :active：鼠标点击后长按时的样式
• :focus：聚焦后的样式

位置伪类选择器：

• :nth-child(n)：选择是其父标签第 n 个子元素的所有元素。

目标伪类选择器：

• :target：当 url 指向该元素时生效。

表单相关

• :required 和:option
  • 匹配表单必填的标签 和 表单选填的标签
• :in-range和:out-of-range
  • 匹配在范围内的标签 和 大于最大值的标签
• :valid和:innalid
  • 匹配符合表单验证的标签 和 不符合表单验证的标签
• :read-only和:read-write
  • 匹配 disable，read-only 的标签 和 可以写的标签 contenteditable

复合选择器

由两个及以上基础选择器组合而成的选择器。

• element1, element2：同时选择元素 element1 和元素 element2。
• element.class：选则包含某类的 element 元素。
• element1 + element2：选择紧跟 element1 的 element2 元素。
• element1 element2：选择 element1 内的所有 element2 元素。
• element1 > element2：选择父标签是 element1 的所有 element2 元素。

通配符选择器

*：选择所有标签

• [attribute]：选择具有某个属性的所有标签
• [attribute=value]：选择 attribute 值为 value 的所有标签

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

• ::first-letter：选择第一个字母
• ::first-line：选择第一行
• ::selection：选择已被选中的内容
• ::after：可以在元素后插入内容
• ::before：可以在元素前插入内容

样式渲染优先级

权重大小，越具体的选择器权重越大：!important > 行内样式 > ID 选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器 权重相同时，后面的样式会覆盖前面的样式 继承自父元素的权重最低