CSS样式的继承
-
发生在祖先和后代之间，我们为一个元素设置的样式，同时也会继承到他的后代元素上。
-
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，纸样只需设置一次即可让有的元素都有该样式。
-
注意：并不是所有的样式都会被继承，比如 背景相关的，布局相关的都不会被继承。
CSS优先级
一、什么是CSS优先级
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
比较简单易记的一种方法就是给不同选择器分配不同的值：
- id选择器默认优先级最高，其权值为100。
- class选择器、属性选择器和伪类选择器的权值为10。
- 标签选择器的优先级较低，其权值为1。
所以在比较样式的优先级时，只需统计选择符中的id、class、标签名个数，然后把对应的权值相加即可。根据结果便可得出优先级高低，选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器。
- 结果较大的优先级较高。
- 结果相同，则后定义的样式优先级较高。
- 如果样式值中含有!important，则该值优先级最高，甚至超过内联样式(慎用)。。
CSS练习网站
CSS Diner网址：
CSS-结构
<!DOCTYPE html>
<html>
<head>
<style>
css代码
</style>
</head>
<body>
</body>
</html>
CSS常用选择器
| 名字 | 功能 | 语法 |
|---|---|---|
| 元素选择器 | 根据标签名来选中指定的元素 | 标签名 |
| id选择器 | 根据元素的id（唯一）属性来选中指定的元素 | #id属性值 |
| 类选择器 | 根据元素的class属性选中指定元素 | .class属性值 |
| 通配选择器 | 选中页面中的所有元素 | * |
| 交集选择器 | 选中多个同时符合多个条件的元素 | 选择器1选择器n{}，如有元素选择器，用元素选择器开头 |
| 并集选择器 | 选择多个选择器对应的元素 | 选择器1，选择器2，选择器n |
| 子元素选择器 | 选中指定父元素的指定子元素 | 父元素>子元素 |
| 后代元素选择器 | 选中指定元素内的指定后代元素 | 祖先 后代{} |
| 相邻兄弟选择器 | 选择下一个兄弟 | 前一个+下一个{} |
| 选择下边所有的兄弟元素 | 前一个~下一个{} | |
| 序选择器 | 选中同级别中的第一个标签 div :first-child 选中div的第一个子代 |
:first-child |
| :last-child | ||
| div p:nth-child(2) selects the second p in every div | :nth-child(n) | |
| 选中同级别中的倒数第n个标签 | :nth-last-child(n) | |
| 选中父元素中唯一的子元素标签 | :only-child | |
| 同级同类型的第几个 | 选中同级别中同类型的第一个标签 | :first-of-type |
| 选中同级别中同类型的最后一个标签 | :last-of-type | |
| 选中同级别中同类型的第n个标签 | :nth-of-type(n) | |
| 选中同级别中同类型的倒数第n个标签 | :nth-last-of-type(n) | |
| 选中父元素中唯一类型的某个标签 | :only-of-type | |
| 选中同级别中的所有奇数 | :nth-child(odd) | |
| 选中同级别中的所有偶数 | :nth-child(even) | |
| x和y是用户自定义的, 而n是一个计数器, 从0开始递增 | :nth-child(xn+y) | |
| 选中同级别中同类型的所有奇数 | :nth-of-type(odd) | |
| 选中同级别中同类型的所有偶数 | :nth-of-type(even) | |
| x和y是用户自定义的, 而n是一个计数器, 从0开始递增 | :nth-of-type(xn+y) | |
| 属性选择 | Select p elements that don’t have children | p:empty |
| You can use this to select all elements that do not match selector “X”. | :not(X) | |
| selects all elements that have a value=”anything” attribute | [attribute] | |
| Attribute selectors are case sensitive, each character must match exactly. | [attribute=”value”] | |
| 选择属性值以特定字符开头的所有元素 | [attribute^=”value”] | |
| 选择属性值以特定字符结尾的所有元素 | [attribute$=”value”] | |
| 选择在任何地方都包含特定字符的属性值的所有元素 | [attribute*=”value”] | |
| 伪类选择器 | ||
| 未访问的链接 | a:link | |
| 已访问的链接 | a:visited | |
| 鼠标悬停链接或标签变色 | a:hover | |
| 已选择的链接 | a:active | |
q:lang(it)为属性值以 “en” 开头的 元素定义引号 |
:lang q:lang(en) { quotes: “~” “~”; } |
|
| 所有 CSS 伪元素 | ||
| 在每个 <p> 元素之后插入内容。 | ::after p::after |
|
| 在每个 <p> 元素之前插入内容。 | ::before p::before |
|
| 选择每个 <p> 元素的首字母。 | ::first-letter p::first-letter |
|
| 选择每个 <p> 元素的首行。 | ::first-line p::first-line |
|
| 选择用户选择的元素部分。 | ::selection p::selection |
