CSS基础选择器

最新推荐文章于 2025-03-18 00:30:00 发布

陈开心i

最新推荐文章于 2025-03-18 00:30:00 发布

阅读量225

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/CCT912097957/article/details/105272825

版权

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
类选择器最大的优势是可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签。
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

多类名选择器

给标签指定多个类名，从而达到更多的选择目的。

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名选择器</title>
    <style>
        .font {
            font-size: 50px;
        }

        .red {
            color: red;
        }

        .bl {
            color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 多类名选择器可以选择多个样式 意思为：即使用也使用 用法是在前一个选择样式后面加空格再选择样式，使用哪个就调用谁 -->
    <div class="font red">我是多类名选择器</div>
    <div class="font">我是多类名选择器</div>
    <div class="font">我是多类名选择器</div>
    <div>我是多类名选择器</div>
    <div class="bl">我是多类名选择器</div>
</body>
</html>

id选择器

id选择器使用“#”进行标识，后面紧跟id名。
元素的id值是唯一的，如同人的身份证号码。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器和通配符</title>
    <style>
            /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
            color: cornflowerblue;
        }
        /* id选择器只能使用一次 用#写样式,id调用，与多类名区别在于使用次数 */
        #one {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <!-- 通配符选择器作用与整个文档，id选择器只能用一个，两者使用较少 -->
    <div id="one">我是id选择器</div>
    <span>我是通配符选择器定义的字体颜色</span>
</body>
</html>