Example code of setting label style using CSS selector

CSS Selectors

Setting style on the html tag can set attributes for the tag:

<div style="background-color: #2459a2;height: 48px;">Ahhh</div>

We can also set the selector in the <head> tag, so that each style only needs to be written once

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--Write the selector here-->
    </style>
</head>

There are many specific selectors:

1. Copy style by id

#i1{
    background-color: #2459a2;
    height: 48px;
}

The tags in the body are used like this: But you can't write multiple ids, so you still can't use them multiple times.

    <div id="i1"></div>
    <div id="i1"></div>But you cannot write multiple ids (not standard)

2. Copy by class:

/*class selector: Use class=c1 to copy this style, while avoiding the defect that the id must be unified*/
.c1{
    background-color: #2459a2;
    height: 60px;
}

When using:

 <div class="c1">1251251</div> can be written in multiples <div class="c1">1251253</div> can be written in multiples

3. Tag selector: Change a certain tag to this style:

Tag selector: Change all div tags to black background and white text

div{
    background-color: black;
    color: white;
}

4. Level selector: space in the middle

Hierarchical selector: Change the div tag in the span tag to this style

  span div{
            background-color: black;
            color: white;
        }
        Layer: Set the div in c1 and c2 to this style. c1 .c2 div{
            background-color: black;
            color: white;
        }

5. Combined selector: comma in the middle

    <style>
        Combination selector: # or . can realize the combination #i1, #i2, #i3{
            background-color: black;
            color: white;
        }
        .c5,.c6,.c7{
            background-color: black;
            color: white;
        }
    </style>

6. Attribute selector:

    <style>        
        /*Attribute selector: set type='text' to this style*/
        input[type='text']{
            width: 100px;
            height: 200px;
        }
        Set the custom n value s1 label to this style input[n='s1']{
            width: 100px;
            height: 200px;
        }
    </style>

Summarize

The above is the example code of the CSS selector setting label style introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Do you know how to use the flash wmode attribute in web pages?

>>: MySQL implements string concatenation, interception, replacement, and position search operations