CSS series------selectors and selectors priority

1.1. Basic Selector

• Wildcard selector (*)
  A wildcard selector is used as follows
  

  * represents all

  
  
• The
• ID selector (#)
  ID selector is used in the following ways:

   * #intro {font-weight:bold;} //can also omit wildcard characters  

   #intro {font-weight:bold;} //two different ways are the same.  

   
    Unlike other selectors, The ID selector has the following characteristics
    specification: The same ID, only one element can be labeled in a Web page.
  
                1. Non-conformance to specifications, Because the specification requires that an ID be used only by one element.
                2. Semantics two. General ID We are all used as identifiers, and an ID can only be used to label an element.
                3. In JS DOM (getElementById) operation or jquery ("#xx") when selecting elements in a page, only the first found element is returned.
  
  

• Class selector (.)
  Class selectors are simple to use and are used in the following ways:
  

  *.important {color:red;}   // The first method of use

  . important {color:red;}  // the second way of use, the second recommended

• property Selector ([])
  The HTML element that the property selector uses to select the specified property. Use the following methods:
  

  [Title] {color:red;}  // set the style for all elements with the title property: [title~=hello] {color:red;} //Set style for all elements that contain the title property of the specified value
  
  List of Property selectors

  Selector

  Selector	Description
  [attribute]	Used to select an element with the specified attribute.
  [attribute=value]	Used to select an element with the specified attributes and values.
  [attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
  [attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
  [attribute^=value]	Matches each element of the property value to the beginning of the specified value.
  [attribute$=value]	Matches each element of the property value to the end of the specified value.
  [attribute*=value]	Matches each element of the property value that contains the specified value.

  
  

  =============================================================================================================== =========

  In the property selector [attribute~=value] and [attribute*=value], [attribute|=  the use of value] and [attribute^=value] are similar in description, and are easily confused:

  
  
    For the above element [title~=hello],[Title*=hello] can match, but [title~=hell] cannot match, and [Title*=hell] can match,
             
  Because [attribute~=value] matches requires that value be a "word" and [attribute*=value ] matches are matched with regular expression rules

  [attribute|=value] Similar rules are matched to [attribute^=value] , where the first requirement is to start with a word, and the latter only requires the beginning of a xxxxx string.
  
  Note: The word here is not our strict sense of words, such as ASDASD Wasdas, here ASDASD Wasdas for a computer is two words. But [email protected]# this is not a word for a computer that contains special characters.

• Pseudo class selector (:)
  
  Pseudo-class selectors allowed in the CSS2 rule
  

  Use of pseudo-class selectors in CSS3 and support for each browser

  Properties	Description	CSS
  : Active	Adds a style to the element being activated.	1
  : Focus	Adds a style to an element that has keyboard input focus.	2
  : hover	Adds a style to an element when the mouse hovers over it.	1
  : Link	Adds a style to a link that is not visited.	1
  : Visited	Adds a style to the link that has been visited.	1
  : First-child	Adds a style to the first child element of an element.	2
  : lang	Adds a style to the element with the specified Lang property.	2

  
  
  
  
  
  
  
  
  
  ===========================================================================================================
  
  The common rules of CSS3  

  Property	description	CSS
  :nth-child ()	matches the nth child element of the parent element .	3
  :nth-of-type ()	matches a parent element next to Several elements of a certain type	3
  :empty {Srules} td>	matches elements that do not have any child elements (including text nodes)	3
  :checked {srules}	matches elements that are selected on the user interface (for input When type is radio and checkbox)	3

     
  
  
  
  
  
  
  Most of these rules of CSS3 are not available in ie--8, some pseudo-class selectors for CSS3 and their use, see  CSS Reference manual for details.
  

• pseudo element selector (: or::)
  
  

  The common pseudo-element selectors are as follows:

  Selection Character	version	Description
  : First-letter/e::first-letter	Css1/3	Sets the style of the first character within an object.
  : First-line/e::first-line	Css1/3	Sets the style of the first row within the object.
  : Before/e::before	Css2/3	Sets what happens before the object, based on the logical structure of the object tree. Used in conjunction with the Content property
  : After/e::after	Css2/3	Sets what happens after the object (based on the logical structure of the object tree). Used in conjunction with the Content property
  ::p Laceholder	CSS3	Sets the style of the object text placeholder.
  :: Selection	CSS3	Sets the color of the object when it is selected.

  
  

  CSS3 recommended:: Writing, to distinguish between pseudo-class selectors and pseudo-element selectors, but use: the wording is still valid.
  
  however, when using: First-letter/e::first-letter, IE6 has an explicit bug when using the selector: The selector is not next to the curly brace that contains the rule, and you need to leave a space or wrap.
  
  

2. Combination of basic selectors

The complex selector of the basic selector combination result is no different from the following: Sibling selector, sub-selector, descendant selector, combo selector, group selector.

• Brother Selector (+)
  
  The sibling selector, also known as the proximity selector, selects adjacent elements. use the following methods:

  Selector1+selector2//consists of two basic selectors, = = Combo Selector

  
  
• Sub-selector (>)

  A child selector that selects all eligible elements in a direct descendant.

       selector1>selector2{    color:red;      }

• Descendant selector (space)
  
  Descendant selector, selected for all eligible elements in future generations
  

  How to use: Selector1 selector2{  color:red;}  A b is the basic selector

• Combo Selector ()
  
  combination selector, which is used by two basic selectors simultaneously, matches multiple basic selectors simultaneously
  

  Use the following methods: selector1selector2{
    color:red;
  }

• Group selector (,)
  
  Group selector: When the selector is used simultaneously, multiple selectors are independent of each other

• selector1,selector2{}//The first type of ================================================== Two ways of use, the effect is the same, Just the first one that facilitates the reuse of code. selector1{}selector2{}//second type       

==================================================================

==================================================================,

===================================== to be continued .... Next, the priority of all types of selectors

This article is just a brief description of the CSS selector type, speaking is also more superficial---if the detailed study, recommended

Http://www.css88.com/book/css/selectors/pseudo-classes/index.htm ...

CSS series------selectors and selectors priority