CSS 选择器

常用选择器

选择器类型	语法示例	描述
元素选择器	p { ... }	选择所有<p>元素。
类选择器	.highlight { ... }	选择所有具有class="highlight"的元素。
ID选择器	#header { ... }	选择具有id="header"的元素。
属性选择器	a[target="_blank"] { ... }	选择所有target属性为_blank的<a>元素。
后代选择器	div p { ... }	选择所有<div>内部的<p>元素。
子选择器	ul > li { ... }	选择所有<ul>的直接<li>子元素。
相邻兄弟选择器	h1 + p { ... }	选择所有紧接在<h1>后的<p>元素。
通用兄弟选择器	h1 ~ p { ... }	选择所有<h1>之后的<p>元素。
伪类选择器	a:hover { ... }	选择鼠标悬停时的<a>元素。
伪元素选择器	p::before { ... }	选择<p>元素内容之前的位置。
否定伪类	input:not([type="text"]) { ... }	选择所有不是文本类型的<input>元素。
属性选择器扩展	[href^="https"] { ... }	选择href属性以"https"开头的元素。
属性选择器扩展	[href$=".pdf"] { ... }	选择href属性以".pdf"结尾的元素。
属性选择器扩展	[href*="image"] { ... }	选择href属性包含"image"的元素。

权重

CSS选择器的权重（Specificity）决定了在有多个规则冲突时哪个规则将被应用到元素上。选择器的权重越高，其定义的样式就越有可能被应用。以下是计算CSS选择器权重的规则：

选择器类型	权重值（a, b, c, d）	示例和权重计算
内联样式	1, 0, 0, 0	<div style="color:red;"> 无其他值
ID选择器	0, 1, 0, 0	#id { ... } a=0, b=1
类选择器、属性选择器	0, 0, 1, 0	.className { ... } c=1
元素选择器、伪元素	0, 0, 0, 1	div { ... } 或 ::before { ... } d=1
组合符（无增加）	无变化	div > p { ... } 权重不变
通配符（降低）	降低	* { ... } 降低权重
!important	总是最高	color: red !important;

开发者在编写CSS时应该注意选择器的权重，以避免不必要的样式冲突和覆盖。权重较高但不符合语义的CSS代码会降低样式的可维护性。

使用解析

一、CSS+CSS3 选择器
类选择器： .name{}
ID选择器： #id{}
元素选择器： div{}
通配符选择器： *{}
后代选择器： div p{}
子选择器： div>p{} 和后代不一样的是，只筛选div下所有第一层p标签
兄弟选择器： div+p{} 筛选div后面一个p元素
交集选择器: div,p,.name{} 选择的元素共享一个样式

二、属性选择器
属性选择器： a[target=_blank] 筛选所有a标签中属性target是_blank的
属性包含选择器： div[title~=name] 筛选div属性title中包裹带有name的
属性开头选择器： img[src^=‘https’] 筛选img属性src以htttps开头的所有img标签
属性结尾选择器： img[src$=’.png’] 筛选img属性src以 .png 结尾的img标签
定义属性选择器时的括号 *[target] {color:red;}  包含标题（target）的所有元素变为红色
span[class='test']    这样写是：匹配所有带有class类名test的span标签
span[class *='test'] 这样写是：匹配所有包含了test字符串的class类名的span标签
span[class]             这样写是：匹配所有带有class属性的span标签
[class='all']              这样写是：匹配页面上所有带有class='all'的标签
[class *='as']           这样写是：匹配页面上所有class类且类名带有as字符串的类的标签

三、伪类选择器
焦点伪类： :focus
悬浮伪类： :hover
前置伪类：p ::after 往p元素前面追加内容
后置伪类：p ::before 往p元素后面追加内容
光棍伪类：p :empty 选择没有子元素的p标签
取反伪类：div: not(p) 选择div下所有不是p标签的元素
首个选择器： div p:first-of-type 或:first-child 选择div下面第一个p标签
末尾选择器： ul li:last-child 或 last-of-type 选择ul下最后一个li
正序筛选伪类： :nth-child(2n) 正序第一个开始自由筛选第2的倍数（2、4、6、8）个元素
倒序筛选伪类： :nth-last-child(2) 倒序最末尾开始自由筛选第 2 个元素
注意点 nth-child(2) 和 nth-of-type(2) 区别：
p:nth-child(2) 找位置是2的p元素，如果位置2不是p元素不生效
p:nth-of-type(2) 找下面p元素中排在第二的，及时前面有很多其他元素，类似兄弟选择