摘要：规则命名惯例规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成属性和值。用于选择作为指定祖先元素后代的标签。维基百科在其引证中大量使用了伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。
1.为文档添加样式的三种方法
行内样式（写在特定 HTML 标签的 style 属性里）
嵌入样式（嵌入的 CSS 样式是放在 HTML 文档的 head 元素中）
链接样式
在创建包含多个页面的网站时，需要把样式集中在一个多带带的文件里，这个文件就叫 样式表。样式表其实就是一个扩展名为 .css 的文本文件。可以在任意多个 HTMl 页面中链接同一个样式表文件，每个页面中只需加入类似下面的一行代码即可：
2.CSS规则命名惯例除了以上三种为页面添加样式的方法，还有一种在样式表中链接其它样式表的方法，那就是应用 @import 指令。就像这样：@import url(css/styles2.css).
要注意的是， @import 指令必须出现在样式表中其他样式之前，否则 @import 引用的样式表不会被加载。
CSS 规则由 选择符 和 声明 两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性 和 值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。
对于这个基本的结构，有三种方法可以进行扩展：
多个声明包含在一条规则里
多个选择符组合在一起
多条规则应用给一条选择符
所有用于选择特定元素的选择符又分三种：
上下文选择符（基于祖先或同胞元素选择一个元素）
ID和类选择符（基于 id 和 class 属性的值选择的元素）
属性选择符（基于属性的有无和特征选择元素）
3.上下文选择符格式：标签 1 标签 2 {声明}
示例：article p {font-weight:bold;}
说明：标签2就是我们想要选择目标，而且只有在标签 1 是是其祖先元素（不一定是父元素）的情况下才会被选中。
上下文选择符，严格来讲（也就是 CSS 规范里），叫后代组合式选择符（ descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。
4.特殊的上下文选择符 4.1 子选择符 >提示：请记住，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符。
格式：标签 1 > 标签 2
示例：section > h2 {font-style:italic;}
说明：标签 2 必须是标签 1 的子元素，或者反过来说， 标签 1 必须是标签 2 的父元素。与常规的上下文选择符不同，这个选择符中的标签 1 不能是标签 2 的父元素之外的其他祖先元素。
格式：标签 1 + 标签 2
示例：h2 + p {font-variant:small-caps;}
说明：标签 2 必须紧跟在其同胞标签 1 的后面。
格式：标签 1 ~ 标签 2
示例：h2 ~ a {color:red;}
说明：标签 2 必须跟（不一定紧跟）在其同胞标签 1 后面。
格式：* {...}
示例：* {color:green;}
说明：上面示例会导致所有元素（的文本和边框）都变成绿色。
不过，一般在使用 * 选择符时，都会同时使用另一个选择符。
例如：p * {color:red;} // 这样只会把p包含的所有元素的文本变成红色。
还有一个非常有意思的用法，即用它构成非子选择符：
例如：section * a {font-size:1.3em;}
这样，任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a
的父元素是什么，没有关系。
总之，只有一个标签名的选择符会选中页面中所有相同标签的实例。而通过上下文
选择符，则可以指定标签必须具备相应的祖先或同胞。
ID 和类为我们选择元素提供了另一套手段，利用它们可以不用考虑文档的层次结构。
5.1 类属性 5.1.1 类选择符注意：可以给 id 和 class 属性设定任何值，但不能以数字或特殊符号开头。
格式：.类名
示例：.specialtext {font-style:italic;}
格式：标签名.类名
示例：p.specialtext {color:red;}
格式：.类名.类名
示例：.specialtext.featured {font-size:120%;}
说明：CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的的那个元素。如果加了空格，那就变成了“祖先/后代”关系的上下文选择符了。
5.2 ID属性提示：不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能想大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。 于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。
格式：#ID名 或 标签名#ID名
示例：#specialtext {CSS 样式声明 } 或 p#specialtext {CSS 样式声明 }
提示：ID还可以用于页内导航。 例如：Biography，注意 href 属性值开头的 # ，它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有 #，浏览器就会尝试加载 bio 目录下的默认页面了）。如果链接的 href 属性里只有一个 #，那么点击该链接会返回页面顶部。例如：Back to Top，换句话说，要写一个“返回顶部”链接，根本不需要 ID 为 # 的目标元素。
6.属性选择符 6.1 属性名选择符注意：如果暂时不知道某个 href 应该放什么 URL，也可以用 # 作为占位符，但不能把该属性留空。 因为 href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如 PHP）变量替换 #，以便动态接收来自数据库的 URL。
格式：标签名[属性名]
示例：img[title] {border:2px solid blue;}
6.2 属性值选择符提示：一般来说，人们经常给 alt 和 title 属性设定相同的值。 alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。
格式：[属性名="属性值"]
示例：img[title="red flower"] {border:4px solid green;}
说明：在 HTML5 中， 属性值的引号可加可不加，在此为了清楚起见，建议添加。
伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是 selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。
伪类可以分为两种：
UI（ User Interface，用户界面）伪类会在 HTML 元素处于某个状态时（比如鼠标
指针位于链接上），为该元素应用 CSS 样式。
结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第
一个或最后一个），为相应元素应用 CSS 样式。
针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。
Link
Visited
Hover
Active
提示：由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期效果。方便记忆：LoVe? HA! 大写字母就是每个伪类的头一个字母。
7.1.2 :focus伪类提示：一个冒号（ : ）表示伪类，两个冒号（ :: ）表示 CSS3 新增的伪元素。
表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。
例如：input:focus {border:1px solid blue;}
上面一行代码会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（ target），可以
用:target 伪类选中它。
例如：对于这个链接：More Information
位于页面的其它地方、ID 为 more_info 的那个元素就是目标。
假设该元素为这样：This is the information you are looking for.
那么，CSS规则：#more_info:target {background:#eee}
会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加灰色背景。
7.2 结构化伪类维基百科在其引证中大量使用了:target 伪类。维基百科的引证链接就是正文里那些
不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target 应用的
突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。
结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。
7.2.1 :first-child和:last-child格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}
格式：e:nth-child(n)
示例：li:nth-child(3)
说明：e 表示元素名，n 表示一个数值（也可以使用 odd 或 even）
顾名思义，伪元素就是你的文档中若有实无的元素。
8.1 ::first-letter伪元素格式：e::first-letter
示例：p::first-letter {font-size:300%;}
8.2 ::first-line伪元素提示：如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上标签，
然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。
格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
说明：选中文本段落（一般情况下是段落）的第一行。
格式：
e::before
e::after
示例：
对标记：
25
提示：如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。
因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明
性文字。
参考资料
CSS设计指南
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110964.html
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...
摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...
阅读 2458·2021-09-22 15:58
阅读 2133·2019-08-29 16:06
阅读 768·2019-08-29 14:14
阅读 2684·2019-08-29 13:48
阅读 2361·2019-08-28 18:01
阅读 1334·2019-08-28 17:52
阅读 3215·2019-08-26 14:05
阅读 1432·2019-08-26 13:50
