CSS选择器

最新推荐文章于 2024-07-24 20:49:24 发布

makabaka12138

最新推荐文章于 2024-07-24 20:49:24 发布

阅读量61

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/makabaka12138/article/details/125120028

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

为什么要使用选择器呢？

使用css对html页面中的元素实现一对一，一对多，或多对一的控制；

如元素选择器，前一篇也提到过。

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 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>
        h1{
            color: green;
        }
    </style>
</head>
<body>
    <h1>祝你们以后身上都带点这个颜色！！！！</h1>
</body>
</html>

但是您想想，万一有多个h1,那不是所有h1都是同样的格式，那有没有办法针对单独的h1进行设置呢？

您可真问对银了！

接下来就一一介绍

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>
        .ibm{
            background-color: green;
        }
    </style>
</head>
<body>
    <h1 class = "ibm">祝你们以后身上都带点这个颜色！！！！</h1>
</body>
</html>

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.0">
    <title>Document</title>
    <style>
        #ibm{
            background-color: green;
        }
    </style>
</head>
<body>
    <h1 id = "ibm">祝你们以后身上都带点这个颜色！！！！</h1>
</body>
</html>

统配选择器,主要用来清除所有元素默认边距值和填充值

*{
    margin:0;
    padding:0;
}

群组选择器

<!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>
        h1,p,div{
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>祝你们以后身上都带点这个颜色！！！！</h1>
    <p>asfsdkafgjasfjaksfjaskfjakjs</p>
    <div>安抚舒服啊告诉法</div>
</body>
</html>

后代选择器,先找p,再找div

<!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>
        div p{
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>祝你们以后身上都带点这个颜色！！！！</h1>
    <p>asfsdkafgjasfjaksfjaskfjakjs</p>
    <div>安抚舒服啊告诉法
        <p>
            ajdaksg大苏打
        </p>
    </div>
</body>
</html>

伪类选择器：

a:link
a:visita
a:hover
a：active


顺序一定不能错

选择器的权重图

makabaka12138

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

为什么要使用选择器呢？使用css对html页面中的元素实现一对一，一对多，或多对一的控制；如元素选择器，前一篇也提到过但是您想想，万一有多个h1,那不是所有h1都是同样的格式，那有没有办法针对单独的h1进行设置呢？您可真问对银了！接下来就一一介绍class选择器：id选择器：统配选择器,主要用来清除所有元素默认边距值和填充值群组选择器后代选择器,先找p,再找div伪类选择器：选择器的权重图...
复制链接

扫一扫

专栏目录