css選擇符號整理及偽類、偽對象

css選擇符整理

• 一、通配符*

     *{
             margin: 0;
             padding: 0;
         }

  作用：將頁面中所有元素的內外補丁設定為0；

     .class * {
         color:#ffffff;
     }

  將class下面的所有元素字體設定為白色；

  二、標籤選擇符

•         p,
          p,
          a,
          span,
          h1 {
              color: #FFFFFF;
          }

  html有很多標籤，可以直接用標籤選擇符給他們加樣式，但是標籤選擇符和通配符的選擇範圍都很大，建議配合其他選擇符一起使用。

三、類選擇符

  在頁面中，我們可以為標籤加上一個屬性，class-類，自訂一個類名，例如
• <p class="myClass"></p>

  ，然後我就可以在css中用類別選擇符為這個類別加上我們想要的屬性。
  

         .myClass{
             color: #FFFFFF;
         }

  四、id選擇符
  id選擇符與類別選擇符有點相似
• <p id="myClass"></p>

  
  

         #myClass{
             color: #FFFFFF;
         }

  前面是一個# 的前綴，與class不同的是，與class不同的是，與class不同的是id在html中只允許出現一次，可能你懂id的唯一性，但你寫了兩個p，相同class、id。卻發現用id添加樣式的時候，兩個id都成功出現了正常樣式且沒有報錯。但是相同id會導致JavaScript等腳本語言判斷錯誤。這麼說可能無法解釋好id選擇符可以給兩個相同p添加樣式，但是看這裡傳送門，簡單點說，這就是個原則，就好像一個國家有它的法率（故意錯字，我怕被系統屏蔽）你不能違反法率，否則就容不下你。 [1]
  五、包含選擇符
  包含選擇符也可以稱為派生選擇符或後代選擇器，因為作用是在某元素的子元素上。

•     .class1 span{
         
     }

  
  

  六、子選擇符
  作用是定義子元素物件的樣式，無法定義子元素以外的物件。 （書上是這麼說的）我想加個詞，定義某元素的直接子元素物件的樣式。打個比方，我有一處房產，但只能給我兒子，不能給我孫子。打個比方哈，我沒有房子。 /淚崩。
• 父元素子元素直接加個'>'符號。

  
  
  

       .class1 > span{
          
      }

七、相鄰選擇符

  匹配同一個父級下某元素的下一個元素。
• （這裡我想問既然是下一個元素為什麼要叫相鄰選擇符，相鄰不是前後左右相鄰嗎，叫下級選擇符好了，哈哈哈，開個玩笑。）相鄰元素直接用' +'符號連接。

  
  
  

      .myClass + p{
          color: red;
      }

八、屬性選擇符

  任何一個HTML標籤都會有屬性存在，且每個屬性都有屬性值；例如：

• <p class="myClass" id="zz" style="color: #FFFFFF;"></p>

  屬性選擇符分為七種模式（4+3）種模式：
  

  1.E[attr]

     p[class] {
         color: #FFFFFF;
     }
     --具有class属性的p字体颜色白色（忽略attr的值）;

  2.E[attr="value"]

     p[class="myClass"] {
         color: #FFFFFF;
     }
     --class的值为'myClass'的p字体颜色白色;

  3.E[attr~="value"]

     p[class~="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
     ex:
     <p class="myClass zz"></p>
     <p class="myClass cc"></p>

  4.E[attr|="value"]

     p[class|="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
     ex:
     <p class="myClass-zz"></p>
     <p class="myClass-cc"></p>

  5.E[attr^="value"]

     p[class^="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
     ex:
     <p class="myClasszz"></p>
     <p class="myClasscc"></p>

  6.E[attr$="value"]

     p[class$="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
     ex:
     <p class="zzmyClass"></p>
     <p class="ccmyClass"></p>

  7.E[attr*="value"]

     p[class*="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值含有value的E标签元素。
     ex:
     <p class="myClass-zz"></p>
     <p class="myClass-cc"></p>

  九、選擇符組合
  選擇符最大的優點不是可以為某元素或某類元素書寫樣式，而已針對不同的頁面結構組合成各種組合。
•   不得不提的就是選擇符號組合的嵌套層數，雖然沒有哪裡直接規定嵌套層數不能超過多少，但是，嵌套過多層數容易產生垃圾代碼也不利於收錄會。

  
  
  

  十、css選擇符權重
  把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。

• 
  

  4個等級的定義如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如p p，权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

使用css組合的時候，權值等於每一層的權值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为： 10 + 100 + 1 = 111 ;

十一、偽類、偽物件選擇子

• 常見偽類：

     :link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。
     :visited:指示作为已访问地址超链接的所有锚。
     :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。
     :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
     :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。
     :first-letter:设置对象内的第一个字符的样式表属性。 
     :first-line:设置对象内的第一行的样式表属性。 
     :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 
     :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
     :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
     :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
     :lang:设置对象使用特殊语言的内容样式表属性。

  結構性偽類：

     E:nth-child(n):匹配父元素中的第n个子元素E。
     E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
     E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
     E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
     E:last-child:匹配父元素中最后一个E元素。
     E:first-of-type:匹配同级兄弟元素中的第一个E元素。
     E:only-child:匹配属于父元素中唯一子元素的E。
     E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
     E:empty:匹配没有任何子元素（包括text节点）的元素E。

  UI元素狀態偽類:

     E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E
     E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素
     E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素
     E:selection:匹配E元素中被用户选中或处于高亮状态的部分

  類別:

      E:not(s):匹配所有不匹配简单选择符s的元素E

  通用兄弟元素選擇器:

     E:target:匹配相关URL指向的E元素

  偽物件：

     E ~ F:匹配E元素之后的F元素

  註：本文參考《css那些事兒》、css2/css3參考手冊。僅代表個人觀點，若有不對或不當處請指正。轉載請註明出處，謝謝合作！

css選擇符整理

一、通配符*

   :before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
   :after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

作用：將頁面中所有元素的內外補丁設置為0；

   *{
           margin: 0;
           padding: 0;
       }

將class類下面的所有元素字體顏色設置為白色；

二、標籤選擇符

   .class * {
       color:#ffffff;
   }

html有很多標籤，可以直接用標籤選擇符給他們加樣式，但是標籤選擇符和通配符的選擇範圍都很大，建議配合其他選擇符一起使用。

• 三、类选择符
    在页面中，我们可以给标签加上一个属性，class-类，自定义一个类名，比如<p class="myClass"></p>，然后我就可以在css中用类选择符给这个类加上我们想要的属性。

         .myClass{
             color: #FFFFFF;
         }

• 四、id选择符
    id选择符与类选择符有点相似<p id="myClass"></p>

         #myClass{
             color: #FFFFFF;
         }

  前面是一个 # 的前缀，与class不同的是，id在html中只允许出现一次，可能你明白id的唯一性，但是你写了两个p，相同class、id。却发现用id添加样式的时候，两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式，但是看这里传送门，简单点说，这就是个原则，就好像一个国家有它的法率（故意错别字，我怕被系统屏蔽）你不能违反法率，否则就容不下你。[1]

• 五、包含选择符
    包含选择符也可以叫派生选择符或后代选择器，因为作用是在某元素的子元素上。

      .class1 span{
         
     }

• 六、子选择符
    作用是定义子元素对象的样式，无法定义子元素以外的对象。（书上是这么说的）我想加个词，定义某元素的直接子元素对象的样式。打个比方，我有一处房产，但是只能给我儿子，不能给我孙子。打个比方哈，我没有房子。/泪崩。
  父元素子元素直接加个'>'符号。

     .class1 > span{
        
    }

• 七、相邻选择符
    匹配同一个父级下某元素的下一个元素。
  （这里我想问问既然是下一个元素为什么要叫相邻选择符，相邻不是前后左右相邻吗，叫下级选择符好了，哈哈哈，开个玩笑。）相邻元素直接用'+'符号连接。

    .myClass + p{
        color: red;
    }

• 八、属性选择符
    任何一个HTML标签都会有属性存在，且每个属性都具有属性值；比如：

  <p class="myClass" id="zz" style="color: #FFFFFF;"></p>

  属性选择符分为七（4+3）种模式：

  1.E[attr]

     p[class] {
         color: #FFFFFF;
     }
     --具有class属性的p字体颜色白色（忽略attr的值）;

  2.E[attr="value"]

     p[class="myClass"] {
         color: #FFFFFF;
     }
     --class的值为'myClass'的p字体颜色白色;

  3.E[attr~="value"]

     p[class~="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
     ex:
     <p class="myClass zz"></p>
     <p class="myClass cc"></p>

  4.E[attr|="value"]

     p[class|="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
     ex:
     <p class="myClass-zz"></p>
     <p class="myClass-cc"></p>

  5.E[attr^="value"]

     p[class^="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
     ex:
     <p class="myClasszz"></p>
     <p class="myClasscc"></p>

  6.E[attr$="value"]

     p[class$="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
     ex:
     <p class="zzmyClass"></p>
     <p class="ccmyClass"></p>

  7.E[attr*="value"]

     p[class*="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具有'attr'属性且属性值含有value的E标签元素。
     ex:
     <p class="myClass-zz"></p>
     <p class="myClass-cc"></p>

• 九、选择符组合
    选择符最大的优势不是可以给某元素或某类元素书写样式，而已针对不同的页面结构组合成各种组合。
    不得不提的就是选择符组合的嵌套层数，虽然没有哪里直接规定嵌套层数不能超过多少，但是，嵌套过多层数容易产生垃圾代码也不利于收录会。

• 十、css选择符权重
    把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如p p，权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

使用css组合的时候，权值等于每一层的权值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为： 10 + 100 + 1 = 111 ;

• 十一、伪类、伪对象选择符

  常见伪类：

     :link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。
     :visited:指示作为已访问地址超链接的所有锚。
     :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。
     :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
     :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。
     :first-letter:设置对象内的第一个字符的样式表属性。 
     :first-line:设置对象内的第一行的样式表属性。 
     :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 
     :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
     :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
     :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
     :lang:设置对象使用特殊语言的内容样式表属性。

  结构性伪类：

     E:nth-child(n):匹配父元素中的第n个子元素E。
     E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
     E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
     E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
     E:last-child:匹配父元素中最后一个E元素。
     E:first-of-type:匹配同级兄弟元素中的第一个E元素。
     E:only-child:匹配属于父元素中唯一子元素的E。
     E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
     E:empty:匹配没有任何子元素（包括text节点）的元素E。

  UI元素状态伪类:

     E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E
     E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素
     E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素
     E:selection:匹配E元素中被用户选中或处于高亮状态的部分

  否定伪类:

      E:not(s):匹配所有不匹配简单选择符s的元素E

  目标伪类:

     E:target:匹配相关URL指向的E元素

  通用兄弟元素选择器:

     E ~ F:匹配E元素之后的F元素

  伪对象：

     :before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
     :after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

更多css选择符整理及伪类、伪对象 相关文章请关注PHP中文网！