I Basic selector

Basic selector:

• Label selector: for a class of labels
• ID selector: used for a specific label
• Class selector: use for all tags you want
• Universal selector (wildcard): applicable to all labels (not recommended)

selector	Example	describe
.class	.nav	Select all elements of class = "intro"
#id	#firstname	Select all elements with id = "firstname"
*	*	Select all elements
element	p	Select all elements
element,element	div,p	Select all elements and all elements

II Structure selector

selector	Example	describe
element element	div p	Select all elements inside the element (all descendant elements)
element>element	div>p	Select all elements (sons) whose parent element is an element
element+element	div+p	Select the element immediately after the element (the nearest brother)
element~element2	p~ul	Select all elements (siblings) at the same level of the element and after the element

1. Descendant selectors, separated by spaces

.div1 p {
        color: red;
}

Spaces indicate descendants Div1 denotes p The offspring of div1 all p.

2. The descendant selector is represented by the symbol >

div > p {
    color: red;
}

div's son p. And the offspring p of div.

3. Adjacent sibling elements

Used to select the sibling element next to it.

h3 + p {
        color: red;
}

The selector above means that the first brother next to the h3 element is selected.

4. Subsequent sibling elements

Used to select all subsequent sibling elements.

p~ul {
	color:red;
}

ul of all sibling tags after the p tag is selected.

III attribute selectors

Style elements based on attributes.

selector	Example	describe
[attribute]	[target]	All elements with target attribute
[attribute=value]	[target=_blank]	All elements with targe attribute equal to "_blank"
[attribute~=value]	[title~=houdunren]	The title attribute contains all the elements of the word "houdunren"
[attribute|=value]	[title|=hd]	A word whose title attribute value is "hd", or an independent word connected by hd CMS with -
[attribute*=value]	a[src*="hdcms"]	The src attribute contains each element of the "hdcms" character
[attribute^=value]	a[src^="https"]	src attribute value for each element starting with "https"
[attribute$=value]	a[src$=".jpeg"]	src attribute all elements ending in ". jpeg"

1. Set the style for h1 label with class attribute

h1[class] {
    color: red;
}
...

<h1 class="container">xioafeixia</h1>

2. Constrain multiple attributes

h1[class][id] {
    color: red;
}
...

<h1 class="container" id >xioafeixia</h1>

3. Specific attribute value setting style

a[href="https://www.baidu.com"] {
    color: green;
}
...

<a href="https://www.baidu.com">hhh</a>
<a href="">HDCMS</a>

^The element that starts with the specified value

h2[name^="p"] {
    color: red;
}
...

<h2 name="p1">xioafeixia</h2>
<h2 name="p2">xioafeixia</h2>

$elements ending with the specified value

<h2 name="1person">xiaofeixia</h2>
<h2 name="2">xiaofeixia</h2>
...

h2[name$="person"] {
    color: red;
}

*An element with a value anywhere inside the property

h2[name*="dog"] {
    color: red;
}
...

<h2 name="bigdog">xiaofeixia</h2>
<h2 name="dog.com">xiaofeixia</h2>

~The attribute value contains the element of the specified vocabulary

The keyword must be included in the attribute, rather than specifying that the keyword is part of the word of the attribute.

h2[name~="person"] {
    color: red;
}
...

<h2 name="1person">xiaofeixia</h2>/*At this time, the first h2 does not take effect. It contains the specified vocabulary, not the target vocabulary in a vocabulary*/
<h2 name="person one">xiaofeixia</h2>

|An element that starts with a specified value or connects a dash with an attribute

h2[name|="person"] {
    color: red;
}
...

<h2 name="person">xiaofeixia</h2>
<h2 name="person-web">xiaofeixia</h2>

IV Pseudo class selector

Set style rules for elements with different states or uncertain existence.

Sum of all selectors

state	Example	explain
:link	a:link	Select all links that are not accessed
:visited	a:visited	Select all links that have been accessed
:hover	a:hover	When the mouse moves over an element
:active	a:active	When clicking is happening
:focus	input::focus	Select the input element that gets the focus
:root	:root	Select the root element of the document, html.
:empty	p:empty	Select each element without child elements (including text nodes).
:first-child	p:first-child	Select each element that belongs to the first child element of the parent element
:last-child	p:last-child	Select each element that belongs to the last child element of its parent element.
:first-of-type	p:first-of-type	Select each element that belongs to the first element of its parent element
:last-of-type	p:last-of-type	Select each element that belongs to the last element of its parent element.
:only-of-type	p:only-of-type	Select each element that is unique to its parent element.
:only-child	p:only-child	Select each element that belongs to the only child element of its parent element.
:nth-child(n)	p:nth-child(2)	Select each element that belongs to the second child element of its parent element.
:nth-child(odd)	p:nth-child(odd)	Select an odd element that belongs to its parent element.
:nth-child(even)	p:nth-child(even)	Select even elements that belong to their parent elements.
:nth-of-type(n)	p:nth-of-type(2)	Select each element that belongs to the second element of its parent element.
:nth-last-child(n)	p:nth-last-child(2)	As above, count from the last child element.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Same as above, but counting starts from the last child element.
:not(selector)	:not§	Select each element that is not an element

Pseudo class selector:

• Hyperlink pseudo class
• Structural pseudo class
• Form pseudo class
• Character pseudo class

Static and dynamic pseudo classes:

There are two types of pseudo class selectors.

(1) Static pseudo class: can only be used for styles of hyperlinks. As follows:

• : link before clicking the hyperlink
• After the visited link is accessed:

PS: the above two styles can only be used for hyperlinks.

(2) Dynamic pseudo class: a style that applies to all labels. As follows:

• : hover: when the mouse is over the label
• : active "activate": when the mouse clicks on the label but does not let go.
• : focus is the style when a label gets focus (for example, an input box gets focus)

1. Hyperlink pseudo class

Define different states of hyperlinks

Four states of hyperlinks

a tag has four pseudo classes (corresponding to four states). As follows:

• : link "link": before clicking the hyperlink
• : visited: after the link has been visited
• : hover: when the mouse is over the label
• : active "activate": when the mouse clicks on the label but does not let go.

In css, these four states must be written in a fixed order:

a:link ,a:visited ,a:hover ,a:active

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
...

<a href="https://www.baidu. Com "> backers</a>

Pseudo classes can be used not only for links, but also for other elements. The following is the style settings for clicking on the form and obtaining the focus status.

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
...

<input type="text">

2. Structure pseudo class

:first-child

div p:first-child {
    color: antiquewhite;
}

<article>
    <span>xiaofeixia</span>
    <div>
        <p>123</p>
        <p>456</p>
    </div>
</article>

Select the first of the div's child elements.

:first-of-type

    div div:first-of-type {
        color: antiquewhite;
    }
    
    <article>
        <span>xiaofeixia</span>
        <div>
            <p>123</p>
            <div>hhhh</div>
            <div>bbbbb</div>
            <p>456</p>
        </div>
    </article>
    

The selection type is the first element of the div

:only-child:

The "only child" selector selects only one child element in the parent element and only one child element. In other words, the parent element of the matched element has only one child element and is a unique child element.

article span:only-child {
    color: red;
}
...

<article>
	<span>xiaofeixia</span>
	<aside>
		<span>xiaofeixia</span>/*This element takes effect*/
	</aside>
</article>

Explanation:

Here to find out: the parent element of sapn has only one child element. The child element is then validated. The upper span also has brother elements, so it doesn't take effect.

:only-of-type

Select the only child element in the sibling whose type is span

article span:only-of-type {
    color: red;
}

div:only-of-type{
    background-color:red;
}

<article>
    <span>xiaofeixia</span>
    <aside>
        <span>xiaofeixia</span>
        <span>xiaofeixia</span>
    </aside>
</article>

<div id="main" class="x">
    <div id="a">first DIV</div>
    <div id="b">first DIV</div>
    <p>first P</p>
</div>

The first xiaofeixia here takes effect.

The div selected at this time is the div with id of main, which is the element of the unique type (DIV) of the element body, so the whole div will turn red.

:nth-child(n)

Select the second element and it is the of the span tag.

article span:nth-child(2) {
    color: red;
}
...

<article>
  <span>xiaofeixia</span>
  <aside>
    <span>xiaofeixia</span>
    <span>14563</span>/*Here the style takes effect*/
  </aside>
  <span>ggggggghjsn</span>
</article>

:nth-of-type(n)

Select the second span element, regardless of the other elements in the middle

article span:nth-of-type(2) {
        color: red;
}
    ...
    
<article>
    <span>xaiofeixia</span>
    <aside>
        <span>xaiofeixia</span>
        <span>dsgsg</span>/*Style validation*/
    </aside>
    <span>jfhfgsgssgs</span>/*Style validation*/
</article>

Calculated quantity

n is 0 / 1 / 2 / 3..., here is the interlaced color change

table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>Backing person</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

Style from the third

table tr>td:nth-child(n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

Set the first three elements

table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

Even element

Select even cells

table tr>td:nth-child(even) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>Backing person</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

Odd element

Select odd cells

table tr>td:nth-child(odd) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>Backing person</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

:nth-last-child(n)

Get from the last element

table tr>td:nth-last-child(2n+1){
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>Backing person</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

Take the last two elements

main>ul li:nth-last-child(-n+2) {
	color: red;
}

:nth-last-of-type(n)

Select the span tag from the last element.

article span:nth-last-of-type(1) {
    background: red;
    color: white;
}
...

<article>
  <aside>
  	<span>houdunren.com</span>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
	<span>hdphp.com</span>
</article>

:not(selector)

Exclude the first li element

ul li:not(:nth-child(1)) {
    background: red;
}
...

<ul>
  <li>houdunren.com</li>
  <li>hdcms.com</li>
  <li>Backing person</li>
</ul>

3. Form pseudo class

selector	Example	explain
:enabled	input:enabled	Select each enabled input element
:disabled	input:disabled	Select each disabled input element
:checked	input:checked	Select each selected input element
:required	input:required	Element containing the required attribute
:optional	input:optional	Elements that do not contain the required attribute
:valid	input:valid	Form elements that passed validation
:invalid	input:invalid	Forms that fail validation

Form attribute style

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">male</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">female</label>

Form required style

input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc; 
	border: none;
}
...

<input type="text" name="title" required>
<input type="text" name="name">

Form validation style

input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
...

<form>
<input type="email">
<button>preservation</button>
</form>

4. Character pseudo class

state	Example	explain
::first-letter	p::first-letter	Select the first letter of each element
::first-line	p:first-line	Select the first row of each element
::before	p:before	Insert content before the content of each element
::after	p:after	Insert content after the content of each element

Initial capital:

p::first-letter {
    font-size: 20px;
}

<p>
    study hard and make progress every day
</p>

Paragraph first line processing:

p::first-line {
    font-size: 30px;
}

<p>
    study hard and make progress every day. study hard and make progress every day.<br>study hard and make progress every day. study hard and make progress every day
</p>

Add before and after element:

span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
...

<span>Little Feixia</span>