css选择器

简单选择器

• 类型选择器：p{color:red}
• id 选择器: #idname{color:red}
• class 选择器.className{color:red}

伪元素

• ::before
• ::after

文本

• ::first-letter:文本的第一个字符串
• ::first-line:文本的第一段

使用伪元素不能添加对内容有实质的影响
伪元素使用双冒号，而伪类是单冒号（通常如今浏览器都兼容）

伪类

• :hover：鼠标 hover
• :active：选中
• :focus：聚焦
• :link：连接
• :visited：访问过了

• :target: 浏览器的 hash 值为目标 ID

  <!--  url:www.example.com#commit -->
  <style>
      .message:target {
          color: red;
      }
  </style>
  
  <!-- 显示的文字就会变成红色 -->
  <p class="message" id="commit">message</p>

• :not():反选
• div:first-child:div 类型第一个元素
• div:last-child：div 类型最后一个元素
• :first-of-type:任意第一个子元素
• :last-of-type: 任意最后一个元素

（css3 新增）

• div:nth-child(2n):div 类型匹配 二、4....偶数（能够用 odd 代替）
• div:nth-last-child(2n)：相似第一个，可是从最后开始
• :nth-of-type(N):任意子节点的 N 个
• :nth-last-of-type(N):相似第一个，可是从最后开始

伪类和伪元素的区别，伪类：更方便的类型选择器；伪元素: 建立一个不存在于文档的容器（元素）

子代选择器

• 空格:所有后代
• >:最近子代

兄弟选择器

• +:相邻最近下一个兄弟
• ~:全部兄弟

属性选择器

• [href]:选择带有该属性元素

  能够用一些匹配规则:
  a[href^="https://wwww.baidu.com"]:开始
  img[href$=".jpg"]：结束
  a[href*="/about/"]：包含
  a[rel~="next"]:匹配属性是多个以空格分开的值的其中一个
  a[lang|="en"]:能够匹配带斜杠的值（en,en-us）

优先级运算

第一优先：

• 无链接符号

第二优先级：

• 空格
• ~
• +
• >
• ||

第三优先级：

• ,