CSS3 structure Pseudo-class selector--root, not, empty, target selector

1.root Selector

Binds a style to the root element of the page. The root element is the element that is the topmost structure in the document tree, which in the HTML page refers to the

<style type= "Text/css" >

: root{

Background:yellow;

}

body{

Background:green;

}

</style>

Note: Instead of using the root selector to specify the background color of the root element, only the background color of the BODY element is specified, the entire page becomes green.

2.not Selector

If you want to use a style for a structure element, but want to exclude the sub-structure element below the structure element so that it does not use this style, you can use the not selector.

Body*:not (H1) {

Background:yellow;

}

3.empty Selector

The empty selector is applied to specify the style to use when the contents of the element are blank.

: empty{

Background:yellow;

}

4.target Selector

Use the target selector to specify a style for a target element in the page that is used as a hyperlink to the page, which works only when the user taps the page's hyperlink and jumps to the target element.

<style type= "Text/css" >

: target{

Background:yellow;

}

</style>

<a href= "#text1" > Text 1</a>

<div id= "Text1" >

<p> omit 100 words here </p>

</div>

CSS3 structure Pseudo-class selector--root, not, empty, target selector