CSS3 Selector Detailed

CSS In addition to the earliest, the ID selector, class selector some of the new in the CSS3 to add a new selector, the use of new selectors greatly facilitates our programming, the following I said some CSS3 the use of the selector,

P selects all labels for the <p> element;

p{Background-color:yellow;} The background color of all p tags is yellow

Div,p This is the selection of all div and P element tags;

h1,p{background-color:red;} Sets the background color of H1 and P in all div to red

Div p This tag is the selection of all P tags under the div, note that this is clearly different from the previous article;

Div p{Background-color:green;} Select all the P background colors below the div to be green

Div>p This tag is the parent element tag of the div under all P tags;

Div>p{background-color:yellow;} Parent element is the P tag under Div

Div+p This is all the P elements immediately after the DIV;

Div+p{background-color:yellow;} P tag next to DIV element

[target] Selects all elements with the target attribute;

A[target]{background-color:yellow;} Select a label with the target attribute in a

[Target=_blank] Selects all elements with the Target=_blank attribute;

A[target=_blank]{background-color:yellow;} Select the a tag in the target property with the _blank new window open property

[Title~=flower] Select all elements of the title property that contain the word "flower".

[Title~=flower] {Background-color:yellow;} The Title property contains all the elements of the word "flower"

Pseudo class Selector

A:link hyperlink styles that have not yet been clicked

A:link{color:black;} The font color of a non-clickable hyperlink is black

A:visited has been clicked on the effect

a:visited{color:red;} The text color is red after a hyperlink is clicked

A:hover//The style of hyperlinks when the mouse passes over

A:hover{color:oringe;} The color of the hyperlink font is orange when the mouse passes over

A:active to set the style of an active link

A:active{color:yellow;} Set style for active links

: Fouce gets focus and sets style

Input:fouce{color:blue;} Set the font color for the focus of input

: Blur can set a style for losing focus

Input:blur{color:black;} Set style for input lose focus

: First-letter sets the style for the first letter of the element

p:first-letter{dont:28px;} Set the font to 28PX for the first letter of all P elements

: First-line sets the style for the first line of the element

P:first-line{background:black;color:white;} The first line of the element sets the background style and font color

: First-child sets the style for the first child element of an element

P:first-child{background:yellow;} Sets the background color for the first child element in a P element

: Before insert content before an element

P:before{content: "Hello";} Insert ' Hello ' before the P element is required to insert content

: After an element inserts content after

P:after{content: "Thank You";} Insert ' Thank you ' after the P element to insert content that needs to be used

: First-of-type selects the first element of a parent element

P:first-of-type{background:blue;} Select the first P element of the parent element to set a style

: Last-of-type selects the last element of a parent element

P:last-of-type{background:green;} Select the last P element of the parent element to set the style

: Nth-of-type (n) The parentheses are written in a few representations of the selected element n for all elements (not starting from 0)

P:nth-of-type (n) {background:red;} Select all P element settings style P:nth-of-type (even) {background:red;} Select the even P element to set the style P:nth-of-type (odd) {background:red;} Select the odd P element to set the style

: Root Selects Roots element

: root{background:red;} Set HTML background color to red

: Empty selects every element that has no child elements (including text nodes and spaces)

p:empty{Background:black;} Select the P element without any content (including spaces) to set the style

Category Selector

Div[id^= "PS" selects each <div> element whose id attribute value begins with "PS".

div[id^= "Test"]{background:red;} Set style for the first four test in each div class name

Div[id$= ". pdf"] Select the div whose ID is four bits end with a. pdf element

Div[id$= ". pdf"]{background:yellow;} Select the div whose ID is followed by the four-bit element that ends with a. pdf setting style

div[id*= "abc"] select Div as long as it contains elements of ABC

div[id*= "abc"]{BACKGROUND:BLUE;} Select Div to set the style as long as the element containing ABC

First of all to introduce these shortcomings, please advise thank you!

CSS3 Selector Detailed