This is the 15th day of my participation in Gwen Challenge

The first two days to learn about CSS selector some knowledge points, for the pseudo class selector feeling or half-knowledge, then query online information learning, hereby summarize.

In terms of pseudo-class selectors, they are essentially matching elements in a certain state, that is, rendering the corresponding style in a certain state. For other selectors, see this article “Figuring out CSS Selectors once.”

Link pseudo-classes: scoped link elements

:visited: represents all anchors that, as hyperlinks, point to an already visited address

a:visited {
  color: red;
}
Copy the code

When the mouse clicks on the hyperlink, the A TAB turns red.

:link: indicates all anchors that the hyperlink points to an unvisited address

a:link {
  color: hotpink;
}
Copy the code

The mouse is pink when the hyperlink has not been accessed.

:target: jumps to a fragment, where ID is the fragment identifier of the URI

The target must correspond to the ID. For example, we implement a simple TAB with :target

Simple CSS TAB Demo:

I’m going to write the HTML code, and notice that the a tag href has to correspond to the id of the content div.

<body>
    <a href="#left">TAB to the left</a>
    <a href="#middle">TAB middle</a>
    <a href="#right">TAB right</a>
    <div id="left">The content of the left</div>
    <div id="middle">Content of the middle</div>
    <div id="right">The content of the right</div>
</body>
Copy the code

Then we hide the three divs of the content,

    div {
        width: 275px;
        height: 200px;
        display: none;
    }
Copy the code

Next use :target

    :target {
         display: block;
    }
Copy the code

So when we click on TAB A, notice that the URI, with the ID,

And then the contents of the TAB that you click on will be displayed through display. The effect is as follows:

This is a simple CSS implementation of the TAB, but there is a flaw, is that by default the TAB has no content, we need to click on an option to display. All divs are hidden by default. If we have thought of what good way to solve the words welcome to correct me ~~

Specific code 👇 :

<body>
    <a href="#left">TAB to the left</a>
    <a href="#middle">TAB middle</a>
    <a href="#right">TAB right</a>
    <div id="left">The content of the left</div>
    <div id="middle">Content of the middle</div>
    <div id="right">The content of the right</div>
</body>
Copy the code
<style>
    * {
        margin: 0;
        padding: 50px;
    }
    
    a {
        text-decoration: none;
        color: indigo;
        border: 1px gray solid;
        padding: 10px;
        margin: 10px;
    }
    
    a:link {
        color: black;
    }
    
    a:visited {
        color: gray;
    }
    
    div {
        width: 275px;
        height: 200px;
        background-color: green;
        display: none;
        text-align: center;
        font: 30px/200px Microsoft Yahei;
        margin-top: 30px;
        margin-left: 10px;
    }
    
     :target {
        display: block;
    }
</style>
Copy the code

2. Dynamic pseudo-classes

:hoverMeans to hover over an element

    a:hover {
       color: black;
    }
Copy the code

When the mouse moves over an element, its color changes to black.

:activeRepresents the state when the user clicks

    a:hover {
       color: green;
    }
Copy the code

When the mouse clicks over the element, the color changes to green.

Here also need to pay attention to, because a label: link and: visited can cover all the state, a label so when: link: visited, : hover, : an active role in a label, : link and: visited cannot last. We know that when you have the same selector, the one behind will override the one in front.

In addition, for the sake of privacy, only color,background-color and border-color can be changed. You can try it if you don’t believe it.

3. Form pseudo class:

:enabledMatch editable forms

:disableMatches the disabled form

:checkedMatches the selected form

:focusMatches the focal form

    <span>Editable forms</span>
    <input id="input1" type="text" />
    <br/>
    <span>Disabled forms</span>
    <input id="input2" type="text" disabled/>
    <br/>
    <span>Focused forms</span>
    <input id="input3" type="text" />
    <br/>
    <span>The selected form</span>
    <input id="input4" type="checkbox" />
    <br/>
Copy the code
     #input1:enabled {
        background-color: green;
    }
    
    #input2:disabled {
        background-color: yellow;
    }
    
    #input3:focus {
        background-color: pink;
    }
    
    #input4:checked {
        width: 100px;
        height: 100px;
    }
Copy the code

Demo effect 👇

Sometimes, when the original radio button style doesn’t meet our needs, we can implement custom radio buttons through form pseudo-classes.

– Customize radio buttons demo

    <label>
      <input type="radio" name="abaaba">
      <span></span>
    </label>
    <label>
      <input type="radio" name="abaaba">
      <span></span>
    </label>
    <label>
      <input type="radio" name="abaaba">
      <span></span>
    </label>
Copy the code
   * {
        margin: 0;
        padding: 0;
    }
    
    label {
        float: left;
        position: relative;
        width: 50px;
        height: 50px;
        border: red 2px solid;
        overflow: hidden;
        border-radius: 50%;
    }
    
    label>span {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    
    input {
        position: absolute;
        left: -50px;
        top: -50px;
    }
    
    input:checked+span {
        background-color: firebrick;
    }
Copy the code

The implementation is as follows 👇

4. Structural pseudo-classes

:nth-child(n)

First of all, n starts at 1, n is 1,2,3,4

Take this code for example:

    <div class="container">
        <ul>
            <p>P tags</p>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
Copy the code

You can see that there are a lot of Li in ul, and there is a P tag in front of it. Take a look at our pseudo-class selector

    ul li:nth-child(1) {
        font-size: 60px;
    }
Copy the code

Under the UL tag, select the first element and the element must be Li for the style to take effect. Now the first element in the UL tag is not li, it’s p tag. So this code doesn’t work.

If we replace it with Li :nth-child(2), the second element under ul must be Li for this to work, and you can see that it does.

:nth-of-type(n)

:nth-of-type(n) finds the child under the parent element and selects the first child of that element.

And again, if we follow that code,

    ul li:nth-of-type(1) {
        font-size: 60px;
    }
Copy the code

So now this style can override the P tag and be valid.

:first-child

Represents the first child element selected.

    ul :first-child {
        font-size: 60px;
    }
Copy the code

:last-child

Represents the last element selected.

    ul :last-child {
        font-size: 60px;
    }
Copy the code

So that’s it for pseudo-class selectors. If you have any questions, please feel free to criticize them.