4.3.12 Pseudo-class selector

  • Structured pseudo-class selectors
  1. : root selector

The :root selector is used to match the document root element. The style defined with the :root selector is applied to all page elements. Elements that do not need the style can be overridden by setting a separate style.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>: Application of the root selector</title>
<style type="text/css">

:root {
color: pink;
}

h2 {
color: red;
}

</style>
</head>
<body>

<h2>The topic chrysanthemum</h2>/ / (1)<p>[Tang] Huang Chao rustling in the west wind full yard planted, bud cold butterfly difficult to come. If he is my qing Emperor, and a peach blossom.</p>/ / (2)</body>
</html>
Copy the code


Start step 1: The root selector sets all the text on the page to pink, and the second part sets the element text in (1) to red

  1. : not selector

If you use a style for a structure but want to exclude substructure elements below that structure element from using the style, you can use the :not selector.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>: Application of the NOT selector</title>

<style type="text/css">

body *:not(h3) {// The format cannot be changed. Only in this way can it run successfullycolor: orange;
font-size: 20px;
font-family: "宋体"; } / / (1)

</style>
</head>
<body>

<h3>The topic chrysanthemum</h3>/ / but<h3>Text styles in (1) are not applied<p>[Tang] Huang Chao</p>
<p>Rustling west wind full yard planted, pistil hanxiang cold butterfly difficult to.</p>
<p>If he is my qing Emperor, and a peach blossom.</p> 

</body>
</html>
Copy the code


(1) defines the text style for the page body. The “body *: not(h3)” selector is used to exclude the substructure element H3 from the body structure so that the text style does not apply.

  • Extended reference:

  1. : only – child selector

:only-childThe selector is used to match elements that belong to the only child of a parent element, that is, if a parent element has only one child, then”:only-childSelector “can select this child element.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>: Application of the only-child selector</title>

<style type="text/css">

li:only-child {
color:red;
}           * / / * (1)

</style>
</head>
<body>

<div>Domestic films:<ul>
<li>Grand master</li>
<li>Leaf asked</li>
<li>If you are the one</li>
</ul>American movies:<ul>
<li>Jurassic World</li>
</ul>Japanese anime:<ul>
<li>Crayon small new</li>
<li>naruto</li>
<li>Sea king</li>
</ul>
</div>

</body>
</html>
Copy the code


The :only-child selector “li:only-child” is used in the above code to select the li element as the only child of ul and to set its text color to red.

  1. :first-child and: last-Child selectors

:first-childThe selector and:last-childSelectors are used to set the style for the first or last child of the parent element, respectively.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Use of first-Child and last-Child selectors</title>

<style type="text/css">

p:first-child{
color:pink;
font-size:16px;
font-family:"宋体";
}

p:last-child{
color:blue;
font-size:16px;
font-family:Microsoft Yahei;
}

</style>
</head>
<body>

<p>The topic chrysanthemum</p>     
<p>[Tang] Huang Chao</p>
<p>Rustling west wind full yard planted, pistil hanxiang cold butterfly difficult to.</p>
<p>If he is my qing Emperor, and a peach blossom.</p> 

</body>
</html>
Copy the code

In this code, we use the :first-child selector and :last-child selector, respectively. The former is defined by the first-child selector and the latter by the last-Child selector



I’ll update this later on how to use this class selector correctly

  1. :nth-child(n) and: nth-last-Child (n) selectors

The: nth-Child (n) and: nth-last-Child (n) selectors are used to select the NTH and NTH reciprocal child elements

Nth-child (n) :nth-last-child(n) :nth-last-child(n) :nth-last-child(n) :nth-last-child(n)

  1. :nth-of-type(n) and :nth-last-of-type(n) selectors

The :nth-of-type(n) and :nth-last-of-type(n) selectors are used to match the NTH or reciprocal child of a particular type belonging to the parent element

The case is explained above

There will be several blogs devoted to the details of pseudo-class selectors

  • Pseudo-element selector

The so-called pseudo element selector is a selector that has been defined for pseudo elements in CSS. The common pseudo-element selectors in CSS are :before pseudo-element selector and: After pseudo-element selector.

  1. : before selector

The :before pseudo-element selector is used to insert content in front of the content of the selected element. It must be paired with the Content attribute to specify exactly what to insert. \

Basic syntax format:

Tag name :before {content: text /url(a); }Copy the code

In the syntax above, the selected element is before” :before”, and the content attribute in “{}” is used to specify the specific content to be inserted, which can be either text or an image.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the before selector</title>
<style type="text/css">

p:before {
content: "I am";
color: #c06;
font-size: 20px;
font-family: Microsoft Yahei;
font-weight: bold;
}
</style>
</head>
<body>

<p>O, Ken,</p>

</body>
</html>
Copy the code


The “:before” selector is used to add content to the beginning of the paragraph, and the content attribute is used to specify the specific content to add. To make the inserts more aesthetically pleasing, a text style is also set.

  1. : after selector

The: After pseudo-element selector is used to insert something after an element in the same way as the :before selector. Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Use of the After selector</title>
<style type="text/css">

/*p:after{content:url(images/tu.jpg); } * /
p:after{
content:url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3083554353,73017423&fm=26&gp=0.jpg);
}


</style>
</head>
<body>

<p>The moon of the fifteenth<br/></p>

</body>
</html>
Copy the code


  • Link pseudo class

In CSS, link pseudo-classes can be used to achieve different link states.

A pseudo-class is not a real class. Its name is defined by the system. It usually consists of the tag name, class name, or ID name plus “: “.

There are four pseudo-classes of the hyperlink tag < a>

Pseudoclass of the hyperlink tag < a> meaning
A :link{CSS style rules; } Status of the hyperlink when not accessed
A :visited{CSS style rules:} Status of the hyperlink after access
A :hover{CSS style rules; } Hyperlink status when the mouse is over or hovering
A :active{CSS style rule; } Status of the hyperlink when the mouse click is not moved

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Link pseudo class</title>
</head>
<style type="text/css">

a:link.a:visited {    /* Unaccessed and accessed are pink */
color: pink;
text-decoration: none;/* Clear the default underscore */ for hyperlinks
}

a:hover {            /* The text color is blue when mouseover */
color: blue;
text-decoration: underline;/* An underscore */ appears when the mouse is hovering
}

a:active {
color: #F00;
}/* If the mouse does not move, it is red */

</style>
</head>
<body>

<a href="#">Company home page</a>
<a href="#">Company profile</a>
<a href="#">Product introduction</a>
<a href="#">Contact us</a>

</body>
</html>
Copy the code
  • Special attention:

    Only in the above definition :link, :visited, :hover, :active order is defined, generally :link, :visited together, if not defined in the above order, will be displayed in the above order. Code before :link, :visited and after :active will not run

In practice, it is usually only necessary to use A :link, a:visited, a:hover to define the style of the link before the visit, after the visit and when the mouse hover, and often define the same style for a:link and a:visited, so that the style of the link not visited and visited backward is consistent.


Note:

(1) When using the four types of links at the same time, usually write in the order of A :link, a:visited, a:hover and a:active, otherwise the defined style may not work. (2) In addition to text styles, link pseudo-classes are often used to control the background, border, and other styles of hyperlinks.

4.4 Cascading and inheritance of the CSS

  1. Cascading sex

    The so-called lamination refers to multipleCSSStacking of styles
  2. inheritance

    Inheritance refers to writingCSSWhen using a style sheet, the child tag inherits some of the styles from the parent tag

4.5 CSS priority

When defining CSS styles, it is often the case that two or more rules apply to the same element, and the issue of priority arises.

Selector name The weight
Tag selector 1
Class selectors 10
The id selector 100 
P strong {color:black; } /* weights: 1+1*/ strong.blue {color:green; } / /.father strong {color:yellow; } /* ather: 10+1*/ p.leather strong {color:orange; } /* weight: 1+10+1*/ p.father. Blue {color:gold; } #header strong {color:pink; } /* Weight: 100+1*/ #header strong.blue {color:red; } /* Weight: 100+1+10*/Copy the code

The corresponding HTML structure:

<p class="father" id="header" >
<strong class="blue">Color of text</strong>
</p>
Copy the code

At this point, the most weighted style is applied to the page text, which is red.

In addition, some special cases need to be paid attention to when considering weights.

  • The inherited style has a weight of 0, which means that in a nested structure, no matter how heavy the parent element style is, the weight of the child element dimension is 0, which means that the style defined by the child element overwrites the inherited style. \

    Inheritance means that the child element inherits the related style attributes of the parent element, such as:

<html>
<body style="background:red; font-size:12px; ">
<p>Test the</p>
<body>
</html>
Copy the code

In the above example, the text of the paragraph inherits the body style

For example, the following CSS style code:

strong{color: red; } #header{color: green; }Copy the code

The corresponding HTML structure is:

<p id="header" class="blue">
<strong>An inherited style is better than a self-defined one</strong>
</p>
Copy the code

In the code above, although the #header has a weight of 100, it has a weight of 0 when inherited by Strong, and the strong selector has a weight of only 1, but it is greater than the weight of the inherited style, so the text in the page is shown in red.

  • Inline styles take precedence. applicationstyleAttribute, whose inline style weight is very high, can be understood as much more than 100. In short, it has a higher priority than any of the selectors mentioned above.
  • When the weights are the same, the CSS follows the proximity principle. That is, the style closest to the element has the highest priority, or the style last has the highest priority. Such as:
/* The CSS document is called style.css*/
#header{
color: red;
}  /* External styles */
Copy the code
// The HTML document structure is:<doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS first pole</title>

<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">

#header{
color: gray;
}    /* Inline styles */

</style>
</head>
<body>

<p id="header">At the same weight, the nearest priority</p>

</body>
</html>
Copy the code


After the above page is parsed, the paragraph text will appear gray, with inline styles taking precedence because inline styles are closer to the HTML element than the linked external styles. In the same way, if two external stylesheets are referenced at the same time, the stylesheets listed below have greater priority.

If you change the inline style to:

p{
color: gray;
} /* Inline styles */
Copy the code

The weight is different, the #header has a higher weight, and the text will appear red as defined for the external style.

  • CSSDefines a! importantThe command is given the highest priority. Which means that regardless of the weight and how far away the style is,! importantHave maximum priority. Such as:
/* The CSS document is called style.css */
#header{color: red! important; }/* External style sheet */
Copy the code
// The HTML document structure is:<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>! The important command takes the highest priority</title>

<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">

#header{
color: gray;
}   /* Inline styles */

</style>
</head>

<body>
<p id="header" style="color:yellow">
<! -- Inline CSS style -->Heaven king cover ground tiger,! The important command takes the highest priority</p>
</body>
</html>
Copy the code


What’s wrong??

After the page is parsed, the paragraph text is displayed in red, that is, used! The important command style has the highest priority. Note that the important command must be between the attribute value and the semicolon, otherwise it is invalid.

Note that the weight of the composite selector is a sum of the weights of the base selectors that make it up, but this sum is not simply a sum of numbers.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Overlay of composite selector weights</title>

<style type="text/css">

.inner{
text-decoration: line-through;
} /* Class selectors are defined to dividers with a weight of 10*/

div div div div div div div div div div div{
text-decoration: underline;
}/* The descendant selector defines an underscore with a weight of 11 1's superimposed */

</style>
</head>
<body>

<div>
<div><div><div><div><div><div><div><div><div>
<div class="inner">Style of text</div>
</div></div></div></div></div></div></div></div></div>
</div>

</body>
</html>
Copy the code

Finally, instead of underlining the text as expected, it shows the class selector. The inner strikedown line, the tag selector, no matter how much it’s stacked, it doesn’t weigh more than the class selector and the same thing with the class selector, no matter how much it’s stacked, it doesn’t weigh more than the ID selector, right

I’ll see you next time




If you’re tired, fill up

It’s a lonely journey

We both manage to keep going

You and me

Hi, I’m Ken

Thank you for reading

If there are any flaws in my blog, please leave a message in the comment area or chat privately. Thank you for your comments