CSS selector collation and pseudo-class, pseudo-Object

CSS Selector collation

• One, wildcard characters *

     *{           margin:0;           padding:0;       }

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

     . class * {       color: #ffffff;   }

  Sets the font color of all elements below the class to white;

• Second, Tag Selector

        P,        p,        A,        span,        h1 {            color: #FFFFFF;        }

HTML has a lot of tags, you can directly use tag Selector to add style to them, but the tag selector and wildcard selection is very large, it is recommended to use with other selectors.

• Three, class selector
  in the page, we can add a property to the tag, class-class, customize a class name, such as <p class= " MyClass "></P> , and then I can give this class A class selector in CSS with the attributes we want.

   myclass{color: #FFFFFF; The 

• IV, the ID selector
  ID selector is somewhat similar to the class selector <p id= "MyClass" ></P>

   #myClass {color: #FFFFFF; The 

  is preceded by a # prefix, unlike class, where the ID is allowed only once in HTML, and you may understand the uniqueness of the ID, but you have written two p, the same class, and ID. I found that when I added the style with ID, the two IDs all succeeded in the Normal style without error. But the same ID can cause scripting languages such as JavaScript to be judged incorrectly. So it may not be possible to explain the ID selector can give two of the same p add style, but look at the portal here, simply say, this is a principle, as if a country has its law rate (deliberately typos, I am afraid of being blocked by the system) you can not violate the law rate, otherwise will not be able to tolerate you. [1]

• V. Include selectors
  include selectors can also be called derived selectors or descendant selectors, because the effect is on a child element of an element.

   Class1 span{} 

• VI, child selector
  is a style that defines a child element object, and cannot define child elements to Outside of the object. I want to add a word that defines the style of the immediate child element object of an element. For example, I have a property, but only to my son, not to my grandson. For example, I don't have a house. /tear-blown. The
  Parent element child element directly adds a ' > ' symbol.

     . Class1 > span{            }

• Seven, adjacent selectors
  Matches the next element of an element under the same parent.
  (Here I would like to ask, since it is the next element why to call the adjacent selector, adjacent is not adjacent to the left and right, called subordinate selectors good, hahaha, open a joke. Adjacent elements are connected directly with the ' + ' symbol.

    . MyClass + p{        color:red;    }

• Eight, attribute selectors
  Any HTML tag will have an attribute, and each attribute has a property value, such as:

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

  The property selector is divided into seven (4+3) modes:

  1.E[ATTR]

     P[class] {       color: #FFFFFF;   }   --The color of the P font with the class attribute is white (ignoring the value of attr);

  2.e[attr= "Value"]

     P[class= "MyClass"] {       color: #FFFFFF;   }   The value of--class is ' myClass ' of the P font color white;

  3.e[attr~= "Value"]

     P[class~= "MyClass"] {       background-color: #000000;       Color: #fff;   } --match with ' attr ' attribute and attribute value is a field separated by a space symbol one of the fields equals the e tag element of value   ex:   <p class= "MyClass zz" ></p>   <p class= "MyClass cc" ></p>

  4.e[attr|= "Value"]

     P[class|= "MyClass"] {       background-color: #000000;       Color: #fff;   } --match the E-tag element with the ' attr ' attribute and the attribute value that begins with the value and uses the hyphen '-' to split.   ex:   <p class= "Myclass-zz" ></p>   <p class= "MYCLASS-CC" ></p>

  5.e[attr^= "Value"]

     P[class^= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the e label element with the ' attr ' attribute and the attribute value that begins with the value.   ex:   <p class= "Myclasszz" ></p>   <p class= "MYCLASSCC" ></p>

  6.e[attr$= "Value"]

     P[class$= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the e label element with the ' attr ' attribute and the property value that ends with the value.   ex:   <p class= "Zzmyclass" ></p>   <p class= "Ccmyclass" ></p>

  7.e[attr*= "Value"]

     P[class*= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the E-label element with the ' attr ' attribute and the value of the attribute.   ex:   <p class= "Myclass-zz" ></p>   <p class= "MYCLASS-CC" ></p>

• Ix. combination of selectors
  The biggest advantage of selectors is not the ability to write styles for an element or a class of elements, but to combine various combinations of different page structures.
  I have to mention that the number of nested layers of the combination of selectors, although there is no direct rule of the number of nested layers can not be more than how much, but nesting too many layers can easily generate garbage code is also not conducive to the inclusion of the.

• X. CSS selector weights
  Divide the particulars into 4 levels, each of which represents a class of selectors, each of which is multiplied by the number of selectors represented by that rank, and finally the values of all levels are added to the selector's special values.

The 4 levels are defined as follows:

First: Represents the inline style, such as: style= "", the weight value is 1000. Second: Represents the ID selector, such as: #content, the weight value is 100. Third class: Represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 10. Class IV: Represents a type selector and a pseudo-element selector, such as P p, with a weight of 1. PS: The weight of the Universal selector ' * ', the sub-selector ' > ', the adjacent selector ' + ' is 0.

When using CSS combinations, weights are equal to the weights of each layer.

Ex:    . MyClass #zz H1 {        color: #FFFFFF;    } Weight value: 10 + 100 + 1 = 111;

• Xi. pseudo-class, pseudo-object selectors

  Common Pseudo-classes:

     : Link: Indicates a hyperlink (both an href attribute) and points to all anchors of an unreachable address.   : Visited: Indicates all anchors that are hyperlinks to the visited address.   : Focus: Indicates the element that currently has input focus, that is, an element that can accept keyboard input or that can be activated in some way.   : hover: Indicates which element the mouse pointer rests on, for example, the mouse pointer may stay on a hyperlink   : active: Indicates an element that is activated by user input, for example, if the mouse pointer rests on a hyperlink, the hyperlink is activated if the user clicks the mouse: Active will indicate this hyperlink.   : First-letter: Sets the style sheet property of the first character within an object.    : First-line: Sets the style sheet property of the first row within the object.    : First-child: Sets the style sheet property of the first child object (SELECTOR2) of the object (Selector1).    : First: Sets the style sheet properties used by the page container on page one. Used only for @page rules.    : Left: Sets the style sheet properties that are used by all pages in the page container that are on the leftmost side of the gutter. Used only for @page rules.    : Right: Sets the style sheet properties that are used by all pages in the page container that are on the left side of the gutter. Used only for @page rules.    : lang: Sets the object to use special language content style sheet properties.

  Structural pseudo-Class:

     E:nth-child (n): matches the nth child element e in the parent element.   e:nth-last-child (N): matches the nth-nth structure child element E in the parent element.   E:nth-of-type (N): matches the nth sibling element E in the same type.   E:nth-last-of-type (N): matches the reciprocal nth sibling element E in the same type.   E:last-child: Matches the last E element in the parent element.   E:first-of-type: Matches the first E element in sibling siblings.   E:only-child: Matches the E that belongs to the unique child element in the parent element.   E:only-of-type: Matches E that belongs to the only sibling element of the same type.   E:empty: Matches the element E without any child elements, including the text node.

  UI element State Pseudo-class:

     E:checked: Matches the selected element in all user interface (Form form) e   e:enabled: matches the E element e:disabled in the available state in all user interface (form forms)   : Matches the E element in the unavailable state in all user interfaces (form forms)   e:selection: Matches the part of the E element that is selected by the user or is in the highlighted state

  Negation pseudo-Class:

      E:not (s): matches all elements that do not match the simple selector s E

  Target Pseudo-class:

     E:target: Matches the E element pointed to by the relevant URL

  Generic sibling element selector:

     E ~ f: match f element after e element

  Pseudo-Object:

     : Before is used in conjunction with the content property to set what happens before the object, based on the logical structure of the object tree. : After is used with the   content property to set what happens after the object (based on the logical structure of the object tree).

Note: This article refers to "CSS", CSS2/CSS3 reference manual. For personal opinion only, please correct me if there is any mistake or improper position. Reproduced please specify the source, thank you for your cooperation!

CSS Selector collation

• One, wildcard characters *

     *{           margin:0;           padding:0;       }

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

     . class * {       color: #ffffff;   }

  Sets the font color of all elements below the class to white;

• Second, Tag Selector

        P,        p,        A,        span,        h1 {            color: #FFFFFF;        }

HTML has a lot of tags, you can directly use tag Selector to add style to them, but the tag selector and wildcard selection is very large, it is recommended to use with other selectors.

• Three, class selector
  in the page, we can add a property to the tag, class-class, customize a class name, such as <p class= " MyClass "></P> , and then I can give this class A class selector in CSS with the attributes we want.

   myclass{color: #FFFFFF; The 

• IV, the ID selector
  ID selector is somewhat similar to the class selector <p id= "MyClass" ></P>

   #myClass {color: #FFFFFF; The 

  is preceded by a # prefix, unlike class, where the ID is allowed only once in HTML, and you may understand the uniqueness of the ID, but you have written two p, the same class, and ID. I found that when I added the style with ID, the two IDs all succeeded in the Normal style without error. But the same ID can cause scripting languages such as JavaScript to be judged incorrectly. So it may not be possible to explain the ID selector can give two of the same p add style, but look at the portal here, simply say, this is a principle, as if a country has its law rate (deliberately typos, I am afraid of being blocked by the system) you can not violate the law rate, otherwise will not be able to tolerate you. [1]

• V. Include selectors
  include selectors can also be called derived selectors or descendant selectors, because the effect is on a child element of an element.

   Class1 span{} 

• VI, child selector
  is a style that defines a child element object, and cannot define child elements to Outside of the object. I want to add a word that defines the style of the immediate child element object of an element. For example, I have a property, but only to my son, not to my grandson. For example, I don't have a house. /tear-blown. The
  Parent element child element directly adds a ' > ' symbol.

     . Class1 > span{            }

• Seven, adjacent selectors
  Matches the next element of an element under the same parent.
  (Here I would like to ask, since it is the next element why to call the adjacent selector, adjacent is not adjacent to the left and right, called subordinate selectors good, hahaha, open a joke. Adjacent elements are connected directly with the ' + ' symbol.

    . MyClass + p{        color:red;    }

• Eight, attribute selectors
  Any HTML tag will have an attribute, and each attribute has a property value, such as:

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

  The property selector is divided into seven (4+3) modes:

  1.E[ATTR]

     P[class] {       color: #FFFFFF;   }   --The color of the P font with the class attribute is white (ignoring the value of attr);

  2.e[attr= "Value"]

     P[class= "MyClass"] {       color: #FFFFFF;   }   The value of--class is ' myClass ' of the P font color white;

  3.e[attr~= "Value"]

     P[class~= "MyClass"] {       background-color: #000000;       Color: #fff;   } --match with ' attr ' attribute and attribute value is a field separated by a space symbol one of the fields equals the e tag element of value   ex:   <p class= "MyClass zz" ></p>   <p class= "MyClass cc" ></p>

  4.e[attr|= "Value"]

     P[class|= "MyClass"] {       background-color: #000000;       Color: #fff;   } --match the E-tag element with the ' attr ' attribute and the attribute value that begins with the value and uses the hyphen '-' to split.   ex:   <p class= "Myclass-zz" ></p>   <p class= "MYCLASS-CC" ></p>

  5.e[attr^= "Value"]

     P[class^= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the e label element with the ' attr ' attribute and the attribute value that begins with the value.   ex:   <p class= "Myclasszz" ></p>   <p class= "MYCLASSCC" ></p>

  6.e[attr$= "Value"]

     P[class$= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the e label element with the ' attr ' attribute and the property value that ends with the value.   ex:   <p class= "Zzmyclass" ></p>   <p class= "Ccmyclass" ></p>

  7.e[attr*= "Value"]

     P[class*= "MyClass"] {       background-color: #000000;       Color: #fff;   } --Match the E-label element with the ' attr ' attribute and the value of the attribute.   ex:   <p class= "Myclass-zz" ></p>   <p class= "MYCLASS-CC" ></p>

• Ix. combination of selectors
  The biggest advantage of selectors is not the ability to write styles for an element or a class of elements, but to combine various combinations of different page structures.
  I have to mention that the number of nested layers of the combination of selectors, although there is no direct rule of the number of nested layers can not be more than how much, but nesting too many layers can easily generate garbage code is also not conducive to the inclusion of the.

• X. CSS selector weights
  Divide the particulars into 4 levels, each of which represents a class of selectors, each of which is multiplied by the number of selectors represented by that rank, and finally the values of all levels are added to the selector's special values.

The 4 levels are defined as follows:

First: Represents the inline style, such as: style= "", the weight value is 1000. Second: Represents the ID selector, such as: #content, the weight value is 100. Third class: Represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 10. Class IV: Represents a type selector and a pseudo-element selector, such as P p, with a weight of 1. PS: The weight of the Universal selector ' * ', the sub-selector ' > ', the adjacent selector ' + ' is 0.

When using CSS combinations, weights are equal to the weights of each layer.

Ex:    . MyClass #zz H1 {        color: #FFFFFF;    } Weight value: 10 + 100 + 1 = 111;

• Xi. pseudo-class, pseudo-object selectors

  Common Pseudo-classes:

     : Link: Indicates a hyperlink (both an href attribute) and points to all anchors of an unreachable address.   : Visited: Indicates all anchors that are hyperlinks to the visited address.   : Focus: Indicates the element that currently has input focus, that is, an element that can accept keyboard input or that can be activated in some way.   : hover: Indicates which element the mouse pointer rests on, for example, the mouse pointer may stay on a hyperlink   : active: Indicates an element that is activated by user input, for example, if the mouse pointer rests on a hyperlink, the hyperlink is activated if the user clicks the mouse: Active will indicate this hyperlink.   : First-letter: Sets the style sheet property of the first character within an object.    : First-line: Sets the style sheet property of the first row within the object.    : First-child: Sets the style sheet property of the first child object (SELECTOR2) of the object (Selector1).    : First: Sets the style sheet properties used by the page container on page one. Used only for @page rules.    : Left: Sets the style sheet properties that are used by all pages in the page container that are on the leftmost side of the gutter. Used only for @page rules.    : Right: Sets the style sheet properties that are used by all pages in the page container that are on the left side of the gutter. Used only for @page rules.    : lang: Sets the object to use special language content style sheet properties.

  Structural pseudo-Class:

     E:nth-child (n): matches the nth child element e in the parent element.   e:nth-last-child (N): matches the nth-nth structure child element E in the parent element.   E:nth-of-type (N): matches the nth sibling element E in the same type.   E:nth-last-of-type (N): matches the reciprocal nth sibling element E in the same type.   E:last-child: Matches the last E element in the parent element.   E:first-of-type: Matches the first E element in sibling siblings.   E:only-child: Matches the E that belongs to the unique child element in the parent element.   E:only-of-type: Matches E that belongs to the only sibling element of the same type.   E:empty: Matches the element E without any child elements, including the text node.

  UI element State Pseudo-class:

     E:checked: Matches the selected element in all user interface (Form form) e   e:enabled: matches the E element e:disabled in the available state in all user interface (form forms)   : Matches the E element in the unavailable state in all user interfaces (form forms)   e:selection: Matches the part of the E element that is selected by the user or is in the highlighted state

  Negation pseudo-Class:

      E:not (s): matches all elements that do not match the simple selector s E

  Target Pseudo-class:

     E:target: Matches the E element pointed to by the relevant URL

  Generic sibling element selector:

     E ~ f: match f element after e element

  Pseudo-Object:

     : Before is used in conjunction with the content property to set what happens before the object, based on the logical structure of the object tree. : After is used with the   content property to set what happens after the object (based on the logical structure of the object tree).