前端CSS之选择器

选择器

该内容是参考CSS权威指南(第三版)选择器章节总结的内容，只是本人前端面试的笔记。如有错误，欢迎指正。

1. 元素选择器

       h1 {
           color: red;
           font-size: 20px
       }
       <!-- 支持选择器分组 -->
       h1, p {
           color: red;
           font-size: 20px    
       }
   

2. 通配选择器

      * {
          color: red;
          font-size: 20px
      }
   

3. 类选择器和ID选择器

       <!-- 类选择器 -->
       .warning {
           color: red;
           font-size: 20px 
       }
       <!-- 类选择器结合元素选择器
       只选择class为warning的p标签 -->
       p.warning {
           color: red;
           font-size: 20px
       }
       <!-- 多类选择器
       可以同时针对拥有多个属性的标签进行选择
       中间不允许存在空格 -->
       .warning.urgent {
           color: red;
           font-size: 20px
       }
       <!-- 类选择器可以忽略通配选择器 -->
       *.warning {
           color: red;
           font-size: 20px 
       }
       <!-- 和下面的效果相同 -->
       .warning {
           color: red;
           font-size: 20px 
       }
       ```
       ```CSS
       <!-- ID选择器 -->
       #favorite {
           color: red;
           font-size: 20px
       }
       <!-- 因为元素的id在全局需要唯一（也可以不唯一，这样会选择多个元素标签，同时会对js造成影响），因此
       ID选择器可以和元素选择器结合使用（没有实际意义，因为ID唯一，通过ID选择器已经可以进行确定）但是不可以多ID选择器。以下为错误情况。 -->
       #favorite#like {
           color: red;
           font-size: 20px
       }
       <!-- ID选择器同样可以忽略通配选择器 -->
   

4. 属性选择器

       <!-- 选择具有某些属性的元素 -->
       <!-- 选择所有具有class属性的元素 -->
       *[class] {
           color: red;
           font-size: 20px
       }
       <!-- 选择所有具有alt的h1元素 -->
       h1[alt] {
           color: red;
           font-size: 20px
       }
       <!-- 选择所有具有href和title属性的a元素 -->
       a[href][title] {
           color: red;
           font-size: 20px
       }
       <!-- 根据具体属性值选择某些元素 -->
       a[href='www.baidu.com'] {
           color: red;
           font-size: 20px
       }
       a[href='www.baidu.com'][title='link'] {
           color: red;
           font-size: 20px
       }
       <!-- 同时当根据具体属性选择某些元素的时候，值的查找是完全串匹配，如下所示 -->
       a[class='warning urgent'] {
           color: red;
           font-size: 20px
       }
       <a class='warning urgent'></a>
       <!-- 根据部分属性值选择某些元素 -->
       a[class~='warning'] {
           color: red;
           font-size: 20px
       }
       <!-- 可以与 -->
       a.warning {
           color: red;
           font-size: 20px
       }
       <!-- 具有相同的选择功能 -->
       <!-- 之所以存在这个属性选择器，是因为属性选择器不仅仅可以选择class，还可以选择其他的属性，对比于类选择器更加优秀 -->
       <!-- 类似于正则表达式的属性选择器 -->
       <!-- 选择foo属性值中包含bar的所有元素 -->
       [foo*="bar"]
       <!-- 选择foo属性值中以bar开头的所有元素 -->
       [foo^="bar"]
       <!-- 选择foo属性值中以bar结尾的所有元素 -->
       [foo$="bar"]
   

5. 后代选择器

       <!-- 后代选择器通过空格来作为分隔，这样会将所有的后代全部选择出来，不论嵌套层次有多深 -->
       div h1 {
            color: red;
           font-size: 20px
       }
       div ul ol ul em {
            color: red;
           font-size: 20px
       }
       div p, p em {
            color: red;
           font-size: 20px
       }
       <!-- 选择子元素 -->
       div > h1 {
           color: red;
           font-size: 20px
       }
       <!-- 可以结合其他选择器一起使用 -->
       table.summary td > p {
           color: red;
           font-size: 20px
       }
       <!-- 选择相邻兄弟元素 -->
       <!-- 选择ul之后的所有ol兄弟元素，另外兄弟元素选择需要严格按照HTML中出现的顺序 -->
       ul + ol {
           color: red;
           font-size: 20px
       }
   

6. 伪类和伪元素选择器

       <!-- 伪类选择器 -->
       <!-- 静态伪类选择器，即第一次显示后，一般不会再改变文档的格式 -->
       a:link {
           color: blue;
       }
       a:visited {
           color: red;
       }
       :first-child {
           可以应用于很多元素上，这个静态伪类的含义并不是元素的第一个子结点，而是指是作为第一个子元素
       }
       <!-- 动态伪类选择器，可以根据用户的行为来动态改变文档的外观，并且目前可以应用于任何元素 -->
       <!-- 可以接受键盘的输入或者某种激活的方式 -->
       input:foucs {
           color: orange;
       }
       <!-- 鼠标悬停在某个元素上 -->
       a:hover {
           color: green;
       }
       <!-- 鼠标停留在某个元素上，并且鼠标点击 -->
       a:active {
           color: pink;
       }
       <!-- 根据语言种类来调整字体格式 -->
       :lang(en) {
           font-style: italic;
       }
       <!-- 结合伪类，但是伪类之间不能相互冲突,且顺序没有要求 -->
       a:link:hover {
           color: orange;
       }
       a:visited:hover:lang(en) {
           color: orange;
       }
       a:link:visited {
           <!-- 这就是错误的 -->
       }
       <!-- 伪类的顺序很重要
       link-visited-hover-active -->
   

       伪元素选择器
       :first-letter {
   
       }
       :first-line {
   
       }
       :before {
   
       }
       :after {
   
       }