css选择器大全（超全！！！）

原创 已于 2023-12-14 08:59:05 修改
· 4.1k 阅读 · 63 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2023-12-13 17:58:37 首次发布

文章目录

一、常用css选择器

1.元素选择器

通过元素名称选择HTML元素.
如下代码，将选中所有span标签

span{
	color:red;
}

2.类选择器

类选择器以. +类别名称
如下代码，将选中所有类别名称为classselect的HTML元素

.classselect{
	background:red;
}

3.ID选择器

ID选择器以#+ID名称
如下代码，将选中所有ID名为idselect的HTML元素

#idselect{
	hight:100px;
}

4.通配符选择器

通过*选中所有标签
如下代码，将选中所有HTML元素

*{
	width:100px;
}

二、群组选择器

群组选择器以选择器1，选择器2，选择器3...{}同时选中对应选择器选中的元素
如下代码，将同时选中.divselect ,span,.colorselect对应的HTML元素

.divselect,span,.colorselect{
	color:red;
}

三、关系选择器

1.后代选择器（包含选择器）

通过空格以选择器1 选择器2 选择器3...{}选中祖先元素间接或直接包含的后代元素
如下代码，将同时选中id名为aa的元素直接和间接包含的后代类名为.ss 对应的HTML元素

<body>
   <div id="aa">
    <span class="ss">1</span>
    <span id="dd">
        <span class="ss">1</span>
    </span>
    <span class="ss">
        3
        <span class="ff">4</span>
    </span>
    <span class="ss">2</span>
   </div> 
</body>
<style>
    #aa .ss {
        width: 100px;
        height: 200px;
        padding-left: 20px;
    }
</style>

在这里插入图片描述

2.子代选择器

通过>选中祖先元素直接包含的后代元素
如下代码，将同时选中id名为aa的元素直接包含的后代类名为.ss 对应的HTML元素

<body>
   <div id="aa">
    <span class="ss">1</span>
    <span id="dd">
        <span class="ss">1</span>
    </span>
    <span class="ss">
        3
        <span class="ff">4</span>
    </span>
    <span class="ss">2</span>
   </div> 
</body>
<style>
    #aa>.ss {
        width: 100px;
        height: 200px;
        padding-left: 20px;
    }
</style>

在这里插入图片描述

3.相邻兄弟选择器

通过+选中指定元素后面相邻的兄弟元素
如下代码，将选中id名为dd后面的相邻类名ss对应的HTML元素

<body>
   <div id="aa">
    <span class="ss">1</span>
    <span id="dd">
        <span class="ss">1</span>
    </span>
    <span class="ss">
        3
        <span class="ff">4</span>
    </span>
    <span class="ss">2</span>
   </div> 
</body>
<style>
    #dd+.ss {
        width: 100px;
        height: 200px;
        padding-left: 20px;
    }
</style>

在这里插入图片描述

4.全部兄弟选择器

通过~选中指定元素后面所有的兄弟元素
如下代码，将选中#dd后面的全部类名ss对应的HTML元素

<body>
   <div id="aa">
    <span class="ss">1</span>
    <span id="dd">
        <span class="ss">1</span>
    </span>
    <span class="ss">
        3
        <span class="ff">4</span>
    </span>
    <span class="ss">2</span>
   </div> 
</body>
<style>
    #dd~.ss {
        width: 100px;
        height: 200px;
        padding-left: 20px;
    }
</style>

在这里插入图片描述

四、属性选择器

1.elem[target]：选择所有带有target属性元素

2.elem[target=value]：选择所有elem标签下使用属性（target）的属性值是value的元素

3.elem[target^=value]：选择所有elem标签属性（target）以属性值以value开头的元素

4.elem[target$=value]：选择所有elem标签属性（target）的属性值以value结尾的元素

5.elem[target*=value]：选择所有elem标签属性（target）的属性值含有value的元素

6.elem[target~=value]：选择所有elem标签属性（target）的属性值包含value字符的元素

7.elem[target|=value]：选择所有elem标签属性（target）的属性值以等与value或者以 value- 为开头的元素

五、伪类/伪元素选择器

选择器示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(span)选择所有span以外的元素
:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个

元素的第一个字母

:first-linep:first-line选择每个

元素的第一行

:first-childp:first-child选择器匹配属于任意元素的第一个子元素的

元素

:beforep:before在每个

元素之前插入内容

:afterp:after在每个

元素之后插入内容

:lang(language)p:lang(it)为

元素的lang属性选择一个开始值

qq_51147571
关注
CSS 选择器大全
小赛赛爱吃肉
03-09 980
CSS 选择器 CSS 选择器有很多，总结几个常用的选择器，如果想了解更多选择器请点击我查看或者如果英文好得情况下点击我查看也是可以的哦~ 通配符选择器 元素选择器 ID选择器 类选择器 并集选择器(选择器分组) 交集选择器 子元素选择器 后代元素选择器 兄弟元素选择器 伪类选择器 子元素的伪类 伪元素选择器 属性选择器 否定伪类 通配符选择器 * 可以选中所有的元素 <style...
CSS 选择器（超级详细，欢迎补充）
冷兮雪的博客
11-25 3872
css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。今天我们重点来介绍css中的选择器。
CSS的选择器
weixin_65317510的博客
07-22 6299
6种选择器：基本选择器、复合选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器。
CSS：选择器-复合选择器
最新发布
Brave_heart4pzj的博客
04-30 463
CSS
CSS选择器大全
weixin_45203607的博客
09-11 1751
CSS-选择器大全 https://www.runoob.com/w3cnote/css-style-priority.html 选择器优先级 https://www.w3school.com.cn/css/css_pseudo_classes.asp CSS 伪类(比如: a:hover ) https://www.w3school.com.cn/css/css_pseudo_elements.asp CSS 伪元素(比如: h1::before ) 基本选择器 id选择器   标签的i
60 个 CSS 选择器，一网打尽！
sinat_21902709的博客
03-02 1265
CSS 选择器用于选择 HTML 元素并将样式应用于它们。使用这些选择器，可以定义特定条件下应用哪些样式。除了普通的选择器外，还有伪类和伪元素，用于选择具有特定状态或特定部分的元素，并将样式应用于它们。本文将通过图文并茂的方式展示这些选择器的使用方法！
CSS的各种选择器（基本选择器和复合选择器）
syy2023090248的博客
10-30 2574
其中，第一个选择器必须是标签选择器，第二个选择器必须是 class 类选择器或 id选择器。:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值。子代选择器（child combinator）：使用 ">" 符号来选择一个元素的直接子元素。在CSS中，可以使用逗号分隔的"并集"选择符来选择多个元素，即选择多个选择器所匹配的元素。例:p{} , div{} , span{} , ol{} , ul{} ......
CSS选择器汇总
m0_74079013的博客
05-28 469
给标签取class名，以点(.)加class名开头，选择所有该class名的元素。以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)(2) li:last-child{} (修饰最后一个li)(3) li:nth-child{} (修饰第()个li)
css：超全选择器详细介绍以及优先级
YangLu888
10-04 3057
引入css的四种方式以及优先级；css选择器的超全详细介绍以及选择器的各种优先级；nth-of-type和nth-child的区别。
Python+Selenium 基础篇之19 CSS选择器，超好用
伟爵社的博客
06-07 1640
css选择器我补上，这个当你做起项目来，你一定会用到，真的很好用
前端笔记大全，非常全！
05-23
例如，JavaScript中的异步编程（回调函数、Promise、async/await）、CSS选择器性能、BFC（块格式化上下文）、跨域解决方案、前端安全问题（XSS、CSRF）、模块化（CommonJS、AMD、ES模块）等。熟悉这些知识点有助于在...
CSS语法基础--选择器
I_am_fine_的博客
07-15 800
CSS选择器 概述: CSS的选择器主要包括基本选择器，层次选择器，结构伪类选择器和属性选择器等等。选择器的主要作用是定位元素。 1 基本选择器 概述 : 基本选择器包括标签选择器，类选择器和ID选择器，三种选择器的优先级为：ID选择器>类选择器>标签选择器 。 1.1 标签选择器 结构格式 ： 标签名{ 值; } CSS代码： h1{ color: aqua; } p{ background: antiquewhite; } HTML代码： <!DOCTYPE
⭐️CSS常见选择器
Python老吕的博客
02-28 5705
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
CSS 都有哪些选择器？
mzrxLXR的博客
08-01 9648
CSS 都有哪些选择器？ 1.标签选择器（如：body,div,p,ul,li） 2.类选择器（如：class=”head”,class=”head_logo”） 3.ID选择器（如：id=”name”,id=”name_txt”） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开） 6.继承选择器（如：div p,注意两选择...
CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3133
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
XHTML与CSS选择器详解
本文主要介绍了CSS的选择器以及XHTML的基础知识。 在网页设计中，CSS（Cascading Style Sheets）的选择器是至关重要的，它们帮助我们精确地定位和应用样式到HTML元素上。选择器主要有以下几种类型： 1. **标签选择...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值