Summary of new features of CSS3 (selector)_html/css_WEB-ITnose

CSS3 has added 21 selectors, and the script can be run here through the console;

~:

p ~ p {    color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/}

[attribute^=value]:

Select elements whose attribute starts with a specific value

[attribute$=value]:

Select Elements whose attributes end with a specific value

[attribute*=value]:

Select elements where a specific value appears in the attribute

The above three can be used in combination, as in ↓ :

In practice, it can be used to distinguish local links from external links, by judging whether there is http.com or something (You won’t have to worry about it until the CSS4 selector comes out [:local-link])

: first-of-type and :last-of-type:

You can probably see it literally Why does it come out, the first one of this type/the last one of this type...

As shown in the picture above, the first p and the last one in each element This style is applied to p;

:only-of-type:

Select only one child element of this type, excluding child elements of the child element;

You can use :not to achieve inverse selection

:only-child:

Select an element with only one child element;

If you remove:only -p in front of child, the lonely span will also apply this style;

can also be used: not inverse selection,

Simply put, this style is applied to p with sibling nodes;

:nth-child(n):

Select the nth child element, which can be restricted by combining selectors

Combined with variable n (should be said to be a keyword = = ), can be used to change colors on alternate rows in tables and lists

:nth-last-child(n):

Basically the same as above... It’s just counting from back to front

:nth-of-type(n):

This one is the same as the one above and it makes me really sick - the difference between the two has always been very confusing. It’s messy, see the picture below for details

Made through w3school.

p:nth-child(2) sets the second child element in the parent element to be p Set the color of p to red,

p:nth-of-type(2) sets the background color of the second p in the child element to green - it's so messy;

I I think the difference between the two is that nth-of-type counting filters tag types, while nth-child counting does not filter;

:nth-last-of-type(n):

I won’t explain this... On the contrary,

:last-child:

Select the last child element in the parent element

Pay attention to the position of the pseudo-class after tr, this is The gap of one space == The upper one selects the last tr, while the lower one selects the last element in the tr;

:root:

Select the document root node - quite It is similar to html {}, but the weight is higher than html, because it is a pseudo-class, and the tangential class is higher than the label - -;

:empty:

Select a label without child elements, Well, this is generally not very useful, because text nodes are also nodes. Generally, tables have empty cells and lists have empty items, and then do some processing. This is very useful when selecting empty elements with js;

: target:

The explanation given by W3C is to set the style of the activity id. In fact, whatever # is prefixed to the browser path, select the transmission matrix;

: enabled and :disabled:

Pseudo-class used for whether form elements are available;

: enabled is available, :disabled is the opposite;

:checked:

is used for multiple selections And the pseudo-class for single selection; 🎜>

The style of the selected text;

Summary:

CSS3 selector brings great convenience. What is wrong or not detailed in the above article? , please also point out. It’s a bit of an anticlimax, haha

Part of the reference link:

http://www.w3school.com.cn/cssref/css_selectors.asp

Come again Several CSS4 previews

http://www.admin10000.com/document/5900.html

http://www.webhek.com/css4-selectors/

http://www.iinterest.net/2011/10/09/css4-selectors-level-4/