css选择符整理及伪类、伪对象

css选择符整理

• 1、通配符 *

  *{
             margin: 0;
             padding: 0;
         }

  做用：将页面中全部元素的内外补丁设置为0；

  .class * {
         color:#ffffff;
     }

  将class类下面的全部元素字体颜色设置为白色；

• 2、标签选择符

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

html有不少标签，能够直接用标签选择符给他们加样式，可是标签选择符和通配符的选择范围都很大，建议配合其余选择符一块儿使用。

• 3、类选择符
  在页面中，咱们能够给标签加上一个属性，class-类，自定义一个类名，好比<div class="myClass"></div>，而后我就能够在css中用类选择符给这个类加上咱们想要的属性。

  .myClass{
             color: #FFFFFF;
         }

• 4、id选择符
  id选择符与类选择符有点类似<div id="myClass"></div>

  #myClass{
             color: #FFFFFF;
         }

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

• 5、包含选择符
  包含选择符也能够叫派生选择符或后代选择器，由于做用是在某元素的子元素上。

  .class1 span{
         
     }

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

.class1 > span{
        
    }

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

.myClass + p{
        color: red;
    }

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

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

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

  1.E[attr]

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

  2.E[attr="value"]

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

  3.E[attr~="value"]

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

  4.E[attr|="value"]

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

  5.E[attr^="value"]

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

  6.E[attr$="value"]

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

  7.E[attr*="value"]

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

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

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

4个等级的定义以下：

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

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

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

• 11、伪类、伪对象选择符

  常见伪类：

  :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那些事儿》、css2/css3参考手册。仅表明我的观点，如有不对或不当处请指正。转载请注明出处，谢谢合做！