CSS选择器有哪些？选择器的优先级如何排序？

本文章转载于：https://www.cnblogs.com/AIonTheRoad/p/11283100.html

CSS选择器分类：

CSS的选择器分类可以分为三大类：id选择器，类选择器，标签选择器。

用法如下：

选择器		e.g.	说明
id选择器	#id	#header	选择id="header"的所有元素
类选择器	.class	.message	选择class="message"的所有元素
标签选择器	el	div	选择所有的div元素

其中他们又可以以不同的方式进行组合，如下：

选择器		e.g.	说明
后代选择器	el el	div p	选择div元素内部的所有p元素
子代选择器	el>el	div>p	选择div元素的第一子代的所有p元素
相邻兄弟选择器	el+el	.msg+p	选择与class为"msg"的元素同级且紧跟其后的第一个p元素
通用兄弟选择器	el~el	.msg~p	选择class为"msg"的元素后面的所有p元素
群组选择器	el,el	p, span, .blue,#box	选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
伪类选择器	:link,:visited, :hover, :active, :focus	a:hover	选择鼠标指针位于a标签之上的链接
伪元素选择器	:before, :after	p:before	在每个p元素内容之前插入内容
属性选择器	[attribute]	[target]	选择带有target属性的所有元素
通用选择器	*	*	选择所有的元素

优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

权重： !important：10000

内联： 1000

id选择器：100

类、伪类、属性选择器：10

标签、伪元素选择器：1

通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0

CSS选择器有哪些？选择器的优先级如何排序？相关推荐

***CSS魔法堂：选择器及其优先级
一.前言首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
CSS魔法堂：选择器及其优先级
一.前言首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
CSS样式内联选择器选择器优先级伪类顺序
日期:2020-10-02 作者:19届WY 标签:CSS选择器相关内容一.html简介&CSS简介 == html简介 : 结构:决定网页的结构及内容,即"显示哪些内容" ...
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x 行间选择器 id选择器类选择器元素选择器通配符选择器
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
css样式表和选择器
CSS样式----图文详解:css样式表和选择器主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
css 30 常用选择选择器
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
文章目录一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...

CSS选择器有哪些？选择器的优先级如何排序？

CSS选择器有哪些？选择器的优先级如何排序？相关推荐

最新文章

热门文章