We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
写 CSS 越久,特别是用了更多的 CSS3 特性,越是发觉 CSS 的强大之处。尤其是最近用 React 之类的框架越来越频繁,因为是数据变化驱动界面变动,做动画、效果、交互时很少去考虑用 DOM 操作去实现,而是更多的结合 CSS 去增减 class 等去实现。
另外一方面,jQuery 等库中选择 DOM 元素等时,选择器的用法和 CSS 中的选择器基本一致,所以这里总结一下 CSS 的选择器,一举多得。
匹配所有使用 element 标签的元素。
匹配所有 class 属性中包含 classname 的选择器。
匹配所有 id 属性为 idname 的元素。
属性选择器匹配的属性名或属性值。
属性值列表:一个以空格作为分隔的值列表。
CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover 会在鼠标悬停在选中元素上时应用相应的样式。
选择器的优先级是分配给指定 CSS 声明的一个权重,它由匹配的选择器中每一种选择器类型的数值决定。当同一个元素有多个声明的时候,优先级才会有意义。
注:通用选择器(universal selector)(*),组合符合(combinators) (+, >, ~, ' ') 和 否定伪类(negation pseudo-class)(:not()) 不会影响优先级(但是,在 :not() 内部声明的选择器是会影响优先级的)。
那么,就有如下图所示的一个顺序:
例如,有一段 html 为:
<p id="foo">I am a sample text.</p>
在其上应用 css:
* #foo { color: green; } *[id="foo"] { color: purple; }
最终结果为:
从以上结果可以看出,尽管选择器*[id="foo"] 选择了一个ID,但是它还是作为一个属性选择器来计算自身的优先级。虽然匹配了相同的元素,但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。
例如有一段 html:
<html> <body> <h1>Here is a title!</h1> </body> </html>
body h1 { color: green; } html h1 { color: purple; }
会被渲染成:
也就是说,虽然样式表 body h1 中的 body 比另一个中的 html 距离元素更近,但是 body html 都被同等地当做标签选择器来对待,那么自然会以后一个样式表为准。
计算结果为:
The text was updated successfully, but these errors were encountered:
伪类选择器有很多好玩的东西,有人用一个 div 做出各种炫酷的画面,例如:A single div SingleDivProject 所以伪类选择器还有更多可以总结的,这里先留坑待填。
Sorry, something went wrong.
sweeetcc
No branches or pull requests
![css](https://cloud.githubusercontent.com/assets/17672361/19443690/1ac93a86-94c0-11e6-9d6a-aa11e02f2b2c.png)
## 为什么要总结CSS选择器?写 CSS 越久,特别是用了更多的 CSS3 特性,越是发觉 CSS 的强大之处。尤其是最近用 React 之类的框架越来越频繁,因为是数据变化驱动界面变动,做动画、效果、交互时很少去考虑用 DOM 操作去实现,而是更多的结合 CSS 去增减 class 等去实现。
另外一方面,jQuery 等库中选择 DOM 元素等时,选择器的用法和 CSS 中的选择器基本一致,所以这里总结一下 CSS 的选择器,一举多得。
CSS 选择器分类
一、 基本选择器:
1. 标签选择器(element)
匹配所有使用 element 标签的元素。
2. 类选择器(class)
匹配所有 class 属性中包含 classname 的选择器。
3. ID 选择器
匹配所有 id 属性为 idname 的元素。
二、属性选择器:
属性选择器匹配的属性名或属性值。
三、伪类选择器:
CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover 会在鼠标悬停在选中元素上时应用相应的样式。
四、组合选择器:
CSS 选择器优先级
选择器的优先级是分配给指定 CSS 声明的一个权重,它由匹配的选择器中每一种选择器类型的数值决定。当同一个元素有多个声明的时候,优先级才会有意义。
一、优先级列表:
1. 优先级为 1 (0, 0, 0, 1)
2. 优先级为 10 (0, 0, 1, 0)
3. 优先级为 100 (0, 1, 0, 0)
4. 优先级为 1000 (1, 0, 0, 0)
那么,就有如下图所示的一个顺序:
二、一些例外:
三、特别注意:
基于形式的优先级
例如,有一段 html 为:
在其上应用 css:
最终结果为:
从以上结果可以看出,尽管选择器*[id="foo"] 选择了一个ID,但是它还是作为一个属性选择器来计算自身的优先级。虽然匹配了相同的元素,但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。
无视 DOM 树中的距离
例如有一段 html:
在其上应用 css:
会被渲染成:
也就是说,虽然样式表 body h1 中的 body 比另一个中的 html 距离元素更近,但是 body html 都被同等地当做标签选择器来对待,那么自然会以后一个样式表为准。
举几个例子:
计算结果为:
计算结果为:
计算结果为:
The text was updated successfully, but these errors were encountered: