This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account on the home page).

This blog is suitable for those who are new to HTML and those who want to review after a long time



He’s not yet in the ivory tower

But I’m always at a loss

Sometimes I long for a belief to be the spiritual support that keeps me going all the way

But it hasn’t worked out

Then I had a brief exposure to the social environment

I also saw some very interesting souls

Most of them are funny and kind

But I was also screwed up by life

This seems to let me see the shadow of myself if I continue to muddle along for five or ten years

A little bit of understanding of my father’s suffering

… …

No one wants to be normal when they are young

So let’s get down to business

4 CSS selectors

4.1 Introducing CSS style sheets

1. The inline type

< span style=" max-width: 100%; box-sizing: border-box! Important; Attribute 2: Attribute value 2; Attribute 3: attribute value 3;" </ tag name >Copy the code

Style is an attribute of the tag

2. embedded

<head>
<style type="text/css">Selector {property1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}

</style>
</head>
Copy the code

This is in the head tag

3. Inbound type

<head>
<link href="Path to CSS files" type="text/css" rel="stylesheet"/>
</head>
Copy the code

Note:

  • hrefMay:Is the URL of the linked external stylesheet, which can be either a relative or absolute path.
  • type:Defines the type of the linked document, which needs to be specified here as”text/css“, indicating that the external file to be linked isCSSThe style sheet.
  • rel:Defines the relationship between the current document and the linked document, which needs to be specified here as”stylesheet“, indicating that the linked document is a stylesheet file.

The biggest benefit of chaining is that the same CSS stylesheet can be linked to different HTML pages, and one HTML page can be linked to multiple CSS stylesheets with multiple tags.

Chain-in is the most frequently used, but also the most practical CSS stylesheet, to achieve the complete separation of structure and performance, so that the page of pre-production and post-maintenance are very convenient.

4.2 CSS selector style rules

Selector {property1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}
Copy the code

The HTML object that the selector uses to specify the CSS style is the specific style that is set to that object inside the curly braces. The properties and property values appear as “key-value pairs” and are connected with “:” and “; “between” key-value pairs.” The connection

Note:

  1. HTML5The label is not case sensitive(<p></P>All the same), but **CSSSelectors in the style are case sensitive, but properties and values are not. It is customary to write “selectors, properties, and values” in lower case. 支那
  2. If the value of an attribute consists of multiple words with Spaces between them, the attribute value must be quoted in the English state.
  3. CSSSpaces in code are not parsed, and Spaces before and after curly braces and semicolons are optional. So you can use the space bar,TabKey, enter key, etc to style and typeset to increase the readability of the code.
h1 {
font-size: 20px; } / /20There is a space between px and the unit pxCopy the code

According to the code above _ Note: No space is allowed between the value of the attribute and the unit, otherwise the browser will parse it incorrectly.

  1. A semicolon must be used between multiple “attributes: attribute values “; , the last “property: property value” can be omitted, but add “property: property value” to improve code readability and facilitate the addition of new “property: property value”. To improve code readability, it is recommended to add comments.

4.3 CSS selectors

To apply a CSS style to a particular HTML element, you first need to find the target element. In CSS, the part of the style rule that does this is called the selector.

4.3.1 Tag selectors

Tag selector refers to using the HTML tag name as the selector

Tag name {attribute1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}
Copy the code
p {
font-size: 12px; 
color: # 666; 
font-family: Microsoft Yahei;
}
Copy the code

4.3.2 Class selector

Class selectors are identified by a., followed by the class name.

.class name {attribute1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}
Copy the code

The class attribute is similar to the ID selector, except that the class attribute can define multiple elements with the same class attribute value. We can say that they are a class element or we can set multiple class attribute values for an element at the same time, separated by Spaces

Example:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Class selectors</title>

<style type="text/css">

.red {
color: red;
}
                           
.green {
color: green;
}
                       
.font22 {
font-size: 22px;
}     /* font with font22 */ after class

p {
text-decoration: underline;
font-family: Microsoft Yahei;           
/* All p tags inside font: Microsoft Yahei + underline */
}

</style>
</head>
<body>

<h2 class="red">Secondary heading text</h2>          
<! - red - >

<p class="green font22">Paragraph: The content of the text</p> 
<! -- Font: Green + Pixel 22+ Microsoft Yahei + Underline -->

<p class="red font22">Paragraph 2 text content</p>   
<! -- Font: Red + Pixel 22+ Microsoft Yahei + Underline -->

<P>Paragraph 3 text content</p>                      
<! -- Font: Microsoft Yahei + underline -->

</body>
</html>
Copy the code

You can see that multiple tags can use the same class name, which enables different types of tags to specify the same style. It is also possible to apply more than one class to an HTML element to set more than one style. In HTML tags, separate the class names with Spaces, such as green font22 and Red Font22.

4.3.3 ID selector

Select only one element by its id attribute value.

#idName {properties1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}
Copy the code
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The id selector</title>

<style type="text/css">

#bold {
font-weight: bold;
}

#font24 {
font-size:24px;
}

#bold#font24 {
font-weight: bold;
font-size: 24px;
}

</style>
</head>
<body>

<p id="bold">Paragraph 1:id="bold", set the text in bold.</p>       <! -- Bold text -->
<p id="font24">Paragraph 1:id="font24", set the size to 24px.</p> <! -- size 24px -->
<p id="font24">Paragraph 1:id="font24", set the size to 24px.</p> <! -- size 24px -->
<p id="bold font24">Paragraph 1:id=" Bold Font24 "and set both the bold and font size to 24px.</p>  <! -- No change -->                     

</body>
</html>
Copy the code

The fourth line of code, id = “Bold Font24”, is written incorrectly. Id selectors do not support defining multiple values, as class selectors do.

4.3.4 Wildcard selectors

Wildcard selectors, denoted by an *, match all elements \ in the page

Basic syntax format:

* {properties1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
}
Copy the code

The use of wildcard selectors is not recommended in real web development because the styles it sets work for all HTML tags, whether they require styles or not, slowing down code execution.

4.3.5 Label specified Selector (Intersection selector)

Also known as the intersection selector, it consists of two selectors, the first is a tag selector and the second is a class or id selector. There can be no space between the two selectors, such as h3.special or p#one.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Label - specified selector</title>

<style type="text/css">

p {
color: blue;
}   /* Specifies the color of the first line of text in the body tag below as blue */

.special {
color: green;
}                   /* Specifies the color of the third line of text below the body tag as green */

p.special {
color: red;
}/* Tag specified selector */  /* Specifies the second line of text below the body tag to be red */

</style>
</head>
<body>

<p>Normal paragraph text (blue)</p>
<p class="special">Specifies paragraph text for the.special class (red)</p>
<h3 class="special">Specifies paragraph text for the.special class (green)</h3>    
               
</body>
</html>
Copy the code


4.3.6 Descendant selectors (and child elements)

Relation between elements Parent element: element that directly contains children Child element: element that is directly contained by its parent Parent element Ancestor element: element that directly or indirectly contains its descendants, and parent element is also the ancestor

Descendant element selectors

Function:

Selects the specified descendant element of the specified element

Grammar:

Ancestor element Descendant element {}

The child element selector is used to select the child element of the specified parent element. We’ll talk about that in relational selectors

This selector is used to select the descendants of an element or group of elements and is written in such a way that an outer tag is written before and an inner tag is written after, separated by a space. When the tags are nested, the inner tags become the descendants of the outer tags.

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

p strong {
color: red;
} /* Progeny selector */     /* specifies that the first line of the body tag is red */

strong {
color: blue;
}                    /* Specifies that the second line of the body tag is blue */

</style>
</head>
<body>

<p>Paragraph text<strong>Text nested within paragraphs, defined with the strong tag (in red)</strong></p>
<strong>Text (blue) defined outside of the nesting by the strong tag.</strong>

</body>
</html>
Copy the code

4.3.7 Union selector

A union selector is also called a compound selector. A union selector can select elements that satisfy multiple selectors at the same time

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Union selectors</title>
<style type = "text/css">

h2.h3.p {
color: red;
font-size: 14px;
} /* A union selector of different tags */

h3..special.#one {
text-decoration: underline;   
}  /* Underline */

</style>
</head>
<body>

<h2>Secondary heading text</h2>                           <! -- font 14 pixels, red -->
<h3>Level 3 heading text</h3>                           <! -- Font 14 pixels, red, underlined -->
<p class="special">Paragraph text 1, underlined.</p>      <! -- Font 14 pixels, red, underlined -->
<p>Paragraph Text 2</p>                               <! -- font 14 pixels, red -->
<p id="one">Paragraph text 3</p>                      <! -- Font 14 pixels, red, underlined -->

</body>
</html>
Copy the code


The code size and color are the same, except that one title and two paragraphs of text are underlined (as indicated above).

4.3.8 Property selector

  1. E[att^=value] Attribute selector

The E[att^=value] attribute selector selects a tag named E that defines the ATT attribute, and the ATT attribute value contains a substring prefixed with value.

Note that E can be omitted, which means that any element that satisfies this condition can be matched. \

For example, div\[id^=section] matches a div element that contains an ID attribute whose value begins with the string “section.”

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value] The application of the attribute selector</title>

<style type="text/css">

p[id^="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}

</style>
</head>
<body>

<p id="one">The sky is azure blue</p>   <! -- Property selector defined -->
<p id="two">There are paper cranes outside the window</p>   <! Attribute selector not defined -->
<p id="one1">Play and write songs with me</p>  <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p>  <! Attribute selector not defined -->

</body>
</html>
Copy the code


In the above code, the E[att^=value] attribute selector “p[id ^=” one “] “is used. Whenever the value of the ID attribute in the P element begins with the “one” string, it is selected, rendering a special text effect.

  1. E[att$=value] Attribute selector

The E[att$=value] attribute selector selects a tag named E that defines the ATT attribute, and the ATT attribute value contains a substring with the suffix value.

E can be omitted, which means that any element that satisfies the condition can be matched.

For example, div[id$=section] matches div elements that contain the ID attribute and whose id attribute value ends in the string “section.”

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value] Application of attribute selectors</title>

<style type="text/css">

p[id$="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}

</style>
</head>
<body>

<p id="one1">The sky is azure blue</p>   <! Attribute selector not defined -->
<p id="two">There are paper cranes outside the window</p>   <! Attribute selector not defined -->
<p id="1one">Play and write songs with me</p>  <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p>  <! Attribute selector not defined -->

</body>
</html>
Copy the code


In the code above, the E[att$=value] attribute selector “p[id $=” one “] “is used. Whenever the value of the ID attribute in the P element ends in the “one” string, it is selected, rendering a special text effect.

  1. E[att*=value] Attribute selector

The E[att*=value] attribute selector selects a tag named E that defines the ATT attribute, and the att attribute value contains a substring of value.

E can be omitted, which means that any element that satisfies the condition can be matched.

For example, div[id*=section] matches div elements that contain the ID attribute and whose ID attribute value contains the “section” string.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value] Application of an attribute selector</title>

<style type="text/css">

p[id*="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}

</style>

</head>
<body>

<p id="one1">The sky is azure blue</p>   <! -- Property selector defined -->
<p id="two">There are paper cranes outside the window</p>   <! Attribute selector not defined -->
<p id="1one">Play and write songs with me</p>  <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p>  <! Attribute selector not defined -->

</body>
</html>
Copy the code


In the above code, the E[att*=value] attribute selector “p[id*=” one “] “is used. As long as the VALUE of the ID attribute in the P element contains the “one” string, it is selected, rendering a special text effect.

4.3.9 Relationship selector

The relation selector mainly includes the child selector and the brother selector, in which the child selector is connected by the symbol “>”, the brother selector is connected by the symbol “+” and “~”.

  1. Child selector (>)

The child selector is used to select the first level of children of an element.

For example, you want to select only onh1Of the children of the elementstrongThe element can be written like this:h1 > strong.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The application of the child selector</title>

<style type="text/css">

h1>strong {
color: red;
font-family: Microsoft Yahei;
font-size: 20px;
}

</style>
</head>
<body>

<h1>With dreams in your heart,<strong>Don't lose faith</strong></h1>          <! -- (1) -->
<h1><em><strong>See through the pain,</strong></em>Love the world</h1> <! -- (2) -->

</body>
</html>
Copy the code


In the above code, the strong element in (1) is a child of the h1 element, and the strong element in (2) is a grandson of the H1 element, so the styles set in the code are valid only for the code in (1).

  1. Brother selector (+, ~)

The sibling selector is used to select the sibling element that is in the same parent element as an element and is located after that element.

Brother selectors are divided into adjacent brother selectors and ordinary brother selectors.

  1. Near brother selector

The selector uses the plus sign “+”; Connect the front and back selectors. The two elements in the selector have the same father, and the second element must follow the first.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Application of adjacent sibling selectors</title>

<style type="text/css">

p+h2 {
color: green;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

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

</body>
</html>
Copy the code


The adjacent sibling selector applies to (1). The first sibling immediately after the p element is seen in the structure at (1).

  1. Ordinary brother selector

The common sibling selector uses “~” to link the two selectors. Two elements in a selector have the same father, but the second element does not have to follow the first.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Ordinary brother selector application</title>

<style type="text/css">

p~h2 {
color: pink;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

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

</body>
</html>
Copy the code


The adjacent sibling selector is applied to (1), (2). The first sibling element immediately after the p element is seen in the structure is located at (1), (2).

4.3.10: Empty selector

:emptyThe selector is used to select all elements that have no child elements or whose text content is empty.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the empty selector</title>

<style type="text/css">

p {
width:150px;
height:30px;
}

:empty {
background-color: # 999;
}  * / / * (1)

</style>
</head>
<body>

<p>The topic chrysanthemum</p>     
<p>[Tang] Huang Chao</p>
<p></p>      <! - (2) -- - >
<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


The code in (1) defines (2) the empty element P with the “:empty selector” and sets the background color of its empty element to gray.

4.3.11: Target selector

:targetA selector is used for a certain part of the pagetargetElement of theidIs used as a hyperlink in a page. Only the user clicks the hyperlink in the page and goes totargetElements,:targetThe style set by the selector is in effect.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the target selector</title>

<style type="text/css">

:target {
background-color: #e5eece;
}

</sty1e>
</head>
<body>

<h1>This is a title,</h1>
<p><a href="#news1">Skip to content 1</a></p>
<p><a href="#news2">Skip to content 2</a></p>
<p>Click the link above, and the: Target selector will highlight the HTML anchor for the currently active work.</p>
<p id="news1"><b>Content 1...</b></p>
<p id="news2"><b>Content 2...</b></p>
<p><b>Note:</b>Internet Explorer 8 and earlier do not support the: Target selector.</p>

</body>
</html>
Copy the code


When jump to Content 1 or Jump to Content 2 is clicked, the linked content will have a background color effect:

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