CSS3 selector specification address: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3 select the latest selector specification: https://www.w3.org/TR/selectors
CSS3 selector:
1. Basic selector
/ * Wildcard selector * / * {margin: 0; padding: 0; border: none;}
/ * Element selector * / body {background: #eee;}
/ * Class selector * /. list {list-style: square;}
/ * ID selector * / #list {width: 500px; margin: 0 auto;}
/ * Descendant selector * / .list li {margin-top: 10px; background: #abcdef ;}
2. Basic selector extension
/ * Sub-element selector * / #wrap> .inner {color: pink;}
can also be called a direct descendant selector, this type of selector can only be matched to direct descendants, not to deep levels Descendant element of
* / * adjacent sibling selector * / #wrap #first + .inner {color: # f00;}
It will only match the immediately following sibling element
/ * universal sibling selector * / #wrap #first ~ div {border: 1px solid;}
It will match all the sibling elements (no need to follow immediately)
/ * Selector grouping * / h1, h2, h3 {color: pink;}
The comma here is called the combiner
3. Attribute selector
/ * existence and value attribute selector * /
[attr]: This selector selects all elements that contain attr attributes, regardless of the value of attr.
[attr = val]: This selector selects only all elements whose attr attribute is assigned val.
[attr ~ = val]: indicates an element with an attribute named attr, and the attribute is a list of values separated by spaces, at least one of which is val.
/ * Substring value attribute selector * /
[attr | = val]: Select whether the value of the attr attribute is val (including val) or elements beginning with val-.
[attr ^ = val]: Select the element whose attr attribute value starts with val (including val).
[attr $ = val]: Select elements whose attr attribute value ends with val (including val).
[attr * = val]: Select the element that contains the string val in the value of the attr attribute.
4. Pseudo-class and pseudo-element selector
/ * link pseudo-class * / Note: link,: visited, and: target are for link elements!
: link represents all anchors
that act as hyperlinks and point to an unvisited address : visited represents all anchors that act as hyperlinks and point to a visited address
: target represents a special element, and its id is the fragment ID of the URI Symbol (contents behind #)
/ * Dynamic pseudo-class * / Note: hover,: active can basically be applied to all elements!
: hover means hovering over elements
: active means matching elements activated by the user (when clicked and held)
Since the: link and: visited of the a tag can cover all the states of the a tag, when: link,: visited,: hover, and: active appear on the a tag at the same time,:
link and: visited cannot be placed at the end! ! !
Privacy and: visited selector
Only the following attributes can be applied to visited links:
color
background-color
border-color
/ * Form related pseudo-classes * /
: enabled Match editable forms
: disable Match disabled forms
: checked match Selected form
: focus matches the focused form
/ * Structured pseudo-class * /
The value of index starts counting from 1! ! ! !
index can be variable n (only n)
index can be even odd
#wrap ele: nth-child (index) means to match the child element of index in #wrap This child element must be ele
#wrap ele: nth-of- type (index) means to match the ele child element of index in #wrap.
In addition, there is an important difference between: nth-child and: nth-of-type! !
nth-of-type is element-centric! ! !
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index):倒着查找子元素
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
: not
: empty (the content must be empty, no spaces, no attr)
/ * pseudo-elements * /
:: after
:: before
:: firstLetter
:: firstLine
:: selection
5. The priority declared by css
The particularity of the
selector The particularity of the selector is determined by the components of the selector itself. The particularity value is expressed in 4 parts, such as 0,0,0,0
. The specific particularity of a selector is as follows To determine:
1. For the ID attribute value given in the selector, add 0,1,0,0
2. For each class attribute, attribute selection, or pseudo-class given in the selector, add 0,0,1, 0
3. For each given element and pseudo-element in the
selector , add 0, 0, 0, 1 4. The particularity of the wildcard selector is 0, 0, 0, 0 5. The special
character of the selector to the selector No contribution at all
6. The particularity of the inline declaration is 1,0,0,0
7. Inheritance has no particularity
The particularity 1,0,0,0 is greater than all the particularity (not carry) starting with 0. The particularity of the
selector will eventually be granted to its corresponding statement.
If multiple rules match the same element, and some statements conflict , The more specific the more dominant
Note: the id selector and attribute selector
div [id = "test"] (0,0,1,1) and #test (0,1,0,0)
important declarations
Sometimes a declaration is more important than all Other declarations, css2.1 is called an important declaration
and allows! Important to
be inserted before the end semicolon of these declarations to indicate that the! Important must be placed accurately or the declaration is invalid.
! important should always be placed at the end of the statement, in front of the semicolon
The declaration marked with! Important has no special special value, but should be considered separately from non-important declarations. In fact, all important statements will be divided into a group by the browser, conflicts of important statements will be resolved within it, non-important statements will also be divided into a group, and conflicts of non-important statements will also be resolved within it. important Notice important Notice and non-conflict, winning is always important statement
inheritance
Inheritance has no particularity, not even 0 particularity. 0 particularity is stronger than non-specificity. The
source of
CSS style is roughly three kinds of
creators,
readers,
user agents (browser)
Weight :
Important Notice readers
important statement creators of
normal statement creators of
the reader's normal assertion
of the user agent declaration
stacked
1. Identify all the relevant rules, which include a selector
2. Calculate the declaration of priority
press The source is sorted
according to the particularity of the selector and
finally in order
