一、标签选择器

标签选择器其实就是作用于html代码中的标签对象。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">    
    <!--h1标签选择器，作用与body中的h1标签对象-->
    h1{
        font-size: 20px;
        font-weight: normal;
        color: blue;
    }
    </style>
</head>
<body>
    <h1>你好世界，</h1>
    <p>我挥一挥衣袖，不带走一片云彩</p>
</body>

</html>

运行结果：

二、类选择器

类选择器在css样式编码中是最常用到的。

语法：

.类选器名称{css样式代码;}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
    <!--类选择器-->
    .stress{
        color: red;
    }
    </style>
</head>

<body>
    <p>你好世界，
    <!--定义类标签-->
    <span class="stress">看风景的人在楼上看你。</span>
    </p>
</body>

</html>

运行结果：

三、ID选择器

语法：

#类选器名称{css样式代码;}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
    #stress {
        color: red;
    }           
    </style>
</head>

<body>
    <p>你好世界，
　　<!--定义id标签-->
    <span id="stress">你在桥上看风景</span>
    </p>
</body>

</html>

运行结果：

四、类选择器和id选择器

相同点：可以应用于任何元素。

不同点：（1）ID选择器只能在文档中使用一次，而类选择器可以使用多次。

　　　　（2）可以使用类选择器列表方法为一个元素同时设置多个样式，而ID选择器不可以。如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
    <!--类选择器1-->
    .stress {
        color: red;
    }       
    <!--类选择器2-->
    .stress{
        font-size: 30px;
    }
    </style>
</head>

<body>
    <p>你好世界，
    <span class="stress">你在桥上看风景</span>
    </p>
</body>

</html>

运行效果：

五、子选择器

子选择器：即加入大于符号（>），用于选择指定标签元素下的第一代子元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
   <!--子选择器：作用于food的第一代子元素-->
    .food>li {
        /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
        border:1px solid red;

    }
    </style>
</head>

<body>
    <ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
</body>

</html>

运行结果：

六、后代选择器

包含选择器：即加入空格，用于选择指定标签元素下的后辈元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
   <!--后代选择器：作用于指定标签元素的所有子后代元素-->
    .food li {
        /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
        border:1px solid red;

    }
    </style>
</head>

<body>
    <ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
</body>

</html>

运行结果：

七、通用选择器

通用选择器：即加入*，作用于html中所有的标签元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>* 通用选择符</title>
    <style type="text/css">
　　<!--定义通用选择器，作用于html中所有的标签元素-->
    * {
        color: red;
        font-size: 20px;
    }
    </style>
</head>

<body>
    <h1>你好世界</h1>
    <p>阿长阿妈</p>
    <p>山海经</p>
</body>

</html>

运行结果：

八、选择器优先级

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

参考：https://www.w3school.com.cn