CSS selector sorting and pseudo-classes and pseudo-objects

css selector sorting

• 1. Wildcard *

     *{
             margin: 0;
             padding: 0;
         }

  Function: Set the internal and external patches of all elements in the page to 0;

     .class * {
         color:#ffffff;
     }

  Set the font color of all elements under the class class to white;

• 2. Tag selector

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

html has many tags, you can Use tag selectors to style them directly, but tag selectors and wildcards have a wide selection range, so it is recommended to use them in conjunction with other selectors.

• 3. Class selector
  In the page, we can add an attribute to the label, class-class, and customize a class name, such as <p class="myClass"></p>, then I can use the class selector in css to add the attributes we want to this class.

         .myClass{
             color: #FFFFFF;
         }

• 4. id selector
  The id selector is somewhat similar to the class selector<p id="myClass"></p>

         #myClass{
             color: #FFFFFF;
         }

  is preceded by a # prefix. Unlike class, id is only allowed to appear once in HTML. Maybe you understand the uniqueness of id, but you wrote two p, the same class, id . However, I found that when adding styles using IDs, normal styles appeared successfully for both IDs and no errors were reported. However, the same ID will cause errors in the judgment of scripting languages ​​such as JavaScript. This may not explain that the id selector can add styles to two identical p's, but look at the portal here. To put it simply, this is a principle, just like a country has its own laws (typos on purpose, I'm afraid of being caught by the system) Shield) You cannot violate the law, otherwise we will not tolerate you. [1]

• ##5. Inclusion selector

  The inclusion selector can also be called a derived selector or a descendant selector, because it acts on the child elements of an element.
  

      .class1 span{
         
     }

• 6. Sub-selector

  is used to define the style of sub-element objects. Objects other than sub-elements cannot be defined. (This is what the book says) I want to add a word to define the style of the direct child element object of an element. For example, I own a property, but it can only be given to my son, not my grandson. For example, I don’t have a house. / burst into tears.
  Add a '>' symbol directly to the parent element and child elements.
  

     .class1 > span{
        
    }

• 7. Adjacent selector

  Matches the next element of an element under the same parent.
  (Here I want to ask why it is called adjacent selector since it is the next element. Aren't adjacent elements adjacent to each other? It is better to call it lower-level selector. Hahaha, just kidding.) Adjacent elements are directly Connect with '+' symbol.
  

    .myClass + p{
        color: red;
    }

• 8. Attribute selector

  Any HTML tag will have attributes, and each attribute has an attribute value; for example:
  

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

  The attribute selector is divided into seven (4+3) modes:
  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>

• 9. Selector combinations

  The biggest advantage of selectors is not that you can write styles for a certain element or a certain type of element, but that it can be combined into various combinations for different page structures.
  What I have to mention is the number of nesting levels of selector combinations. Although there is no direct regulation on how many nesting levels cannot be exceeded, nesting too many levels can easily produce junk code and is not conducive to inclusion.
  

• 10. CSS selector weight

  Divide the specificity into 4 levels. Each level represents a type of selector, and the value of each level is the selection it represents. The number of selectors is multiplied by the weight of this level, and finally the values ​​of all levels are added to obtain the special value of the selector.
  

The four levels are defined as follows:

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

When using css combination, the weight is equal to the sum of the weights of each layer.

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

• 11. Pseudo-classes, pseudo-object selectors
  Common pseudo-classes:

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

  Structural pseudo-classes:

     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 element status pseudo-class:

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

  Negation pseudo-class:

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

  Target pseudo-class:

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

  Universal sibling element selector:

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

  Pseudo object:

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

Note: This article refers to "Those Things About CSS" and css2/css3 reference manual. It represents only my personal opinion, please correct me if there is anything wrong or inappropriate. Please indicate the source when reprinting, thank you for your cooperation!

css selector organization

• 1. Wildcard character *

     *{
             margin: 0;
             padding: 0;
         }

  Function: Combine all elements in the page Set the internal and external patches to 0;

     .class * {
         color:#ffffff;
     }

  Set the font color of all elements under the class class to white;

• 2. Tag selector

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

html has many tags, you can directly use tag selectors to add styles to them, but tag selectors and wildcards have a wide selection range, so it is recommended to use them together with other selectors.

• 三、类选择符
    在页面中，我们可以给标签加上一个属性，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中文网！