参考文献:《CSS设计指南》第3版
一、三种标签选择符
1.上下文选择符
根据标签的层次结构给指定的标签添加样式。
2.ID选择符
#id名字 {}
3.类选择符
.类名字 {}
4.属性名和属性值选择符
标签名[属性名] {} and 标签名[属性名=属性值]{}
<section>
<h2>An H2 Heading</h2>
<p>This is paragraph</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
</section>
多组元素选择符: h1,h2,h3 {color: red}
祖先子孙元素选择符: section p {font-size: 12px;}
父子元素选择符: article > p {font-family: helvetica}
紧邻同胞选择符+: h2 + p {font-variant: small-caps;}
一般同胞选择符~: h2 ~ a {color: red;}
通用选择符*: section * a {font-size: 1.3em;}(任何时section的
孙子元素,而非子元素会被选中。)
p * {color: red;}(p包含的所有元素的文本变成红色,边框不变。)
ID选择符: #idname {color: green;}
类选择符: .classname {color: blue;}
属性名和属性值选择符: 标签名[属性名] {} and 标签名[属性名=属性值]{}
组合选择符: section p.classname a{} section p.#idname a{}
二、查理版简单层叠样式规则
规则一:包含ID的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。(特指度高低顺序: I-C-E,特指度计算公式:以I-C-E三位组成三位数,数越大特指度越高。)
规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会胜出。
规则三: 设定的样式胜过继承的样式,此时不用考虑特指度(即显示设定优先)。
三、伪类
1.UI(User Interface, 用户界面)伪类
会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式。
eg:
a标签的伪类:
a:link { } 、a:visited { } 、a:hover { } 、a:active { } 。
声明时要按照此顺序来,否则浏览器解析时会出现问题。
有些伪类还可运用于其他标签
hover伪类: e:hover { }
focus伪类: e:focus { }
target伪类:e:target { }(如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。)
2.结构化伪类
会在标记中存在某种结构上的关系时(如某个元素时一组元素中的第一个或最后一个),为相应元素应用CSS样式。
eg:
1. e:first-child 和 e:last-child
2. e:nth-child(n) (如 li:nth-child(3)选中一组列表项中的每个第三项。)
四、伪元素
顾名思义,伪元素就是你的文档中若有实无的元素。
1.e::first-letter伪元素
指定标签中第一个字母的伪元素。
2.e::first-line伪元素
可以选中文本段落(一般情况下时段落的第一行)
3.e::before and e::after
可用于在特定元素前面或后面添加特殊内容。
五、链接标签指向当前页面中其他标签的用法。
1.<a href="#">link</a>
点击此链接,会返回页面的顶部。
2.<a href="#idname">link</a>
点击此链接,将页面指向此id标签所在位置。