前端 CSS的选择器基本选择器

基本选择器包括：

标签选择器
类选择器
ID选择器
通用选择器

标签选择器

就是通过标签名来选择元素：

选中p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        /* 标签选择器 */
        p{
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
    </div>
</body>
</html>

将所有的p标签设置字体颜色为红色

标签选择器可以选中所有的标签元素，例如div,ul,li,p等，不管标签藏的多深，都可以选中，选中的是所有,而不是某一个

ID选择器

id是在每个标签应用是唯一的

同一个页面id不能重复

id命名规范要以字母开头可以有数字、下划线、-

大小写严格区分 aa和AA

通过元素的ID值选择元素：

用#选中id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        #s1{
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <span id="s1">123</span>
    </div>
</body>
</html>

将id值为s1的元素字体颜色设置为红色。

CSS使用的id 他的大小写字母是严格区分的，id是唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        #s1{
            color: red;
        }
        
        #s2{
            font-size:30px;
        }

    </style>
</head>
<body>
    <div>
        <span id="s1">123</span>
        <span id="s2">helo</span>
    </div>
</body>
</html>

类选择器

通用选择器

使用*选择所有元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>第一个段落</p>
        <span>span</span>
    </div>
    <div>
        <a>a标签</a>
    </div>

</body>
</html>