css选择器

某些开发

已于 2023-01-14 15:24:40 修改

阅读量732

点赞数

分类专栏：网页与布局文章标签： css

于 2022-10-29 13:13:58 首次发布

本文链接：https://blog.csdn.net/weixin_43964866/article/details/127378256

版权

网页与布局专栏收录该内容

11 篇文章 0 订阅

订阅专栏

碎碎念：都是一些自己在学习过程中的一点体会，如果有什么不对的感谢大家指正一起学习！

css选择器

一、常用选择器
二、属性选择器
三、其他
四、栗子
五、参考链接

一、常用选择器

选择符	名称	例子	简介
*	通配符	*	匹配所有元素
.class	类选择器	.test	选取所有 class=“test” 的元素
#id	id选择器	#test	选取 id=“test” 的那个元素
element	元素选择器	p	选择所有`<p>`标签

二、属性选择器

选择符	名称	例子	简介
element element	后代选择器 (空格)	div p	`<div>` 元素内的所有 `<p>` 元素
element>element	子选择器	div>p	选择其父元素是 `<div>` 元素的所有 `<p>` 元素
element+element	相邻兄弟选择器	div + p	选择所有紧随 `<div>` 元素之后的 `<p>` 元素
element1~element2	通用兄弟选择器	p ~ ul	选择 `<p>` 元素后面的所有 `<ul>` 元素

三、其他

相同类名,后面的会覆盖前面的
权重排序: id选择器 > 类名选择器 > 标签选择器
同时使用类名,id,标签设置样式谁使用!important 谁生效
元素选择器：可以理解为，用标签本身作为选择器（也称为：类型选择器）
类选择器：选择指定class属性的元素
多类选择器：.test1.test2 同时包含这些类名的元素
id选择器：选择指定id名的元素

四、栗子

1. * 通配符

匹配所有元素（包括html，body标签）

<!-- 设置所有元素的字体大小为20px,颜色为green -->

<!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>选择器</title>
    <style>
        * {
            font-size: 20px;
            color: green;
        }
    </style>
</head>

<body>
    body
    
    <div>div1</div>
    <p>p1</p>
    <span>span1</span>

</body>

</html>

在这里插入图片描述

2. 空格 div p

后代选择器: 选择所有指定的后代元素，子子孙孙。老祖宗，所有家庭成员都要集合。

<!--
	1. 设置 wrapper 下所有.test-p类名高亮，儿子，孙子都高亮了
	2. p1,p2高亮
-->

<!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>选择器</title>
    <style>
        .wrapper .test-p {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="wrapper">

        <div class="div1">
            <p class="test-p">p1</p>
        </div>

        <p class="test-p">p2</p>

        <span class="span1">span1</span>

    </div>

</body>

</html>

在这里插入图片描述

3. > 子选择器

子选择器：div>p。选择同一父元素下指定的所有子元素。父子关系，只认亲儿子

<!--
    1. 设置 wrapper 下所有.test-p类名高亮，只有儿子 p2 高亮了, 在.div1 内的 p1 没有高亮
    2. 可对比 "空格" 后代选择器 查看效果
-->

<!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>选择器</title>
    <style>
        .wrapper>.test-p {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="wrapper">

        <div class="div1">
            <p class="test-p">p1</p>
        </div>

        <p class="test-p">p2</p>

        <span class="span1">span1</span>

    </div>

</body>

</html>

在这里插入图片描述

4. ~ 通用兄弟选择器

兄弟选择器：div~p。选择div标签后面所有的同级p标签，但是div和p必须是相同的父元素。在一个家庭中，选择自己的所有兄弟。（同辈）

<!--
    1. 选择 父元素 wrapper 下 子元素.div1 后面所有的同辈兄弟元素 ".test-p" 高亮
    2. p1 是 ".div1"的子元素，所以没有高亮。p2 p3都是".div1"的同辈兄弟元素
-->

<!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>选择器</title>
    <style>
        .div1 ~ .test-p {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="wrapper">

        <div class="div1">
            <p class="test-p">p1</p>
        </div>

        <p class="test-p">p2</p>
        <span class="span1">span1</span>
        <p class="test-p">p3</p>

    </div>

</body>

</html>

在这里插入图片描述

5. + 相邻兄弟选择器

兄弟选择器：div+p。选择div相邻的第一个兄弟元素p。紧跟其后的第一个元素，且二者都有相同的父元素。一个家庭兄弟中选择第一顺位。（有元素顺序限制）

5.1 当前相邻的元素符合条件
在这里插入图片描述
5.2 当前相邻的元素不符合条件（有位置上的限制）

6. , 选择器分组

选择器分组：div,p。多个选择器用逗号隔开，可以将任意多个选择器分组在一起

在这里插入图片描述

7. 组合元素选择器（复合选择器）

组合元素选择器：p.test。类选择器可以结合元素选择器来使用。没有符号连接，也没有空格。表示需要同时满足两个选择器

在这里插入图片描述

8. 属性选择器

8.1 选择有某个属性的元素

CSS [attribute] 选择器，用于选取带有指定属性的元素，或者指定属性值的元素

在这里插入图片描述

8.2 选择某个有特定属性的元素
在这里插入图片描述
8.3 多属性选择

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

// 同时拥有alt 和title的img 属性

img[alt][title]{}

根据部分属性值选择某个元素

用于选取属性值中包含指定词汇的元素，使用波浪号（~）。
CSS [attribute~=“value”]
如果忽略了波浪号，则说明需要完成完全值匹配。

五、参考链接

w3c-css选择器

某些开发

关注

0
点赞
踩
0

收藏

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

css常用选择器归纳
复制链接

扫一扫

专栏目录