目录
第二章 选择器
- 元素选择器
- 选择器分组
- 通配选择器
- 多类选择器
- 属性选择器
- 根据具体属性值选择
- 根据部分属性值选择
- 子串匹配属性选择器
- 特定属性选择类型
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 伪类选择器
- 伪元素选择器
第三章 结构和层叠
- 特殊性
- 重要性
- 继承（继承父样式）
- 层叠
第四章 值和单位
第二章 选择器
- h1 {color:red; background:yellow;}
image
- 元素选择器
- p {color: red}
- 选择器分组
- 假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
p, h2{color: greenyellow}
- 通配选择器
- 要让一个页面的所有元素的color值都变成红色，如下写法；
* {color: red;}
- 多类选择器
.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>
- 属性选择器
- 简单属性选择器
- 可以只对有 href 属性的锚（a 元素）应用样式，看（示例1）：
- 为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写看（示例2）：
- 简单属性选择器
/*示例1*/
a[href] {color:red;}
/*示例2*/
a[href][title] {color:red;}
- 根据具体属性值选择
- 假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
- 根据具体属性值选择
a[href="https://www.taobao.com"]{color:red;}
- 根据部分属性值选择
- 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
- 根据部分属性值选择
p[class~="important"] {color: red;}
- 子串匹配属性选择器
- [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
- [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
- [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
- 子串匹配属性选择器
- 特定属性选择类型
*[lang|="en"] {color: red;}
- 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p> /*匹配*/
<p lang="en-us">Greetings!</p> /*匹配*/
<p lang="en-au">G'day!</p> /*匹配*/
<p lang="fr">Bonjour!</p> /*不匹配*/
<p lang="cy-en">Jrooana!</p> /*不匹配*/
- 后代选择器
- 如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
-
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有 em 元素：
图片.png
-
-
子元素选择器
- 与后代选择器相比，子元素与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
- 这个规则会把第一个 p下面的两个 em元素变为红色，但是第二个 h1 中的 em不受影响：
p>em {color: red;}
<p>This is <em>very</em><em>very</em> important.</p>
<p>This is <italic><em>very</em><em>very</em></italic> important.</p>
- 相邻兄弟选择器
- 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
h1 + p {margin-top:50px;}
- 伪类选择器
- :active 向被激活的元素添加样式（按住鼠标左键时）。 1
- :focus 向拥有键盘输入焦点的元素添加样式。 2
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
- :link 向未被访问的链接添加样式。 1
- :visited 向已被访问的链接添加样式。 1
- :first-child 向元素的第一个子元素添加样式。 2
- :lang 向带有指定 lang 属性的元素添加样式。 2
- 伪元素选择器
- :first-letter 向文本的第一个字母添加特殊样式。 1
- :first-line 向文本的首行添加特殊样式。 1
- :before 在元素之前添加内容。 2
- :after 在元素之后添加内容。 2
第三章 结构和层叠
- 特殊性
- 选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分：
- 对于选择器中给定的各个【ID属性值】加 0，1，0，0
- 对于选择器中给定个各个类【属性值】，【属性选择】 或 【伪类】加 0，0，1，0
- 选择器中给定个各个【元素】和【伪元素】加 0，0，0，1
- 【结合符】和【通配符】没有任何贡献
- 选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分：
- 重要性
- 有时，某个声明很重要，那么可以在一个声明的最后，在分号之前加入“!important” , 比行内元素权重还高。
p {border:1px solid red !important; font-size:50px;}
- 层叠
- !important优先级最高 > 权重计算 > 声明顺序
- 声明权重有5级，权重从大到小依次为：
- 1、读者的重要声明
- 2、创作人员的重要声明
- 3、创作人员的普通声明
- 4、读者的正常声明
- 5、用户代理的声明
