css element selector (selector descendant elements, the sub-element selector, pseudo-classes, pseudo-element,: first-child,: first-of-type difference, etc.)

Element selector

You first need to know the relationship between the elements:
Parent elements: it contains elements direct child elements of
child elements: direct parent element is included
ancestor elements: direct or indirect descendant elements contain elements
descendant elements: directly or indirectly ancestor included elements
siblings: elements with the same parent element

Descendant element selector

Role: Select the specified element descendant elements specified
syntax: ancestor element descendant elements {}

div span {
	color: red;
}

<div>
	<span>第一个span。</span>  // 颜色为red
    <span>第二个span。</span>  // 颜色为red
</div>

Child element selector

Role: Select the parent element of the specified child elements specified
syntax: parent element> child element

div > span {
	color: greenyellow;
}

<div>
	<span>第一个span。</span>  // 颜色为greenyellow
    <span>第二个span。</span>  // 颜色为greenyellow
    <div>第三个元素</div>      // 颜色不变
</div>

Pseudo-classes

It represents a special state elements.
: active style is added to the activated elements.
: focus add style to the element that has the keyboard input focus.
: hover when the mouse was suspended at the top element, adding elements to the style.
: link to add style to unvisited links.
: visited link to add style has been accessed. (Privacy issues can only set color)
: First-Child add style to the first child element.
: lang add style to the element with the specified lang attribute.
:: selection match is highlighted or selected portions of the user.

a:link {      /* 未访问的链接 */
	color: #FF0000
}		

Pseudo-element

It represents an element in some special position.

: first-letter add special style to the first letter of the text.
: first-line add special style to the first line of text.
: before adding content before the element.
: after adding content after the element.

h1:after {
  content:url(logo.gif);
}

Attribute selectors

Action: the specified elements may be selected according to the attribute or attribute value elements.
Syntax: element [attribute name] Select containing the specified attribute
element [attribute name = "attribute value"] Select containing the specified attribute value
[attribute name ^ = "attribute value"] selected attribute values begin to specify the content of the element
[attribute name $ = "attribute value"] select the attribute value to specify the content of the end element
[* attribute name = "attribute value"] selection attribute value containing the content elements

p[title] {
	background-color: yellow;
}
p[title="hello"] {
	background-color: yellow;
}
<p title="hello">文字</p>

Other sub-element selectors

• :first-child

p:first-child { //匹配作为任何元素的第一个子元素的 p 元素
  color: red;
} 

<h1>这是标题</h1> // 没有元素颜色为red
<p>第一个段落。</p>  
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

Tip: The most common mistake is that the p: first-child like selector selects the first child of p elements.

• : last-child
  of the specified style last element of the parent element.

p:last-child // 指定父元素中最后一个p元素的背景色
{
background:#ff0000;
}

<p>第一个段落。</p>  
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<h1>这是标题</h1> // 没有元素背景#ff0000

Tip: The most common mistake is that the p: last-child like selectors will choose the last element p element.

• : nth-child
  matches the n-th position, and the specified element. It represents even positions even, odd element represents the odd positions.

p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}

<h1>这是标题</h1>
<p>第一个段落。</p>  // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

• : first-of-type
  selects the first element of a particular type.

p:first-of-type
{
background:#ff0000;
}

<h1>这是标题</h1>
<p>第一个段落。</p>  // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

• : last-of-type
  selecting element of a particular type of last.

p:last-of-type
{
background:#ff0000;
}

<p>第一个段落。</p>  
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>// 颜色为#ff0000
<h1>这是标题</h1>

• : nth-of-type
  selection of a particular type of n-th element.

p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}

<h1>这是标题</h1>
<p>第一个段落。</p>  
<p>第二个段落。</p>   // 颜色为#ff0000
<p>第三个段落。</p>
<p>第四个段落。</p>

Sibling selectors

Action: Select an element next to the designated brother (not via any element)
Syntax: element 2 elements 1 (the selected element immediately preceding element 1 is an element of the element 2)
Element 1 Element 2 + (last one)

Negation pseudo-class

Role: You can eliminate some of the elements selected from the elements in
syntax:: not (selector)

p:not(.hello) {
	background: yellow
}

<p>第一个段落。</p>                // 背景yellow
<p class="hello">第二个段落。      // 无背景
<p>第三个段落。</p>                // 背景yellow
<p>第四个段落。</p>                // 背景yellow