CSS 选择器 | CouriourC Blog

选择器分类

基本选择器

基本选择器主要争对于 tag 、id 、class 这种简单标签，可以结合一些组合器，提高作用属性的优先级，实现局部样式覆盖。比如：

<div class="table">
	<div class="plate" id="vegetable_panel"></div>
	<div class="plate" id="beef_panel"></div>
	<div class="plate" id="big_panel">
		<div class="more_plate">
			<plate class="other_panel" />
		</div>
	</div>
</div>
<style>
	* { color:red; }
	#beef_panel { color: blue; }
	.plate { }
	div { }
	plate { }
	/** 组合器 */
	* div { } /*所有元素下的 div*/
	div>div { } /*div 下的 div*/
	/*兄弟选择器*/
	div+div{ } /*div 之后的一个相邻兄弟节点（强调一个相邻）*/
	div~div{ } /*div 之后的所有兄弟节点（强调所有）/
	/*分组选择器*/
	div,plate {} /**,分割的都匹配*/
	/*等价于*/
	div{ }
	plate{ }
	/**同时是 div 具有类名.plate 的选择器*/
	div.plate{ }
</style>

需要注意的是，在 CSS 中请不要以 {} 为一个单位思考，而是争对某一个属性值来思考，比如比如 div{color:red}，你应该关心的是 color 在 div 这个选择器下的优先级和值。

属性选择器

无非就那一套

是否有 [attr]
第一个是否匹配 [attr^=value]
最后一个是否匹配 [attr$=value]
全匹配，还是忽略大小写匹配 [attr=value i|s ]
是否包含匹配
是否不匹配的否定词
比较特殊好玩的一个
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为"value"或是以"value-"为前缀（-）开头。有一种命名空间的含义。

伪类选择器

伪类选择器，是对于特殊身份（nth-child 系列、etc.），或者某一个节点的特殊状态(hover、 active、link、visited、etc.)进行选择的工具。
%%TODO 简单分类%%

表单相关

:autofill : 设置自动填充部分的样式
:blank : 选择用户输入为空的输入框
:checked : 选择任何处于选中状态的 radio
:default: 设置之前默认设置的表单元素，例如：
:disabled 、 :enabled :这两个是一对对立的东西，表示是否启用的元素。
:valid :表示内容验证正确的 <input> 或其他 <form> 元素

例：

选择器的优先级

important 最大，高于一切，包括 id 选择器，藏匿于无形，非必要，不适用
id 选择器其次，当前网页唯一值。
class 再次
然后是伪类选择器

当然选择器是可以叠加计算的，《CSS REFACTORING》中提到了算法的过程。

具体算法如下：

将数字放到（important，a，b，c，d）中
important ，有 1 无 0。
a 由内联样式决定，有 1 无 0。
b 等于是ID 选择器次数。
c 的值等于类选择器和属性选择器和伪类出现的总次数。
d 则是标签选择器和伪元素的次数。

举个例子

<div class="table">
	<div id="plate" style="color:red;"></div>
</div>

<style>
	.table>#plate
	/**color 这个属性的值所受到的优先级 color: red;(0,1,0,0,0) */
	{}

	*
	/**color 这个属性的值所受到的权重值为 (1,0,0,0,1)，所以哪怕是最校的通用选择器都能顶掉 */
	{
		color: red !important;
	}
</style>

此外还有层叠式的效应，也就是在同级别的优先级下。后面的会覆盖前面的。

[!TIP]
当你不知道你的选择器是否生效的时候，你可以尝试使用 border: solid !important;来验证。

选择器分类

基本选择器

属性选择器

伪类选择器

表单相关

超链接相关

元素状态相关

伪元素选择器

设置进度条的样式

设置滚动条的样式

设置文件选择按钮的样式

@规则

选择器的优先级