css common selector 9

1. class selector (selection by class name)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .p1{
        color: #00ff00;
    }
    .p2{
        color: #0000ff;
    }
</style>
<body>
    <p class="p1">这是类选择器</p>
    <p class="p2">hello world</p>
</body>
</html>

Renderings:

2.id selector (selection by id)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #text{
        color: red;
    }
</style>
<body>
    <p id="text">这是id选择器</p>
</body>
</html>

Renderings:

3. tag selector (selection by id)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p{
        color: #f40;
        font-size: 25px;
    }
</style>
<body>
    <div>
        <p>这是标签选择器</p>
    </div>
</body>
</html>

Renderings:

4. packet selector (select multiple tags can be set to the same style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p,a,li{
        color: blue;
    }
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

Renderings:

5. descendant selector (select a tab to set all descendants of the same style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div ul li{
        color: red;
        list-style: none;
    }
</style>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

Renderings:

6. attribute selector (through the attribute (e.g., name attribute) is selected to set the same style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    [name="pra1"]{
        color: blue;
    }
    [name="pra2"]{
        color: red;
    }
</style>
<body>
    <p name="pra1">>P</This is the attribute selector
    <p name="pra2">hello world</p>
</body>
</html>

Renderings:

7. universal selector (Select all tags to set the same style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        color: red;
    }
</style>
<body>
    <p>这是通用选择器</p>
    <p>hello</p>
    <p>world</p>
</body>
</html>

Renderings:

8. sibling selector (selecting sibling relationship between label set style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p+a{
        color: green;
    }
</style>
<body>
        <p>这是兄弟选择器</p>
        <a>hello world</a>
</body>
</html>

Renderings:

9. Direct Sons selector (selection of parent-child relationships neutron tag label set style)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div>p {
        color: red;
    }
</style>
<body>
    <div>
        <p>这是直接父子选择器</p>
    </div>
</body>
</html>

Renderings:

css common selector 9

Guess you like