This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the seventeenth article in the “Learn front End from Scratch” series, “Use of CSS Basic Selectors”.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

This article will look at selectors in CSS. What can you learn from this article? The diagram below:

This article is about 10,000 words, and it will take about half an hour to read.

Overview of CSS selectors

What is a selector

CSS selectors are used to locate one or more elements of an HTML page according to CSS rules. When the browser parses the HTML page, it will locate the elements of the HTML page according to the selectors in the CSS rules and set the styles for the corresponding elements.

CSS selectors are the backbone of CSS, acting like the backbone of the human spine, interacting with THML structure, browser behavior, and user behavior, which makes CSS selectors a very important part of CSS.

The “selector” here refers to the label, class name, and so on in front of the CSS declaration block. The following code looks like this:

div {
  color: lightcoral;
    font-size: 24px;
}
Copy the code

The div here is a selector.

Classification of selectors

The evolution of CSS from the first version to the third version has resulted in an increasingly complex variety of CSS selectors. Currently, CSS selectors are classified as follows:

  • Basic selectors: There are five basic selectors, which are the most basic use of CSS selectors.

  • Hierarchical selectors: There are four hierarchical selectors that locate HTML elements based on their relationships.

  • Combinatorial selectors: can be used in both intersection and union, combining the previous basic selectors and hierarchical selectors.

  • Pseudo-class selector: Allows state information not included in HTML pages to select bits of HTML elements.

  • Pseudo-element selector: Locates all entities that are not included in HTML.

The priority level of the selector

The priority of CSS selectors is strictly defined and can be divided into six levels from 0 to 5. The first four levels are determined by the CSS selectors, and the last two levels are determined by the form and feature syntax we write. The details are as follows

  • Level 0: Wildcard selectors have a priority of 0 (wildcard selectors are written with asterisk *). The code looks like this:

    * {
    color: # 000; 
}
Copy the code

  • Level 1: The type (element) selector has a priority of 1

  • Level 2: Class and attribute selectors have a priority of 10

  • Level 3: The priority of the ID selector is 100

  • Level 4: Inline style has a priority of 1000

  • Level 5:! Important special rule

    ! Important indicates that the selector has a special priority and has the highest priority. It is worth noting that use! Important breaks the old selector type weighting rules

Basic selector

CSS basic selectors are the most basic use of all types of selectors. There are five specific uses of basic selectors, as follows:

  • Type selector/element selector

  • Class selectors

  • The ID selector

  • Universal selector/wildcard selector

  • Property selector

Type selector

Type selectors, also known as element selectors, are basic selectors that locate specific HTML elements based on the element names of HTML pages. If used alone, the type selector locates all elements of that element name in the current HTML page.

The syntax structure is as follows:

Element name {attribute: attribute value; }Copy the code

Note that the element names of type selectors are case insensitive.

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Type selector</title>
    <style>
        /* Select the element labeled h1 and set the font color to red */
        h1 {
            color: lightcoral;
        }
    </style>
</head>

<body>
    <h1>Primary title</h1>
    <h2>The secondary title</h2>
</body>

</html>
Copy the code

The code running result is as follows:

The type selector is one of the simplest and is used directly by the element name.

Class selectors

A class selector locates a specific HTML element by the value of its class attribute. The use of this basic selector is in the. Class name form.

The syntax structure is as follows:

. Class name {attribute: attribute value; }Copy the code

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Class selectors</title>
    <style>
        /* Sets all elements with the title class name */
        .title {
            color: lightsalmon;
        }
    </style>
</head>

<body>
    <! Add a title class name to the h1 h2 h3 element.
    <h1 class="title">Primary title</h1>
    <h2 class="title">The secondary title</h2>
    <h3 class="title">The secondary title</h3>
</body>

</html>
Copy the code

The code running result is as follows:

The following diagram shows the analysis structure of the class selector:

You can add more than one class name to an element in HTML, as shown in the following example:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title> </title>. lightsalmon; } /* Select a class name */.h3 {color: lawngreen; } < / style > < / head > < body > < h1 class = "title" > primary title < / h1 > < h2 class = "title" > secondary title < / h2 > <! <h3 class="title h3"> </h3> </body> </ HTML >Copy the code

The code running result is as follows:

The reason the font of the

element is different is because the lower the priority, the higher the priority.

The ID selector

ID selectors are similar to class selectors in that they match HTML elements based on an attribute. Class selectors match class selectors, while ID selectors match ID attributes. It is worth noting that the ID attribute is unique and non-repeatable throughout the page.

The syntax is as follows:

#ID {attribute: attribute value; }Copy the code

The usage is similar to that of class selectors, which will not be described here. Just note that the ID attribute is unique and not repeatable.

Universal selector

The universal selector, also known as the wildcard selector, is an asterisk (*). This selector is a special tag selector that can refer to all types of tag elements, including custom elements, as well as

The syntax structure is as follows:

* {attribute: attribute value; }Copy the code

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Wildcard selector</title>
    <style>
        * {
            color: lightskyblue;
        }

        /* Since the wildcard selector has the lowest priority, */ can be overridden at will
        p {
            color: # 333;
        }
    </style>
</head>

<body>
    <h1>Primary title</h1>
    <h2>The secondary title</h2>
    <p>Paragraph text</p>
</body>

</html>
Copy the code

The code running result is as follows:

Property selector

Attribute selectors locate specific HTML elements based on existing attribute names or attribute values. In official documents, class selectors and ID selectors are attribute selectors, because essentially class selectors are attribute values of class in HTML elements, and ID selectors are attribute values of ID in HTML elements.

There are two other types of property selectors in CSS, as shown below

  • Property values directly match the selector

  • Property value re – matches selector

We’ll discuss these two types of property selectors separately

Property values directly match the selector

There are also four types of attribute value direct match selectors, as follows:

  • [attr] : indicates that the attribute name matches

  • [attr= “value”] : indicates key-value pair matching

  • [attr~=”value”] : indicates the attribute value word full match selector. It is used to match the words in the attribute, where ~= is used to connect the attribute to the attribute value.

  • [attr | = “value”] : attribute values starting segment exactly match selector, said attr attribute of the element, its value is the value, or begin with the value plus dash -, | = used to connect to need to match attributes and attribute of the content.

[attr] Property selector

The [attr] attribute selector is the simplest use of many attribute selectors, where attr represents the attribute name of an HTML element. The [attR] attribute selector locates one or more HTML elements by their attR attribute name, regardless of the value of the attribute.

The syntax structure is as follows:

[attr]{attribute: Attribute value; }Copy the code

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Property selector</title>
    <style>
        /* Select all id attributes */
        [id] {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <h1 id="title1">Early white</h1>
    <h1 id="title2">East early</h1>
    <h1 id="title3">TuShan susu</h1>
    <h1 id="title4">TuShanHong red</h1>
    <h1 id="title5">TuShan ya ya</h1>
    <h1 id="title6">Kingship riches and honour</h1>
</body>

</html>
Copy the code

The code running result is as follows:

[attr=value] Property selector

The [attr=value] attribute selector locates one or more HTML elements by their attr attribute name and attribute value being value.

The syntax structure is as follows:

[attr=value]{attribute: Attribute value; }Copy the code

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Property selector</title>
    <style>
        /* Select the element whose ID attribute is title1 */
        [id=title1] {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <h1 id="title1">Early white</h1>
    <h1 id="title2">East early</h1>
    <h1 id="title3">TuShan susu</h1>
    <h1 id="title4">TuShanHong red</h1>
    <h1 id="title5">TuShan ya ya</h1>
    <h1 id="title6">Kingship riches and honour</h1>
</body>

</html>
Copy the code

The code running result is as follows:

[attr~=value] Property selector

The [attr~=value] attribute selector locates one or more HTML elements by the attr attribute name of the HTML element, the attribute value is a space-separated list, and the value value is one of the values in the list.

[attr | = value] attribute selectors

[attr | = value] attribute selectors through HTML element attr attribute name and attribute value as the value or the value – as the prefix to locate one or more of the HTML element.

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Property selector</title>
    <style>
        /* Matches all elements with name4 in the ID attribute */
        [class~=name4] {
            color: cornflowerblue;
        }

        / * [class | = "name"] will choose a class attribute to attribute values for the name or the name "attribute" of the beginning * /
        [class |="name"] {
            color: lawngreen;
        }
    </style>
</head>

<body>
    <h1 id="title1" class="name-1 title ">Early white</h1>
    <h1 id="title2" class="name2 title ">East early</h1>
    <h1 id="title3" class="name-3 title ">TuShan susu</h1>
    <h1 id="title4" class="name4 title ">TuShanHong red</h1>
    <h1 id="title5" class="name-5 title ">TuShan ya ya</h1>
    <h1 id="title6" class="name">Kingship riches and honour</h1>
</body>

</html>
Copy the code

The code running result is as follows:

Property value re – matches selector

Attribute value regular match selectors can also be divided into three types, as follows:

  • [attr^=val] Attribute selector: Locates a specific HTML element by its attr attribute name and its value starts with value.

  • [attr$=val] Attribute selector: Locates a specific HTML element by its attr attribute name and its value is ** ending with ** **value **.

  • [attr*=val] Attribute selector: Locates a specific HTML element by its attr attribute name and its value contains value.

The syntax structure is as follows:

[attr^=value]{attribute: Attribute value; }[attr$=value]{attribute: Attribute value; }[attr*=value]{attribute: Attribute value; }Copy the code

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Property selector</title>
    <style>
        /* Match elements starting with name and set the font color to blue */
        [class ^=name] {
            color: blue;
        }

        /* Match elements ending in human and set the font size to 2.6rem */
        [class $=human] {
            font-size: 2.6 rem;
        }

        /* Match the element containing em and set the font color to red */
        [class *=em] {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="name human">Early white</h1>
    <h1 class="name human">East early</h1>
    <h1 class="name demon">TuShan susu</h1>
    <h1 class="name demon">TuShanHong red</h1>
    <h1 class="name demon">TuShan ya ya</h1>
    <h1 class="name human">Kingship riches and honour</h1>
</body>

</html>
Copy the code

The code running result is as follows:

Hierarchy selector

CSS hierarchical selectors are selectors based on the relationships between HTML node trees, so if you want to learn hierarchical selectors first to understand what the relationships between HMTL elements look like. Take a look at the following HTML code:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>HTML test code</title>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <span></span>
        <button></button>
        <span></span>
    </div>
</body>

</html>
Copy the code

The above code can be drawn as the following node tree, as shown in the figure below

Now let’s look at the relationships between HTML elements. There are three relationships between elements in an HTML page as follows:

  • The relationship between parent and child: in the code above, the left

    element is the parent of the

    element and the other way around,

    is the child of the

  • Sibling relationships: In the code above, the

    and

    elements are siblings, as are the and

  • Relationship between ancestor and descendant: In the code above, the

    element is a descendant of the element, and vice versa.

Level selector type

Based on the three relationships between HTML elements, CSS hierarchy selectors provide the following four uses:

  • Descendant selector: Treats an element as an ancestor and locates all the descendants of that element.

  • Child selector: Treats an element as a parent element and locates all the child elements of that element.

  • Neighbor sibling selector: takes an element as a target element and locates the next specified element that has the same parent element as the target element

  • Normal sibling selector: takes an element as the target element and locates any specified element that has the same parent element as the target element.

selector

The four selectors provided by the CSS correspond to the four uses of the CSS level multiple choice questions, as shown in the following table

  • Space for descendant relationship ()

  • Angle brackets to indicate parent-child relationships (>)

  • The plus sign (+) for adjacent siblings

  • A tilde (~) indicating brotherhood

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Hierarchy selector</title>
    <style>
        /* The descendant font size under body is 28px */
        body .child {
            font-size: 28px;
        }

        /* The body sub-div font size is 34px */
        body>div {
            font-size: 34px;
        }

        /* Sets the font color of the sibling element of.child to red */
        .child1~.child {
            color: red;
        }

        /* Set. Child's ring brother to be bold */
        .child1+.child {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <! -- In the current structure, We have the body element as an ancestor. The body and.parent are the parent. The parent and.child are the parent .child1 and.child3 are ordinary siblings -->
    <div class="parent">The parent element<div class="child child1">Children 1</div>
        <div class="child child2">Children 2</div>
        <div class="child child3">Children 3</div>
    </div>
</body>

</html>
Copy the code

The code running result is as follows:

Combinatorial selector

Combinatorial selector is a kind of usage that combines the CSS selector method learned before, and can be divided into the following two kinds from the result of locating HTML elements:

  • Combinatorial (union) selector

  • Composition (intersection) selector

Combinatorial (union) selector

Combinatorial (union) selectors are the same CSS declarations of different selectors combined together for a more concise style sheet. For example, if you wanted to set the same background color for

through

title elements, you could use the following example code:
h1 { color:blue; }
h2 { color:blue; }
h3 { color:blue; }
h4 { color:blue; }
h5 { color:blue; }
h6 { color:blue; }
Copy the code

You can see that the CSS above uses a type selector, but the element names are different, and the CSS declarations are exactly the same. Then, the above sample code can be overwritten with a combinatorial (union) selector as follows:

h1.h2.h3.h4.h5.h6 { color:blue; }
Copy the code

The above two examples work the same way. The second example shows the use of the combinatorial (union) selector.

Combinatorial (union) selectors use commas (,) to separate different selectors and define the same CSS declaration for these different selectors. The syntax structure of a combinatorial (union) selector is as follows:

The selector1The selector2. . {attribute: Attribute value; }Copy the code

Composition (intersection) selector

A combinatorial (intersection) selector locates the SET of HTML elements through the first selector, and filters the set of HTML elements from the above through the second selector, and so on until the last selector completes.

For example, if we wanted to style all

elements with class values of CLS, the code would look like this:

p.cls {
  color: blueviolet;
}
Copy the code

The use of the composition (intersection) selector is shown in the example above.

Combinatorial (intersection) selectors do not need any delimiters between multiple selectors, just write multiple selectors in sequence. The syntactic structure of a composition (intersection) selector is as follows:

The selector1The selector2. . {attribute: Attribute value; }Copy the code

It is worth noting that multiple selectors in a composite (intersection) selector are executed in the order in which they were written.

Pseudo element selector

CSS pseudo-element selectors add keywords to the specified CSS selectors. A style used to describe a particular part of a specified element.

The syntax structure is as follows:

/* CSS3 syntax */Selector :: pseudo-element {attribute: attribute value; }/* CSS2 obsolete syntax (only used to support IE8) */Selector: pseudo-element {attribute: attribute value; }Copy the code

Unless you are compatible with IE8, the two-colon method should be used now.

::before and ::after pseudo-elements

The ::before element is used as the first child of the positioned HTML element, and the ::after ** pseudo-element ** is used as the last child of the positioned HTML element.

The following example code shows the use of the ::before and ::after pseudo-elements:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>::before and ::after pseudo-elements</title>
    <style>
        p::before {
            content: "Has";
        }

        p::after {
            content: "Has";
        }
    </style>
</head>

<body>
    <p>This is a test</p>
</body>

</html>
Copy the code

The code running result is as follows:

As shown in the sample code above, the ::before and ::after pseudo-elements typically add decorative content to the element in conjunction with the Content attribute.

The content attribute is used to insert content in the ::before and ::after pseudo-elements of the element. This property has the following values:

  • None: No pseudo-class elements are generated.

  • Normal :: :before and ::after pseudo-elements are treated as None.

  • Text: indicates the text content.

  • Url: The format is URL () and specifies an external resource (such as an image). If the resource or image cannot be displayed, it is ignored or placeholder is displayed.

::first-letter and ::first-line pseudo-elements

The ::first-letter and ::first-line pseudo-elements match the style content of the first word and first line of the text, respectively. Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>::first-letter and ::first-line pseudo-elements</title>
    <style>
        /* matches the first line */
        p::first-line {
            background-color: lightcoral;
        }

        /* Matches the first word */
        p::first-letter {
            font-size: 130%;
        }
    </style>
</head>

<body>
    <p>If I love you, I will never flaunt myself on your high branches like trumpet creeper;</p>
</body>

</html>
Copy the code

The code running result is as follows:

Note that ::first-letter and ::first-line pseudo-elements are limited in the CSS properties they can use. Check out ::first-letter and ::first-line

: : selection pseudo elements

The :: Selection pseudo-element matches the highlighting effect of text selected by the user on an HTML page (such as using a mouse or other selection device). The following example code shows the use of :: Selection pseudo-elements:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>::first-letter and ::first-line pseudo-elements</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>
</head>

<body>
    <p>If I love you, I will never flaunt myself on your high branches like trumpet creeper;</p>
</body>

</html>
Copy the code

The code running result is as follows:

Pseudo class selector

A pseudo-class selector is a use that allows you to locate HTML elements by state information that is not included in the HTML element. The specific use of pseudo-class selectors is to add keywords to existing selectors to represent the state of the HTML element being located.

For example, the Hover pseudo-class selector can be used to change the color of a button when the user hovers over it. Here is the example code:

/* All user Pointers hover over buttons */  
 button:hover {  
  color: blue;  
 }
Copy the code

The syntax structure of a pseudo-class selector is as follows:

Selector: pseudo-class {property: property value; }Copy the code

The syntax of the pseudo-class selector is: pseudo-class, but don’t forget:.

Classification of pseudo-class selectors

The number of pseudo-class selectors provided by the CSS version 1 to version 3 has grown considerably. In particular, CSS3 has added a large number of pseudo-class selectors.

There are so many pseudo-class selectors. In order to better sort out pseudo-class selectors, we can divide them into the following five types according to different uses:

  • User behavior pseudo class: refers to some pseudo classes related to user behavior, such as Hover: Active, and get focus: Focus, etc.

  • URL locator pseudo-classes: Used to locate elements in AN HTML page

  • Input pseudo classes: Pseudo classes associated with form controls

  • Tree structure pseudo-class: mainly used to locate the target element

  • Logical composition pseudo-classes: Used for logical operations, such as not(), to indicate that it is not an element.

Due to the large amount of data in CSS pseudo-class selectors, we will explain how to use them in the future.

conclusion

Preview: In the next article we’ll learn about colors and their concepts in CSS