CSS-选择器

最新推荐文章于 2024-09-11 10:49:17 发布

须三诗

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量210

点赞数 2

文章标签： css css3

本文链接：https://blog.csdn.net/qq_43138577/article/details/119718221

版权

选择器的概念

css可以用来控制html的显示样式，在css中，用来限定样式范围的字符串，叫做选择器。

这些选择器，会参照DOM树，从根节点开始，来晒先满足条件的节点，然后将样式作用在这些节点上。

常用的选择器：

标签选择器、类选择器、id选择器

1.标签选择器

选择特定标签名的元素，能够支持基本的html标签

标记名{/* 声明块*/}

HTML和CSS代码：

<!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.0">
    <title>Document</title>
    <style>
        h2 /* 标签名 */
          {
            color: tomato;    /* 声明块 */
        }
    </style>
</head>
<body>
    <h2>hello</h2>
    <h2>你好</h2>
    <h2>拜拜</h2>
</body>
</html>

显示效果：

2.类选择器

选择具有特定class的元素，类选择器是根据类名来选择的，书写类名前面加一个英文的小数点" . ",

.类名 {声明块}

HTML和CSS代码：

<!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.0">
    <title>Document</title>
    <style>
        .demo{/* 标签名 */
            color: blue;   /*声明块*/ /* 设置字体颜色为蓝色 */
        }
    </style>
</head>
<body>
    <p class="demo">
        设置p标签的字体颜色为蓝色
    </p>
</body>
</html>

显示效果：

另外我们一个class属性可以赋予多个属性值,我们书写多个属性值，中间用空格隔开,那么就可以应用多个样式

<!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.0">
    <title>Document</title>
    <style>
        .demo{/* 标签名 */
            color: blue; /* 声明块 */ /* 设置字体颜色为蓝色 */
        }
        .demo2 {/* 标签名 */
            background-color: red; /* 声明块 */ /*设置背景色为红色*/
        }
    </style>
</head>
<body>
    <p class="demo demo2">
        设置p标签的字体颜色为蓝色
    </p>
</body>
</html>

显示效果：

3.id选择器

选择具有特定id属性值的元素，我们需要在书写id选择器的时候，书写id值前面加一个英文的"#"

#id名{声明块}

HTML和CSS代码：

<!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.0">
    <title>Document</title>
    <style>
        #demo {/* 标签名 */
            color: red;/* 声明块 */ /*设置字体颜色为红色*/
        }
    </style>
</head>
<body>
    <h1>昨天</h1>
    <h1 id="demo">今天</h1>
    <h1>明天</h1>
</body>
</html>

显示效果：