CSS选择器

Posted 2022-11-29 acrifhy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器相关的知识，希望对你有一定的参考价值。

CSS选择器

通配符选择器

什么是通配符选择器？

CSS的通配符选择器是一种比较特殊的选择器，用*表示

格式：*property:value;…

含义：可以选中页面中所有元素，对所有元素都生效

用途：一般设置一些初始化的公共属性
例如：*margin:0px;padding:0px;

直接代码看一下：

    <style>
        div
            background-color: yellow;
        
    </style>
</head>
<body>
    <div>Hello,world!</div>

我们设置背景为黄色，但是仔细看会发现黄色背景周围是有空白的。这是因为默认了8px的边框

F12中的图与代码都有margin8，这是谷歌浏览器默认设置的，我们不想这样，因为不同浏览器可能默认的边框大小不同，这就需要初始化了。

<style>
        *
            margin: 0px;
            padding: 0px;
        
    </style>
</head>
<body>
    <div style="background-color: yellow;">Hello,world!</div>

我们把margin和padding都设置为0后：

边框就都消失了

元素选择器

什么是元素选择器

使用某个html元素名作为选择器

是一种最简单的选择器

格式：Eproperty:value;…
例子
```
h1
    color: red;
  
```
事实上，在head的style里面给某个标签加样式，就是元素选择器。

id选择器

什么是id选择器

id是指我们可以在HTML标签上设置一个id属性值

id属性特点是一个HTML文档，只能有唯一的一个，不能重复

格式：#idproperty:value;…

含义：可以选中页面中含有id属性值的元素
例如：
```
<div id="content">文案</div>
```

id命名：不能有空格，不能以数字开头

比如让一号标题与二号标题都是红色：

    <style>
        #title
            color: red;
        
    </style>
</head>
<body>
    <h1 id="title">一号标题</h1>
    <h2 id="title">二号标题</h2>
</body>

上面写法其实不规范，可以这样写：

    <style>
        #title,#title2
            color: red;
        
    </style>
</head>
<body>
    <h1 id="title">一号标题</h1>
    <h2 id="title2">二号标题</h2>
</body>

类选择器

什么是类选择器

格式：classproperty:value;…

类选择器中的类指class属性

有相同class属性值的都会被选中

class与id相比不具有唯一性

class属性的值通常以字母开头中间不能空格

类选择器可以和元素选择器组合使用

例如：

<div class="title">文案</div>

示例：

        #title1,#title2
            color: red;
        
        .title
            color: saddlebrown;
        
    </style>
</head>
<body>
    <h1 id="title1">一号标题</h1>
    <h2 id="title2">二号标题</h2>
    <h2 class="title">进击的巨人</h2>

比如说有一些块，其中几个属于同类事物，我们想把这几个字号变大，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>
        .characterfont-size: 20px;
    </style>
</head>
<body>
    <div class="character">伍六七</div>
    <div class="character">鸡大保</div>
    <div>玄武国</div>
    <div>斯特国</div>
    <p class="character">梅花十三</p>
</body>
</html>

的确，人物名字都变大了

如果我们想p标签的内容变色，可以这么做：

p.charactercolor:red

相当于元素选择器和类选择器的组合使用

属性选择器

什么是属性选择器

用于对具有某种属性的元素设置CSS样式

格式：E[attribute]property:value;…

E代表元素，[]表示元素的属性
属性种类

[attribute]用于选取指定属性（attribute）的元素

[attribute=value]用于选取指定属性（attribute）和指定属性值（value）的元素

[attribute~=value]用于选取属性值中包含指定值的元素

[attribute|=value]用于选取以指定值开头的属性值的元素

比如：

<!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>
        p[title]color: red;
    </style>
</head>
<body>
    <p title="srrdhy">srrdhy</p>
</body>
</html>

使p标签的文字变红

也可以替换为这种写法：即把属性指明

p[title="srrdhy"]color: blue;

第三种写法：假如属性不止一个：

<p title="srrdhy srr">srrdhy</p>

则可以选一个属性：

p[title~="srr"]color: pink;

第四种：使用前缀。这时需要我们的属性改为有前缀的：

<p title="srr-dhy">srrdhy</p>

此时可以：

p[title|="srr"]color: purple;

伪类选择器

什么是伪类

伪类是指那些处于一定状态的元素

伪类以冒号开头
什么是伪类选择器

通过伪类来选中相应元素进而添加样式的选择器

伪类名可以单独使用，也可以和其它选择器一起用

一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类

元素选择符和冒号之间不能有空格

伪类选择器最喜欢和超链接（a元素）一起用

伪类如下：

:link表示未被访问的链接
:visited表示已被访问过的链接
:hover鼠标经过链接上方时的状态
:active链接被激活时的状态
这个顺序很重要

比如：

    <style>
        a:linkcolor: red;
        a:visitedcolor: blue;
        a:hovercolor: green;
        a:activecolor: yellow;
    </style>
</head>
<body>
    <a href="https://baidu.com">百度</a>

派生选择器

后代选择器

后代选择器主要用来选择某个元素的后代元素

格式：父元素子元素property:value;…

注意点：父元素与子元素之间至少有一个空格，可以有很多空格
比如：p span color:red;

示例：

<!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>
        spancolor: blue;
        p span color: red;
    </style>
</head>
<body>
    <div>XXX:<span>xxxx</span></div>
    <p>YYY:<span>yyyy</span></p>
</body>
</html>

可以看到，p标签的后代span里的yyyy变成了红色。值得注意的是，如果p的后代标签有多个span，那么全部都会变成红色。

子元素选择器

格式：父元素>子元素property:value;…

用来选择作为某一个元素子元素的元素

与后代选择器的区别是后代选择器选的是所有子元素，而子元素选择器只选第一级子元素（爷爷不能选孙子）
例如：p > spancolor:red;

示例：

<!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>
        spancolor: blue;
        p > span color: red;
    </style>
</head>
<body>
    <div>XXX:<span>xxxx</span></div>
    <p>自己:<span>儿子<span>孙子</span></span>
    <span>儿子</span></p>
</body>
</html>

相邻兄弟选择器

格式：父元素 + 子元素 property;value;…

用来选择紧跟在一个元素之后的兄弟元素

这两个相邻元素一定是同级元素
例如：div + p color:red;

<!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>
        spancolor: blue;
        /* p > span color: red; */
        span + span color: yellow;
        div + p color: brown;
    </style>
</head>
<body>
    <div>XXX:<span>xxxx</span></div>
    <p>自己:
        <span>儿子
            <span>孙子</span>
        </span>
        <span>儿子</span>
    </p>
</body>
</html>

选择器权重

权重规则：

通配符选择器：0
标签选择器：1
类、伪类、属性选择器：10
id选择器：100
内联样式选择器：1000
特殊处理：!important（强制使用）

!important用法：

color:green !important;

内联样式：

<body>
    <div style="color:green;">文案</div>
</body>

权重可以相加：

#title
	color:pink; /*100*/

div#title
	color:orange; /*1+100*/

以上是关于CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章