选择器以及优先级

醉挽清欢

已于 2022-01-21 19:42:49 修改

阅读量1.4k

点赞数

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

于 2022-01-07 21:23:21 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122371775

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

选择器

什么是选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

怎样引入css

行间样式 <style="">
页面级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>
</head>
<style>
</style>

外部css（herf后面是地址）

<!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>
    <link rel="stylesheet" href="">
</head>

选择器的种类

简单选择器

ID选择器

特点：一个元素智能有一个id值，一个id只对应一个元素，一一对应的。
语法格式：#（加上id后面的值，是什么就填什么，如：only）
例：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    #only{
        background-color: aqua;
    }
</style>
<body>
    <h1 id="only">新年快乐</h1>
    <h1>新年快乐</h1>
</body>
</html>

效果图如下
在这里插入图片描述

类选择器（最常用）

语法格式：.名字
特点：一个元素可以应用多个class，一个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>
    <link rel="stylesheet" href="">
</head>
<style>
    .only1{
        background-color: aqua;
    }
    .only2{
        color: red;
    }
</style>
<body>
    <h1 class="only1 only2">新年快乐</h1>
    <h1 class="only1">新年快乐</h1>
</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.0">
    <title>Document</title>
</head>
<style>
    h1{
        background-color: aqua;
    }
</style>
<body>
    <h1>新年快乐</h1>
    <h1>新年快乐</h1>
    <h1>新年快乐</h1>
    <h1>新年快乐</h1>
    <h1>新年快乐</h1>
    <div>
        <h1>新年快乐</h1>
        <h1>新年快乐</h1>
        <h1>新年快乐</h1>

    </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.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<style>
*{
    background-color: aqua;
}
</style>
<body>
    <h1 >新年快乐</h1>
    <p>新年快乐</p>
    <h2 >新年快乐</h2>

    <a >新年快乐</a>
</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>
    <link rel="stylesheet" href="">
</head>
<style>
div h1{
    background-color: aqua;
}
</style>
<body>
    <h1 >新年快乐</h1>
    <div>
    <h1>新年快乐</h1>
</div>
</html>

效果如下所示
在这里插入图片描述

并列选择器

格式：什么.什么(在.号之前不用空格)
注意;在并列选择器中，标签选择器和id选择器和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>
    <link rel="stylesheet" href="">
</head>
<style>
h1.a1{
    background-color: aqua;
}
</style>
<body>
    <h1 class="a1">新年快乐</h1>
    <div>
    <h1>新年快乐</h1>
</div>
</html>

在这里插入图片描述

分组选择器：（主要用于简化代码）

格式：1，2，3
例：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
h1,div{
    background-color: aqua;
}
</style>
<body>
    <h1 class="a1">新年快乐</h1>
    <div>
    新年快乐
</div>
</html>

在这里插入图片描述

优先级

选择器权重

权重，也就是选择器的优先级，每条选择器的规则都有其权重，权重大的会覆盖掉权重小的。

css权重规则

选择器	权重
！important	正无穷
行间样式	1000
id选择器	100
class选择器·属性选择器·伪类选择器	10
标签选择器·伪元素选择器	1
通配符选择器	0
在计算机中，正无穷+1>正无穷
如果是权重值一样，会显示后面的
在权重值中，是256进制，是从0到255后变成1，所以这里的1000不是一千