CSS3选择器权重、新增伪类选择器（3）

最新推荐文章于 2023-03-18 03:36:15 发布

sunnyaha12

最新推荐文章于 2023-03-18 03:36:15 发布

阅读量305

点赞数

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

本文链接：https://blog.csdn.net/sunnyaha12/article/details/107473492

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的选择器权重规则，强调了行间样式、ID、Class和标签选择器的权重比较，并阐述了相同权重时的选择器应用。此外，重点讲解了新增的伪类选择器，如:first-of-type、:last-of-type、:nth-child(n)等，及其在不同场景下的应用，帮助理解并提升CSS3选择器的使用技巧。

摘要由CSDN通过智能技术生成

一、选择器权重

行间样式 > id选择器 > class选择器 > 标签选择器 > 通配符

选择器权重计算
行内样式	权重1000
ID选择器	权重100
类选择器	权重10
标签选择器	权重1
通配符	权重0

相同的权重:以后面出现的选择器为最后规则，越具体越强大。

二、新增伪类选择器

1:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素。（特定类型比如p标签）从前往后数第一个

p标签的父元素是body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-of-type{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>pneumonia</h2>
    <p>抗肺炎1</p>
    <p>抗肺炎2</p>
    <p>抗肺炎3</p>
    <p>抗肺炎4</p>
    <p>抗肺炎5</p>
    <div>
        <h2>pneumonia</h2>
        <p>抗肺炎1</p>
        <p>抗肺炎2</p>
        <p>抗肺炎3</p>
        <p>抗肺炎4</p>
        <p>抗肺炎5</p>
    </div>
</body>
</html>

2:last-of-type匹配属于其父元素的特定类型的最后一个子元素的每个元素。从后往前数第一个

<style>
        p:first-of-type{
            background-color: pink;
        }
        p:last-of-type{
            background-color: yellow;
        }
</style>

3:only-of-type匹配属于其父元素的特定类型的唯一子元素的每个元素。div下面唯一一个p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:only-of-type{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>抗肺炎1</p>
    </div>
    <div>
        <p>抗肺炎2</p>
        <p>抗肺炎3</p>
    </div>
    <div>
        <p>抗肺炎4</p>
        <div>抗肺炎5</div>
    </div>
</body>
</html>

4:nth-of- type(n) 匹配属于父元素的特定类型的第N个子元素的每个元素。从前往后数

p标签的父元素body 的第二元素 p==================括弧内也可以写2n或者even表示偶数 2n+1或者odd表示奇数；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:nth-of-type(2n){
            background-color: red;
        }
    </style>
</head>
<body>
    <h2>pneumonia</h2>
    <p>抗肺炎1</p>
    <p>抗肺炎2</p>
    <p>抗肺炎3</p>
    <p>抗肺炎4</p>
    <p>抗肺炎5</p>
</body>
</html>

5:nth-last-of-type(n) 匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数。从后往前数

6 :last-child 匹配属于其父元素的最后一个子元素的每个元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:last-child{
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h2>pneumonia</h2>
    <p>抗肺炎1</p>
    <p>抗肺炎2</p>
    <p>抗肺炎3</p>
    <p>抗肺炎4</p>
    <p>抗肺炎5</p>
    <div>
        <h2>pneumonia</h2>
        <p>抗肺炎1</p>
        <p>抗肺炎2</p>
        <p>抗肺炎3</p>
        <p>抗肺炎4</p>
        <p>抗肺炎5</p>
    </div>
</body>
</html>

7:only-child 匹配属于其父元素的唯一子元素的每个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:only-child{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>happy1</p>
    </div>
    <div>
        <span>happy2</span>
        <p>happy3</p>
    </div>
</body>
</html>

8:nth-child(n) 匹配属于其父元素的第N个子元素,不论元素的类型。（父元素里面的第n个子元素）可写数字也可以写公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-child(2){
            background-color: red;
        }
    </style>
</head>
<body>
    <h2>happy</h2>
    <p>happy1</p>
    <p>happy2</p>
    <p>happy3</p>
    <p>happy4</p>
    <p>happy5</p>
</body>
</html>

9:nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型，从最后一个子元素开始计数。

10 :root 匹配文档根元素。文档的根元素就是html元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        :root{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>happy</h2>
    <p>happy1</p>
    <p>happy2</p>
    <p>happy3</p>
    <p>happy4</p>
    <p>happy5</p>
</body>
</html>

11 :empty 匹配没有子元素(包括文本节点)的每个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :empty{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>happy</h2>
    <p>happy1</p>
    <p>happy2</p>
    <p></p>
    <p>happy4</p>
    <p>happy5</p>
</body>
</html>

12 :target可用于选取当前活动的目标元素。点击跳转至内容2时内容2就会变成黄色黑边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 500px;
            height: 1000px;
            background-color: pink;
        }
        p:target{
            border: 10px solid #000000;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <a href="#con1">点击跳转到内容1</a>
    <a href="#con2">点击跳转到内容2</a>
    <p id="con1">happy1</p>
    <p id="con2">happy2</p>
</body>
</html>

13 :enabled匹配每个已启用的元素。（表单元素中使用）

14 :disabled 匹配每个被禁用的元素。第二栏不可选中，第一栏和第三栏可以选中（表单元素中使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            background-color: pink;
        }
        input:disabled{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form action="">
        姓名：<input type="text"><br>
        昵称：<input type="text" disabled="disabled"><br>
        密码：<input type="password">
    </form>
</body>
</html>

15 :checked匹配每个已被选中的input元素(只用于单选按钮和复选框)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:checked{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <form action="">
        性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
        爱好：<input type="checkbox" name="hobby" checked="checked">抽烟<input type="checkbox" name="hobby">喝酒<input type="checkbox" name="hobby">烫头
    </form>
</body>
</html>

16 :not(selector) 匹配非指定元素/选择器的每个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: yellow;
        }
        :not(p){
            color: pink;
        }
    </style>
</head>
<body>
    <h2>快乐</h2>
    <p>happy2</p>
    <p>happy3</p>
    <p>happy4</p>
    <p>happy5</p>
    <p>happy6</p>
    <div>happy7</div>
</body>
</html>

17 ::selection 匹配被用户选取的部分。被选中部分变红

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ::selection{
            color: red;
        }
    </style>
</head>
<body>
    <h2>快乐</h2>
    <p>happy2</p>
    <p>happy3</p>
    <p>happy4</p>
    <p>happy5</p>
    <p>happy6</p>
    <div>happy7fdgjrhifldfjjgirejlijfowiejfiojgoijgih</div>
</body>
</html>