Graphical CSS selector

In the introduction to CSS section, we learned that the syntax of CSS is as follows:

Selector {attribute 1: attribute value; Attribute 2: Attribute value}Copy the code

So what kind of selectors are available?

Context selector: Selects an element based on an ancestor or sibling element
ID and class selectors: Select elements based on the values of the ID and class attributes
Attribute selectors: Select elements based on the presence or absence of attributes and characteristics

Context selector

Based on the ancestors

grammar

Ancestor tag child tag {declaration}Copy the code

Ancestral tags... Parent label Child label {declaration}Copy the code

The ancestor tag can be the parent tag of the child tag or any parent tag of the child tag. Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        article h3 { color: red; }
        article section p {color: blue; }</style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>passages</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
Copy the code

Child selector >

Grammar:

Parent tag > Child tagCopy the code

In this case, the parent tag must wrap the child tag, that is, the parent element of the child tag can only be the parent tag. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        article>h3 { color: red; }
        article>section>p {color: blue; }</style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>passages</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

Copy the code

This example simply adds a child selector to the example based on the parent label selector, and the h3 in cross-level selected headers does not work.

Next to sibling selector +

Grammar:

The label1+ label2
Copy the code

Tag 2 must follow its sibling tag 1. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        header+section { color: red; }  /* works */
        header+footer {color: blue; }/* does not work */
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>passages</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>
Copy the code

General sibling selector ~

Grammar:

The label1To label2
Copy the code

Tag 2 must follow (not necessarily follow) its sibling tag 1. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        header~section { color: red; }  /* works */
        header~footer {color: blue; }/* works */
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>passages</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>
Copy the code

The universal selector *

* is a wildcard that matches any element example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        * { color: red; }
        footer * {color: blue; }/* Override the above style */
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>passages</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>
Copy the code

ID and class selector

Ids and classes provide another way to select elements, regardless of the hierarchy of the document. Once you add the ID and class attributes to the element in the HTML tag, you can use the ID and class name in the CSS selector to directly select a specific area of the document.

Pay attention to

Id and CLSS cannot start with a number or special character. Ids are unique in that an HTML document cannot have the same named ID.

The class attribute

General grammar:

.class name {declaration}Copy the code

Tag with class selector, syntax:

Class name {declaration}Copy the code

Multi-class selectors, syntax:

The name of the class1The name of the class2} {statementCopy the code

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .header{color: red; }Routine / * * /
        div.footer{ color: blue; }/* Tag with class selector */
        .body.content{color:darkred}  /* Multi-class selector */
    </style>
</head>
<body>
    <div class="article">
        <div class="header">The text in the head</div>
        <div class="body content">The text content</div>
        <div class="footer">Text tail</div>
    </div>
</body>
</html>
Copy the code

The id attribute

Id is similar to class in that the ID selector is selected with a “#”. General grammar:

#id} {statementCopy the code

Tag with ID selector, syntax:

The label#id} {statementCopy the code

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #header{color: red; }Routine / * * /
        div#body{ color: blue; }/* Tag with class selector */
    </style>
</head>
<body>
    <div id="article">
        <div id="header">The text in the head</div>
        <div id="body">The text content</div>
        <div id="footer">Text tail</div>
    </div>
</body>
</html>
Copy the code

As you can see from the above example, class and ID still have a lot in common, so how to choose?

Id or class?

Personal opinion: Use context selectors if you can. If you use class for styling, use ID for manipulating data with JavaScript.

Property selector

Grammar:

Tag name[Attribute name]
Copy the code

Tag name [Attribute name =" attribute value "]Copy the code

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div[title] {color: red; }div[title="footer"] {color: blue; }/* Override the above style */
    </style>
</head>
<body>
    <div title="header">header</div>
    <div title="body">body</div>
    <div title="footer">footer</div>
</body>
</html>
Copy the code

pseudo-classes

Pseudo-classes are so called because they resemble classes, but no class actually attaches to the tag inside the tag. There are two types of pseudo-classes, UI pseudo-classes and structured pseudo-classes.

UI (User Interfact) pseudo-classes apply CSS styles to HTML elements when they are in a certain state (such as a mouse pointer over a link)
Structured pseudo-classes apply CSS styles to elements when there is some kind of structural relationship in the tag (such as an element being the first or last in a set of elements)

The UI pseudo-classes

UI pseudo-classes apply styles based on the state of a particular HTML element. The most commonly used element for UI pseudo-classes is the link (the A element), which can change the color of text when the user hovers over it, or ununderline text, and so on. A colon (:) indicates a pseudo-class, and two colons (::) indicate elements added to CSS3.

Link pseudo class

There are four link pseudo-classes:

Link: Waiting to be clicked
Visited: Users have clicked on this link before
Hover: Hover on a link
Active: Link being clicked (mouse down on element, not released)

Pay attention to

The order of these 4 pseudo-classes is Link, visited, Hover and active. If you don’t use them in this order, the browser may not display the expected results

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        a{ text-decoration: underline; }
        a:link { color: rgb(20.112.8); }
        a:visited { color: black; }
        a:hover { color: red; }
        a:active { color: cyan; }</style>
</head>
<body>
    <a href="http://www.iotzzh.com" target="_blank">http://www.iotzzh.com</a>
</body>
</html>
Copy the code

It seems that Link’s style has not been applied. It will be applied when Visited is removed. It can be seen that these four pseudo-classes do not always appear together.

Focus pseudo class and Target pseudo class

Focus pseudo-class: Style when getting focus

Syntax for any tag: focus{declaration}Copy the code

Target pseudo-class: If the user clicks on a link that specifies another element on the page, that element is the target, which can be selected with the target pseudo-class.

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>

    <style>
        input:focus { outline: 1px solid red; border: 1pxsolid red; }#first-paragraph:target { color: red; }#second-paragraph:target { text-decoration: underline; }</style>
</head>
<body>
    <input type="text"><br>

    <a href="#first-paragraph">Paragraph 1</a>
    <a href="#second-paragraph">Second paragraph</a>

    <div id="first-paragraph">This is the first paragraph</div>
    <div id="second-paragraph">This is the second paragraph</div>
</body>
</html>
Copy the code

Structured pseudo-class

Structured pseudo-classes can apply styles based on the structure of the tag, such as what siblings of an element’s parent or predecessor are.

: first-child and: last:child

:first-child represents the first element in a set of sibling elements, while :last-child represents the last.

Pay attention to

Pseudo-classes such as: last-Child or :first-child should not have siblings before or after them, so the solution is to wrap the tag around a div.

Child (n: NTH – or odd/even)

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box { width: 100px; height: 100px; display: inline-block; }
        .box:first-child { background-color: red; }.box:last-child { background-color: blue; }

        table tr:nth-child(odd) {background-color: darkgoldenrod; }
        table tr:nth-child(even) {background-color:darkmagenta; }
        table tr:nth-child(1) { background-color: red; color: white; }
    </style>
</head>
<body>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <table>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
    </table>
</body>
</html>
Copy the code

Pseudo elements

A pseudo-element is an element that is not present in the document if any. Here are a few common pseudo-elements:

: : first – letter pseudo elements

Paragraph opening character

: : first – line pseudo elements

The first line of a text paragraph (usually a paragraph)

::before and ::after pseudo-elements

Can be used to add special content before or after a specific element

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .first-letter::first-letter{font-size: large; color: red; }.content::first-line {font-style: italic; color: rgba(100.0.25.0.5); }.before::before { content: 'add before:; color: sandybrown; }.after::after {content: ': add after'; color: skyblue; }</style>
</head>
<body>
    <div class="first-letter">Test the pseudo-element ::first-letter</div>
    <div class="content">
        <p>Test pseudo element ::first-line first paragraph</p>
        <p>Test false element ::first-line second paragraph</p>
        <p>Test false element ::first-line third paragraph</p>
    </div>

    <div class="before">Test before</div>
    <div class="after">The test after</div>

</body>
</html>
Copy the code

If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com

Context selector

Based on the ancestors

Child selector >

Next to sibling selector +

General sibling selector ~

The universal selector *

ID and class selector

Pay attention to

The class attribute

The id attribute

Id or class?

Property selector

pseudo-classes

The UI pseudo-classes

Link pseudo class

Pay attention to

Focus pseudo class and Target pseudo class

Structured pseudo-class

: first-child and: last:child

Pay attention to

Child (n: NTH – or odd/even)

Pseudo elements

: : first – letter pseudo elements

: : first – line pseudo elements

::before and ::after pseudo-elements

Related Posts

Data Large Screen (5) : SVG component development in data large screen project

Some of the experimental apis of Vue3.0 will be deprecated and script-setup will be officially added

About Mobile Framework (Vant)