CSS3 selector, css3 Selector

CSS3 selector, css3 Selector

In CSS3, selector is recommended to directly bind styles and elements.

During webpage development, we need to define many classes to apply different elements. Because the class itself has no semantics and can be reused, therefore, excessive use of class will make the entire style table structure very messy. To reduce the usage frequency of the class, you need to use the selector as much as possible to specify the element. The selector can also be used to define many rules, which can also reduce the amount of code that repeatedly defines the class.

In CSS3, there are mainly the following selectors: attribute selector, structural selector, UI state selector, and common sibling element selector. The following sections describe:

(1) attribute Selector

As the name suggests, the attribute selector selects the target based on various attributes. We usually use the attribute selector with wildcards. The expression is [attr = val] {style content}. Common wildcards include the following:

1) [attr * = val] returns all elements of the 'attr 'attribute that contain the val string. For example, if [id * = section] is optional, # section1 and # subsection, the sec-tion cannot be selected.

2) [attr ^ = val] returns all elements starting with the val string in the 'attr 'attribute. For example, [id * = section] is optional and # section1 cannot be selected # subsection.

3) [attr $ = val] returns all elements ending with the val string in the 'attr 'attribute. For example, [id * = section] is optional. # subsection cannot be selected. # section1.

Attribute selector rules are simple, but they are flexible and changeable. Proper use can simplify the code.

(2) Structural Selector

In CSS, apart from our custom class selector, there are also defined CSS selectors, such as a: link, a: visited, a: hover,: active status pseudo-classes. It can be used in combination with classes. expression: Selector Class Name: pseudo class/pseudo element {style content }. The structural selector in CSS is as follows (derived from http://www.w3school.com.cn /):

Selector	Example	Example description	CSS
First-line	P: first-line	Select the first line of each <p> element.	1
: First-letter	P: first-letter	Select the first letter of each <p> element.	1
: Before	P: before	Insert content before the content of each <p> element.	2
: After	P: after	Insert content after the content of each <p> element.	2
: Root	: Root	Select the root element of the document.	3
: Empty	P: empty	Select each <p> element (including text nodes) without child elements ).	3
: Target	# News: target	Select the # news element of the current activity.	3
: Not (selector)	: Not (p)	Select each element of a non-<p> element.	3
: First-child	P: first-child	Select each <p> element that belongs to the first child element of the parent element.	2
: Last-child	P: last-child	Select each <p> element that belongs to the last child element of its parent element.	3
: Only-child	P: only-child	Select each <p> element that belongs to the unique child element of its parent element.	3
: Nth-child (n)	P: nth-child (2)	Select each <p> element that belongs to the second child element of its parent element.	3
: Nth-last-child (n)	P: nth-last-child (2)	Same as above, counting starts from the last child element.	3
: First-of-type	P: first-of-type	Select each <p> element of the first <p> element of its parent element.	3
: Last-of-type	P: last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.	3
: Only-of-type	P: only-of-type	Select each <p> element that is unique to its parent element.	3
: Nth-of-type (n)	P: nth-of-type (2)	Select each <p> element that belongs to the second <p> element of its parent element.	3
: Nth-last-of-type (n)	P: nth-last-of-type (2)	Same as above, but starts counting from the last child element.	3

 

Here, let's take a look at some frequently-used content selectors.

1) befor and after selectors: usually used in combination with content, adding content before and after the selected element (innerHTML added to the element.

 

<! DOCTYPE html>  

If some elements are not added, you can set a class for them and set its content to none. H2.noadd: after {content: none ;}
In addition, contentcan also be an image url(pathname.png). The benefits of using the content without using the img label can be that you do not need to write a large number of img labels, often used for new products on the shopping list, new articles in the article list, etc.
When you see the role of content, you can think of an important purpose of adding a serial number for the project. You need to add the serial number in two steps: Specify the couter in the content, then define the couter attribute in the style sheet of the target element, such as couter-increment and counter-reset.
 
<! DOCTYPE html> 
In nesting, you must set counter-reset: In the subitem to reset the couter for the lower-level project number. Otherwise, the section under the heading 2nd in the preceding section starts from 4.
2) target: Use the target selector to specify a style for the target element (ID is set as a hyperlink in the page) on the page. The style can only be clicked by the user, it takes effect after jump to the target element.
3): nth-child (n),: nth-of-type (n): The difference between child and type is that child is of no type when counting child elements, type is differentiated. Example:
 
<! DOCTYPE html> 
Page display:

We wanted to set the background color of 2nd 3rd 
To solve this problem, we can use nth-of-type (n) to specify the element type to get the desired result.
 
<style type="text/css">h2:nth-of-type(2) { background-color: blue; }h2:nth-of-type(3) { background-color: grey; }</style>
 

In addition, (n) can also be parameterized to implement the cycle mode. Input xn + y to specify the number of x as a cycle, and y to get 1 ~ X represents the x types in the loop, such as 3n + 1, 3n + 2, 3n + 3 (which can be abbreviated as 3n ). When x = 2, it is a parity item, which can be expressed by the word "odd (odd) even (even.
 
(3) pseudo-class selector of UI status
CSS3 also provides 11 UI element state pseudo-class selectors, but each browser supports different UI element state selectors, such:

A large part of these selectors are designed for PCs and are mainly used in some dynamic forms. Considering the screen size and interaction experience, the number of form elements displayed on a mobile page should be as few as possible, because the input form has poor experience on the Mobile End (in fact, the PC end is also poor !). Therefore, there is no need for too many formal content!
(4) Generic sibling element Selector
Format: child element 1-child element 2 {style content}
Return all child element 2 at the same level as element 1 after child element 1. There are two selection rules: element 1 and child element 2 at the same level.
 
Conclusion: There are not many selector rules, and the usage is quite simple. The difficulty is how to select a proper selector combination. The advantage of the selector is accurate positioning, but the scalability is deteriorated at the same time. If you want to change the structure to add or remove elements in the future, the above selector may cause problems.