第二章始

目录

第二章 选择器

• 元素选择器
• 选择器分组
• 通配选择器
• 多类选择器
• 属性选择器
• 根据具体属性值选择
• 根据部分属性值选择
• 子串匹配属性选择器
• 特定属性选择类型
• 后代选择器
• 子元素选择器
• 相邻兄弟选择器
• 伪类选择器
• 伪元素选择器

第三章 结构和层叠

• 特殊性
• 重要性
• 继承（继承父样式）
• 层叠

第四章 值和单位

---

第二章 选择器

• 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
    • 【结合符】和【通配符】没有任何贡献

• 重要性
  • 有时，某个声明很重要，那么可以在一个声明的最后，在分号之前加入“!important” , 比行内元素权重还高。

p {border:1px solid red !important; font-size:50px;}

• 层叠
  • !important优先级最高 > 权重计算 > 声明顺序
  • 声明权重有5级，权重从大到小依次为：
    • 1、读者的重要声明
    • 2、创作人员的重要声明
    • 3、创作人员的普通声明
    • 4、读者的正常声明
    • 5、用户代理的声明

---

---