CSS规则的三种选择符和层叠样式规则
2016-12-09 12:35
375 查看
参考文献:《CSS设计指南》第3版
一、三种标签选择符
1.上下文选择符
根据标签的层次结构给指定的标签添加样式。
2.ID选择符
#id名字 {}
3.类选择符
.类名字 {}
4.属性名和属性值选择符
标签名[属性名] {} and 标签名[属性名=属性值]{}
二、查理版简单层叠样式规则
规则一:包含ID的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。(特指度高低顺序: I-C-E,特指度计算公式:以I-C-E三位组成三位数,数越大特指度越高。)
规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会胜出。
规则三: 设定的样式胜过继承的样式,此时不用考虑特指度(即显示设定优先)。
三、伪类
1.UI(User Interface, 用户界面)伪类
会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式。
2.结构化伪类
会在标记中存在某种结构上的关系时(如某个元素时一组元素中的第一个或最后一个),为相应元素应用CSS样式。
四、伪元素
顾名思义,伪元素就是你的文档中若有实无的元素。
五、链接标签指向当前页面中其他标签的用法。
一、三种标签选择符
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标签所在位置。
相关文章推荐
- css知多少(3)——样式来源与层叠规则
- css 权威指南笔记( 五)结构和层叠之三种样式来源
- css知多少(3)——样式来源与层叠规则
- CSS(3)-样式来源与层叠规则
- css知多少(3)——样式来源与层叠规则
- css知多少(3)——样式来源与层叠规则
- css知多少(3)——样式来源与层叠规则
- css知多少(3)——样式来源与层叠规则
- css知多少(3)——样式来源与层叠规则
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
- css 样式层叠规则
- CSS的三种样式
- CSS规则层叠的应用 css必须要注意的几点
- CSS基础1——CSS样式表及样式规则
- CSS 层叠规则
- CSS的三种样式以及他们的优先级
- html中css三种常见的样式选择器
- html css层叠样式基础(选择器的优先级)(六)
- css层叠样式的次序y
- CSS规则层叠时的优先级算法