CSS的选择器-526互联

CSS的选择器分为全局选择器、元素选择器、类选择器、ID选择器和合并选择器

1.全局选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            color: green;
        }      
        *{
            font-size: 30px;
            color: blue;
        }
                         
    </style>                <!--全局选择器，页面中所有标签都会改变-->
    
                            <!--h3的样式会进行改变，因为全局选择器优先级低-->
</head>
<body>
    <h3>段落</h3>
    <p>你好</p>
    <ul>
        <li>111</li>
        <li>222</li>
    </ul>
</body>
</html>

全局选择器与任何元素匹配，一般进行初始化，全局选择器基本框架为*{}，，优先级最低，如上元素选择器将全局选择器的初始化覆盖了过去

2.元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: blueviolet;
        }
        span{
            color: coral;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>第一个</p>
    <p>第二个</p>
    <p>我听过<span>TFBOYS</span>的歌</p>
</body>
</html>

元素选择器是根据元素名称来进行选择，它描述的是“共性”而不是“个性”，所有的选择器标签都会发生改变，所有标签都可以是选择器，选择所有，而不是一个；其基本框架为选择器名{}

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .Frist{
            color: blueviolet;
        }
        p{
            color: brown;
        }
        .size{
            font-size: 50px;
        }
    </style>                    <!--可以改变自己所需要的标签样式 用.定义-->
</head>
<body>
    <p class="Frist">111</p>
    <p>222</p>
    <p class="Frist">333</p>        <!--标签名字可一致，样式都会一起发生改变-->
    <h3 class="Frist size">66</h3>           <!--可被多个选择器选用，不区分标签 可以有多个类选择器，在class 中用空格隔开，不能有多个claas-->
</body>
</html>

类选择器是将标签进行了重命名,在标签中用class来进行命名，注意：不能以数字开头，可以有多个类名，但只能有一个class，其基本框架为.+类名{}，其更加灵活，方便，标签之间名字可相同。

4.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #xxx{
            color: yellowgreen;
        }
        .xxxx{
            color: violet;
        }
    </style>
</head>
<body>
    <p id="xxx">666</p>
    <p id="xxx">77</p>      <!--可以改变样式，但不符合规范 不能使用 id名称不能重复 不能用数字头-->
    <p class="xxxx">777</p>
    <h3 class="xxxx">9999</h3>
</body>
</html>

ID选择器是在标签中用id来进行命名，其基本框架为#+类名{}。id选择器类名不可重复。

5.合并选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,h3{
            color: blue;
            font-size: 35px;
        }
        .xxx,#xx{
            color: tomato;
        }
    </style>                <!--可以同时改变多个标签样式，选择器用，隔开-->
</head>
<body>
    <p>111</p>
    <h3>666</h3>
    <p class="xxx">222</p>
    <h3 id="xx">33</h3>
</body>
</html>

合并选择器可有效减少代码的重复，其基本框架为选择器1+选择器2{}

选择器的优先级为:行内样式>id>class>元素