CSS Selector's contrast style code refinement

These are usually divided into three main categories:
* Selects all objects.wildcard selector (Universal Selector)It is generally not recommended to use a wildcard selector because it iterates through and hits all the elements in the document, and for performance reasons, use it as appropriate
OneTag Selector, using the start tag as the selector.
TwoID SelectorIdentify with a unique identifier ID (representing #name)
#name {
font-size:16px;
}
ThreeClass SelectorClass selectors can define multiple (representing. name) at the same time, unlike the uniqueness of the ID selector.
. name{
font-size:16px;
}
class Selector Advanced usage: Multi-class selectors
. a.b {
Color: #000;
}
<div class= "a B" > Multi-Class selectors using methods </div>
include selectors
. Demo Div {border:1px solid #fff;}
Sub-selectors
. demo > Div {border:1px solid #fff;}
difference：Unlike child selectors (child selectors can only hit child elements), the include selector will hit all descendants that meet the criteria.

Adjacent selectors

P+p{color: #f00;}

Brother Selector

P~p{color: #f00;}
difference : Unlike sibling selectors (sibling selectors will hit all eligible sibling elements), adjacent selectors will only hit adjacent sibling elements that match the criteria.
Several uses of the property selector:
Ordinary:
<style>
Img[alt] {
margin:10px;
}
</style>
/* This one is selected */

First: (Select the element that has the XXX attribute and the attribute value equals XXX.) ）
<style>
Input[type= "Text"] {
border:1px solid #000;
}
</style>
<input type= "Text"/>
<input type= "Submit"/>

Second: [Select a list of words that have the xxx attribute and attribute values as a space-delimited, where one element equals a (with only one value and the value equals a)]
<style>
Div[class~= "a"] {
border:1px solid #000;
}
</style>
<div class= "a" >1</div>/* First, Third selected */
<div class= "B" >2</div>
<div class= "a B" >3</div>

Third: (Select the element that has the XXX attribute and the property value is a string that begins with a.) ）
<style>
Div[class^= "a"] {
border:1px solid #000;
}
</style>
<div class= "ABC" >1</div>/* First, second selected */
<div class= "ACB" >2</div>
<div class= "BAC" >3</div>

Fourth: (Select the element with the XXX attribute and the property value as the string ending with C)
<style>
Div[class$= "C"] {
border:1px solid #000;
}
</style>
<div class= "ABC" >1</div>/* First, Third selected */
<div class= "ACB" >2</div>
<div class= "BAC" >3</div>

Fifth: (Select the element that has the XXX attribute and the property value is a string containing B.) ）
<style>
Div[class*= "B"] {
border:1px solid #000;
}
</style>
<div class= "ABC" >1</div>/* All selected */
<div class= "ACB" >2</div>
<div class= "BAC" >3</div>

Sixth: (Select an element with a XXX attribute with a property value beginning with a and a string delimited by the connector "-"), if the attribute value is only a, it will be selected)
<style>
Div[class|= "a"] {
border:1px solid #000;
}
</style>
<div class= "A-test" >1</div>/* First selected */
<div class= "B-test" >2</div>
<div class= "C-test" >3</div>

Pseudo-Class selector: (pre-access, mouse hover, currently clicked, visited)
A:link {}
a:visited {}
a:hover {}
a:active {}
Order from top to bottom

Xxx:focus
Sets the style of the object when it becomes the input focus (the object's onfocus event occurs).
The WebKit kernel browser will default to: the focus state element plus the outline style.

Xxx:lang (FR) matches the XXX element that uses a special language.

Xxx:not (s) matches an element that does not contain an S-selector .
With this selector, you'll be able to handle a scenario like this: Suppose you have a list, each list item has a bottom edge, but the last item doesn't need a bottom edge
. Demo Li:not (: Last-child) {
border-bottom:1px solid #ddd;
}

Xxx:first-child/xxx:last-child matches the first/last child element of the parent element.
For this property to take effect, the XXX element must be a child of an element, and the parent element of XXX is the body, that is, the XXX element can be a child of the body

Xxx:only-child matches only one child element of the parent element.
For this property to take effect, the XXX element must be a child of an element, and the parent element of the XXX element is the highest body, i.e. the XXX element can be a child of the body

xxxx:nth-child (n) matches the nth child element xxx of the parent element, assuming that the child element is not xxx, the selector is not valid.
Such as:
Li:nth-child (2n) {color: #fff;}/* even */
Li:nth-child (2n+1) {color: #000;}/* Odd */

xxx:nth-last-child (n) matches the parent element's reciprocal nth child element xxx, assuming that the child element is not xxx, the selector is not valid.

Xxx:first-of-type matches the first sibling element xxx in the same type.
Xxx:last-of-type matches the last sibling element xxx in the same type.
For this property to take effect, the XXX element must be a child of an element, the parent of XXX is the highest HTML, that is, XXX can be a child of HTML, that is, XXX can be the body
The selector can always hit the parent element's 1th/last child of XXX, regardless of whether the 1th/last child element is E

Xxx:only-of-type matches only one sibling element xxx of the same type.
P:only-of-type {
Color: #000;
}
<div class= "Test" >
<p> structural pseudo-class selector xxx:only-of-type</p>
</div>

Xxx:nth-of-type (n) matches the nth sibling element xxx in the same type.
<div>
<p> 1th a p</p>
<p> 2nd a p</p>
<span> 1th a span</span>
<p> 3rd a p</p>
<span> 2nd a span</span>
</div>
As in HTML, suppose the first span in hell:
Span:nth-of-type (1) {color: #000;}
If you use Xxx:nth-child (n):
Span:nth-child (3) {color: #000;}

Xxx:nth-last-of-type (n) matches the reciprocal nth sibling element xxx in the same type.
Xxx:empty Matching empty node elements

xxx:checked matches the selected element e in the user interface. (used when input type is radio and checkbox)
Input:checked + span {
Background: #f00;
}
Input:checked + Span:after {
Content: "I have been chosen"; /* Append text with style */
}

The xxx:enabled matches the element e that is in the available state on the user interface. /xxx:disabled the element xxx that is in the disabled state on the user interface.
Input[type= "Text"]:enabled {
border:1px solid #000;
Background: #fff;
Color: #000;
}
Input[type= "text"]:d isabled {
border:1px solid #333;
Background: #ff9933;
Color: #666;
}
<ul>
<li><input type= "text" value= "Available status"/></li>
<li><input type= "text" value= "Available status"/></li>
<li><input type= "text" value= "Disable State" disabled= "disabled"/></li>
<li><input type= "text" value= "Disable State" disabled= "disabled"/></li>
</ul>

Pseudo-Object selectors
Xxx:first-letter/xxx::first-letter sets the style of the first character within the object. (such as Drop cap)
This pseudo-object is used only for block objects. Inline object to use this pseudo-object, you must first set it as a block-level object.
This pseudo-class is often used to create a drop-cap effect with the Font-size property and the float property.

Xxx:first-line/xxx::first-line sets the style of the first row within the object.
This pseudo-object is used only for block objects. Inline object to use this pseudo-object, you must first set it as a block-level object.

Xxx:placeholder sets the style of the object text placeholder.
Compatible wording: In addition to Firefox is:: [Prefix]placeholder, other browsers are used:: [Prefix]input-placeholder
Input::-webkit-input-placeholder {
Color: #999;
}
Input:-ms-input-placeholder {//ie10+
Color: #999;
}
Input:-moz-placeholder {//firefox4-18
Color: #999;
}
Input::-moz-placeholder {//firefox19+
Color: #999;
}

Xxx::selection sets the style of the object when it is selected.
It is important to note that: selection can only define Background-color,color and Text-shadow when selected (IE11 does not yet support the definition of this property).

CSS Selector's contrast style code refinement