CSS选择器

CSS选择器规定了CSS规则会作用到哪些元素上。

基本选择器

• 元素选择器：根据元素名称匹配元素

元素 {样式声明}

• 类选择器：根据元素class属性中的内容匹配元素

.类名 {样式声明}

• ID选择器：根据元素的ID属性匹配元素

#ID {样式声明}

• 通配选择器：匹配任意类型的元素

* {样式声明}

• 属性选择器：根据属性名或属性值匹配元素
  • [attr]带有以 attr 命名的属性的元素
  • [attr=value]带有以 attr 命名的，且值为"value"的属性的元素
  • [attr~=value]带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"
  • [attr|=value]带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀
  • [attr^=value]带有以 attr 命名的，且值是以"value"开头的属性的元素
  • [attr$=value]带有以 attr 命名的，且值是以"value"结尾的属性的元素
  • [attr*=value]带有以 attr 命名的，且值包含有"value"的属性的元素
  • [attr operator value i] 在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i(I)可以忽略属性值的大小写

img[src$=".svg" i] { /**忽略大小写**/
  color: pink;
}

组合选择器

• 多元素选择器：当使用 , 连接两个元素时使得该选择器可以同时匹配第一个元素和第二个元素

前方元素 , 目标元素 {样式声明}

• 相邻兄弟选择器：匹配紧跟其前方元素的同胞元素

前方元素 + 目标元素 {样式声明}

• 通用兄弟选择器：当使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素

元素 ~ 元素 {样式声明}

• 子选择器：当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素.

元素1 > 元素2 {样式声明}

• 后代选择器：当使用空格连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素)

元素1 元素2 {样式声明}

伪类选择器

• :link：匹配未被访问的链接

• :visited：匹配已被访问的链接

• :focus：匹配点击、触摸、tab键选择的元素

• :hover：匹配鼠标悬停其上的元素

• :active：匹配被用户激活的元素(鼠标在其上已经按下、还没有释放的元素)

为了正确地渲染链接元素的样式需遵循LVFHA的先后顺序，即：:link — :visited — :focus — :hover — :active

• :focus-within：匹配获得焦点，或该元素的后代获得焦点的元素

• :checked：匹配处于选中状态的radio, checkbox或select中的option元素

• :disabled：匹配被禁用的元素

• :enabled：匹配被启用的元素

• :root：匹配文档树的根元素。对于HTML来说，:root 表示html元素，除了优先级更高之外，与 html 选择器相同

• :not()：匹配不符合参数选择器X描述的元素

1. X不能包含另外一个否定选择器
2. X会参与权重计算

• :nth-child(an+b)：匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n >=0

1. :nth-child(0n+3) / :nth-child(3) 匹配第三个元素
2. 1n+0 或简单的 n 匹配每个元素
3. :nth-child(2n+1) / :nth-child(odd) 匹配奇数行
4. :nth-child(2n) / :nth-child(even) 匹配偶数行
5. :nth-child(-n+3) 匹配前三个子元素

• :nth-of-type(an+b)：匹配文档树中在其之前具有 an+b-1 个相同标签的元素，其中 n >=0

1. E:nth-of-type(2) 匹配第二个标签为E的元素
2. .class:nth-of-type(2) 匹配相同标签的第二个且该(第二个)标签的类名匹配.class

<style>
      .item:nth-of-type(3){
        color:red;
      }
</style>
<div>
      <h1>标题</h1>
      <p class="item">这是锻若</p>
      <p>这是锻若</p>
      <span>这是span</span>
      <span class="item">这是span</span>
      <span class="item">这是span</span> <!-- 红色 -->
      <p class="item">这是锻若</p> <!-- 红色 -->
      <p class="item">这是锻若</p>
      <p class="item">这是锻若</p>
      <h1 class="item">标题</h1>
      <h1>标题</h1> <!-- 不是红色 -->
  </div>

伪元素选择器

• ::before :before

• ::after :after

• ::first-letter :first-letter：匹配某块对象第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）

• ::first-line :first-line：匹配某块对象第一行

• ::placeholder：匹配一个表单元素的占位文本

• ::selection：匹配文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)

注意 块对象指display: block, inline-block...