【智一面】CSS中几种常用的选择器

406 07-28

初级web前端

1 选择器介绍

1.1 #id

id选择器可以为标有特定id的HTML元素指定特定的样式
CSS中id选择器以"#"来定义
id属性尽量不要以数字开头

实例：匹配id="case"的元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #case {
            color: red;
        }
    </style>
</head>

<body>
    <p id="case">该段落为红色</p>
    <p>该段落不受影响</p>
</body>

</html>
复制代码

1.2 .class

class选择器用于描述一组元素的样式
CSS中类选择器以一个点"."号显示
class和id的区别：class可以在多个元素中使用

实例：匹配class="case"的元素为红色

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">
    <style>
        .case {
            color: red;
        }
    </style>
</head>

<body>
    <p class="case">该段落为红色</p>
    <h3 class="case">该标题为红色</h3>
    <p>该段落不受影响</p>
</body>

</html>
复制代码

1.3 element

以html的标签作为CSS修饰所用的选择器

实例：匹配<h1>标签元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>该标题为红色</h1>
    <h2>该标题不受影响</h2>
    <h3>该标题不受影响</h3>
    <h4>该标题不受影响</h4>
</body>

</html>
复制代码

1.4 *

匹配html中的所有元素标签

实例：匹配所有标签的元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <h1>该标题为红色</h1>
    <p>该段落为红色</p>
</body>

</html>
复制代码

1.5 element.class

匹配使用class的element元素标签

实例：匹配class="case"的<h1>标签元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1.case {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="case">该标题为红色</h1>
    <h2 class="case">该标题不受影响</h2>
    <h3 class="case">该标题不受影响</h3>
    <h4 class="case">该标题不受影响</h4>
</body>

</html>
复制代码

1.6 element1 element2

指定目标选择器必须处在某个选择器对应的元素内部
该选择器会作用于element1后续所有的子元素element2，不管中间隔了多少元素

实例：匹配<div>元素内部的每个<p>标签为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>该段为红色</p>
        <b><p>该段也是红色</p></b>
        <b><i><p>该段还是红色</p></i></b>
    </div>
    <p>该段不受影响</p>
</body>

</html>
复制代码

1.7 element1>element2

强制指定目标选择器作为包含选择器对应的标签内部的标签
该选择器仅会作用于element1后续的第一代子元素element2，不会影响后续元素

实例：匹配父级元素是<div>的<p>子标签为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div>p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>该段为红色</p>
        <b><p>该段不受影响</p></b>
        <b><i><p>该段不受影响</p></i></b>
    </div>
    <p>该段不受影响</p>
</body>

</html>
复制代码

1.8 element1~element2

该选择器会作用于element1元素出现后的所有相邻的element2元素

实例：匹配<h1>标签后相邻的每个<p>标签的样式为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1~p {
            color: red;
        }
    </style>
</head>

<body>
    <p>该段不受影响</p>
    <h1>标题</h1>
    <p>该段为红色</p>
    <p>该段为红色</p>
</body>

</html>
复制代码

1.9 element1+element2

该选择器仅会作用于element1元素出现后的第一个挨着的element2元素

实例：匹配<h1>标签后相邻的第一个<p>标签的样式为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1+p {
            color: red;
        }
    </style>
</head>

<body>
    <p>该段不受影响</p>
    <h1>标题</h1>
    <p>该段为红色</p>
    <p>该段不受影响</p>
</body>

</html>
复制代码

1.10 attribute

该选择器会匹配带有attribute属性的标签

实例：匹配带有target属性的<a>元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        a[target] {
            color: red;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com/" target="_blank">百度搜索（红色）</a><br />
    <a href="https://cn.bing.com/" target="_top">必应搜索（红色）</a><br />
    <a href="www.google.com">谷歌搜索（不受影响）</a>
</body>

</html>
复制代码

2 选择器优先级

2.1 优先级概念

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

2.2 优先级顺序

以下选择器的优先级逐级递增：

通用选择器（*）
元素选择器（<label>）
类选择器（.class）
属性选择器（attribute）
ID选择器（#id）
内联样式

2.3 权重计算

各类选择器的权重：

选择器	权重
内联样式	1000
ID选择器	100
类选择器	10
元素选择器	1

其优先级遵循以下法则：

选择器都有一个权值，权值越大越优先
当权值相等时，后出现的样式表设置要优于先出现的样式表设置
网页编写者设置的CSS样式的优先权高于浏览器所设置的样式
继承的CSS样式不如后来指定的CSS样式
在同一组属性设置中标有!important规则的优先级最大

标签： Web