Commonly used CSS3 selectors

CSS selectors role is to find a particular class of elements from HTML pages. Commonly used types of CSS selectors shown in the following table.
Special pseudo-selectors, and the pseudo-element is divided into two kinds of pseudo-earth element.

An attribute selector

1.E [att ^ = value] attribute selector
E [att ^ = value] attribute selector means to select the name mark E, and the tag attribute defines att, att attribute value contains the value prefix substring . Note that E can be omitted, if omitted elements may represent any of the matching condition is satisfied.

2.E [to $= Value] attribute selector E [att$ = value] attribute selector means to select the name mark E, and the tags define the att attribute, attribute value contains att suffix value of the substring . And E [att ^ = value] as the selector, E elements may be omitted, if any element can be omitted, showing the matching condition is satisfied.

3, E [att * = value ] attribute selector
E [att * = value] selector for selecting a name for the mark E, and the tag attribute defines att, att attribute value contains the substring value. The selector, like the previous two selectors, E elements may be omitted, if omitted represents any element satisfies the condition of matching.

Second, the relationship between the selector

1.子代选择器（>）
子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。
2.兄弟选择器（+、~）
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
（1）临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
（2）普通兄弟选择器
普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

三、结构化伪类选择器

1. :root选择器
   :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
2. :not选择器
   如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
   如： body *:not(h3)
3. :only-child 选择器
   :only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。
4. :first-child和:last-child选择器
   :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
5. :nth-child(n)和:nth-last-child(n)选择器
   使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。
6. :nth-of-type(n)和:nth-last-of-type(n)选择器
   在上一节介绍了:nth-child(n)和:nth-last-child(n)选择器，并实现了一些简单的页面效果，本节将引入:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。
7. :empty选择器
   :empty选择器用来选择没有子元素或文本内容为空的所有元素。
8. :target选择器
   :target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。

Fourth, the dummy selector elements

1.:before selector
: before pseudo-element content selector for insertion in front of the content of the selected element, with the content attribute must specify the specific content to be inserted. The basic syntax is as follows:
<element>: before
{
Content: text / URL ();
}
In the above syntax, selected elements positioned ": before" before, "{}" content attribute specifies to insert specific content, which can also be thought of text to a picture.
2.:after selector
: after pseudo-element selector for inserting something after an element, using the method: before the same selector.

Fifth, the link pseudo-classes

1. Link pseudo-classes
in the CSS, the link state can be implemented by linking different pseudo-classes. The class is not the true meaning of the so-called pseudo-classes, his name is defined by the system, is often added to the tag name, class name or id name ":" constitutes. Hyperlink labeled pseudo-class has four kinds, particularly in the following table.