css选择器

都怪这月色~

已于 2023-05-29 11:43:03 修改

阅读量29

点赞数

分类专栏：前端文章标签： css 前端 html

于 2023-05-14 19:43:48 首次发布

本文链接：https://blog.csdn.net/xclwade/article/details/130672419

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

选择器就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

1.选择器的分类

选择器分为基础选择器和复合选择器两大类。

基础选择器是由单个选择器组成的
基础选择器又包含：标签选择器、类选择器、id选择器和通配符选择器

1.1 标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式
语法：

标签名{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
}

作用：
标签选择器可以把某一类标签全部选择出来，比如

标签和所有的标签
例子：

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <style>
        p {
            color: green;
        }

        div {
            color: pink;
        }
    </style>
</head>
<body>
<P>男生</P>
<P>男生</P>
<P>男生</P>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>

在这里插入图片描述

1.2 类选择器

如果想差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法：

.类名{
	属性1:属性值1;
	...
}

例子：

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <style>
        .red {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li>来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
    </ul>
</body>
</html>

在这里插入图片描述
多类名

各个类名中间用空格隔开
就是给某个标签添加多个类，或者这个标签有多个名字
直接上例子：

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .red {
            color: red;
            background-color: red;
        }
        .green {
            color: green;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>