Summarize CSS3 new features (selector)

CSS3 added A-21 selector, and the script runs here through the console;

~:

{    : red; /* This rule will be used for all p behind p ... Except for all p of the first p, the rules are the same as P:not (: Nth-of-type (1)), but the weights are lower than the latter */}

[Attribute^=value]:

Select the element that the property starts with a specific value

[Attribute$=value]:

Select the element that the property ends with a specific value

[Attribute*=value]:

Select the element that has a specific value in the attribute

The top three can be combined using the method as ↓:

The actual application can be used to differentiate between local links and external links, by judging if there are http\.com or something (wait until the CSS4 selector is out of the way [: Local-link])

: First-of-type with: Last-of-type:

I can literally tell what it is. Make, the first of this type/last of this type of ...

As shown, the first P and the last p in each element are applied to the style;

: Only-of-type:

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

Can use: not to implement a reverse selection

: Only-child:

Select an element that has only one child element;

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

You can also use: not to reverse the selection,

In a nutshell, the style is applied to the p which has the sibling node;

: Nth-child (N):

Select the nth child element, which can be combined with a selector to limit

Combine variable n (which is supposed to be the keyword = =), which can be used to make interlaced color changes in the table, list, etc.

: Nth-last-child (N):

Basic Ibid ... It's just a number from the back.

: Nth-of-type (N):

This one with the top makes me very sore--the difference between the two has been very messy, see the details

It's done on top of w3school.

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

P:nth-of-type (2) sets the second P background color in the child element to green--messy;

I think the two are not, nth-of-type count filter tag type, and Nth-child count does not filter;

: Nth-last-of-type (N):

This does not explain the ... Instead

: Last-child:

Select the last child element in the parent element

Note the position of the pseudo-class behind the TR, which is the gap of a space = = The last tr is selected above, and the bottom one is the last element in the selected TR;

: Root:

Select the document root node-the equivalent of HTML {}, but the weight is higher than HTML, because people are pseudo-class, Dip point class is higher than the label-;

: Empty:

Select No child elements of the label, the sum, this is generally no big use, because the text node is also a node, usually the table has empty cells, the list has empty items, and then do some processing, with JS Select empty elements this is very useful;

: Target:

The explanation of the web is to set the ID of the activity style, in fact, the browser path is prefixed with the # What, choose what transmission array;

: Enabled with: Disabled:

Pseudo-class for whether the form element is available;

: Enabled is available,:d isabled conversely;

: Checked:

Used for multiple selection and selected Pseudo-class;

: not:

This is not much to say--it has been used so much;

:: Selection:

The style of the selected text;

Summarize:

CSS3 Selector brings great convenience, what is wrong or not detailed above, please also point out. It's a little out of the deal, haha.

Some reference links:

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

A few more CSS4-looking

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

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

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

Summarize CSS3 new features (selector)