Through the use of selectors, you no longer need to use redundant and semanticless class attributes when editing styles, but directly bind elements and styles, saving a lot of modifying styles after the website or web application has been completed. time required.
An overview of selectors
The selector is an important content in CSS3. If you define multiple class attributes in the page, you cannot bind elements and styles. Disadvantages of using classes: First, the class attribute itself has no semantics, it is purely for CSS styles Service is a superfluous attribute; secondly, if you use the class attribute, the element and style are not bound together. One class attribute, multiple elements can be used in multiple places, which makes it very inconvenient to modify the style.
如：div[id="div_big"]{.......}
The attribute selector
1. Overview of attribute selectors, in html, through various attributes, we can add a lot of auxiliary information to elements, for example, through the id attribute, we can distinguish different div elements, and control this div through javascript The content and state of the element.
Attribute selector in CSS2: [att=val], where att represents an attribute and val represents an attribute value.
Three new attribute selectors have been added to CSS3:
[att*=val], indicating that the attribute value of the attribute contains the character specified by val, then the element uses this style.
[att^=val], if the attribute value of the attribute starts with the character specified by val, the element uses this style.
[att$=val], if the attribute value of the attribute ends with the character specified by val, the element uses this style, such as: [id$=\-1]{...}, here is Note that the attribute selector must be preceded by a "\" before specifying the matching character.
3. Structural pseudo-class selectors
1. Pseudo-class selectors and pseudo-elements in CSS3
Class selectors in css3 can be named arbitrarily, such as: p.left, p.right, and then use "class="left", class="right"" on the page, but pseudo-class selectors are already defined in css The selector cannot be named arbitrarily. For example, using several pseudo-class selectors on the a element: a:link, a:visited, a:hover, a:active
2. Pseudo-element selector
Pseudo-element selectors refer to selectors that are not used for real elements, but are used for pseudo-elements that have been defined in CSS. How to use it:
selector: pseudo-element {property: value}
Pseudo-element selectors can be used with classes: selector.classname:pseudo-element{attribute:value}
There are four main types of pseudo-element selectors in CSS:
first-line pseudo-element selector: Used to apply styles to the first line of text in an element.
first-letter pseudo-element selector: Used to apply styles to the first letter or first letter of text in an element.
before pseudo-element selector: used to insert some content before an element. Such as: p:before{content:"aaa"} (row level)
after pseudo-element selector: used to insert some content after an element. (row level)
3. Structural pseudo-class selectors
Root selector: Bind the style to the root element of the page. The root element is the element located in the topmost structure of the document tree. In the html page, it refers to the "<html>" part that contains the entire page.
not selector: If you want to use a style for a structural element, but want to exclude the sub-structural elements below this structural element, so that it does not use this style.
empty selector: used to specify the style used when the content in the element is empty.
Target selector: Specify a style for a target element in the page (the id of the element is used as a hyperlink in the page), the style is only after the user clicks the hyperlink in the page and jumps to the target element kick in.
first-child selector: Selects the first element in the parent element.
last-child selector: Selects the last element in the parent element.
nth-child(n): Indicates the nth child element.
nth-last-child(n): Indicates the nth last child element.
nth-child(odd): Indicates the odd-numbered child element from all positive counts.
nth-child(even): Indicates the even-th child element of all positive numbers.
nth-last-child(odd): Indicates all the odd-numbered child elements from the bottom.
nth-last-child(even): Represents all the even-numbered child elements from the bottom.
nth-of-type(odd)：
nth-of-type(even)
nth-last-of-type(odd)
nth-last-of-type(even)
Recycle styles
nth-child(4n+1)
nth-child(4n+2)
nth-child(4n+3)
nth-child(4n+4), where "4n+4" can be abbreviated as "4n"
only-child：相当于nth-child(1):nth-last-child(1)