简介CSS中的各种选择符
2015-07-17 18:58
639 查看
类型,类和ID选择器
带有空格的字体名称要用''引起来
对选择器分组可使同一规则适用于多个选择器,例子如下
选项的优先级
类型名与类名中间不应有空格 div.btn-success
通用选择器*,适用于文档所有元素
后代选择器
万万牢记,上下文选择符以空格作为分隔符,而分组选择符则以逗号作为分隔符,不要弄混。
子选择符>
同胞选择符~和+
section ~ p {
font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必须紧跟section
非子选择符
ID选择器
属性选择器
标签名[属性="属性值"]
伪类选择器:动态事件,状态改变
UI伪类
链接伪类
Link。此时,链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
focus伪类——鼠标放在上面
target伪类
结构化伪类
first-child 一组同胞元素的第一个
last-child
nth-child(3) 一组同胞元素的第三个
伪元素——似有实无的元素
first-letter
first-line
before 和 after
继承和层叠
浏览器默认样式表
用户样式表
作者链接样式表(按照它们链接到页面的先后顺序)
作者嵌入样式
作者行内样式
越后面优先级越高
规则一:包含 ID 的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。
规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会胜出。
规则三:设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。下面简单解释一下规则三。比如下面的标记
Inheritance is weak in the Cascade
和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2(高特指度)
会导致单词“weak”变成蓝色,因为它从父元素 p 那里继承了这个颜色值。
但是,只要我们再给 em 添加一条规则
em {color:red;}
0 - 0 - 1 (低特指度)
em 就会变成红色。因为,虽然它的特指度低(0-0-1),但 em 继承的颜色值,会被为它明确(显式)指定的颜色值覆盖,就算(隐式)遗传该颜色值的规则的特指度高(2-0-2)也没有用。
带有空格的字体名称要用''引起来
对选择器分组可使同一规则适用于多个选择器,例子如下
th,td { padding:0 10px 00; }
选项的优先级
h1 { font-family:'Times New Roman',serif; } //先选用前者,没有前者,再使用后者
类型名与类名中间不应有空格 div.btn-success
通用选择器*,适用于文档所有元素
* { font-family:Arial; }
后代选择器
div.planet table td { padding:0 10px 0 0; } //是类为planet的div元素的后代table的后代的td样式
万万牢记,上下文选择符以空格作为分隔符,而分组选择符则以逗号作为分隔符,不要弄混。
子选择符>
section > p{ font-style:Italic; } //section的子元素p
同胞选择符~和+
section ~ p {
font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必须紧跟section
非子选择符
selection * a { ***; } //所有是selection元素孙子的a元素
ID选择器
属性选择器
标签名[属性="属性值"]
img[title="hh jj"]{...}
伪类选择器:动态事件,状态改变
a:visited { color:mangenta; } //被访问过的链接
UI伪类
链接伪类
Link。此时,链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
focus伪类——鼠标放在上面
input:focus {border:1px solid blue;}
target伪类
<a href="#more_info">More Information</a> //位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的: <h2 id="more_info">This is the information you are looking for.</h2> //那么,如下 CSS 规则 #more_info:target {background:#eee;}
结构化伪类
first-child 一组同胞元素的第一个
last-child
nth-child(3) 一组同胞元素的第三个
伪元素——似有实无的元素
first-letter
first-line
before 和 after
p.age::before {content:"Age: ";} p.age::after {content:" years.";} //在类为age的p元素前面增加一段Age: p::first-letter {font-size:300%;} //放大p的第一个字母
继承和层叠
浏览器默认样式表
用户样式表
作者链接样式表(按照它们链接到页面的先后顺序)
作者嵌入样式
作者行内样式
越后面优先级越高
规则一:包含 ID 的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。
规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会胜出。
规则三:设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。下面简单解释一下规则三。比如下面的标记
Inheritance is weak in the Cascade
和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2(高特指度)
会导致单词“weak”变成蓝色,因为它从父元素 p 那里继承了这个颜色值。
但是,只要我们再给 em 添加一条规则
em {color:red;}
0 - 0 - 1 (低特指度)
em 就会变成红色。因为,虽然它的特指度低(0-0-1),但 em 继承的颜色值,会被为它明确(显式)指定的颜色值覆盖,就算(隐式)遗传该颜色值的规则的特指度高(2-0-2)也没有用。
相关文章推荐
- andrioid——checkbox勾选按钮自定义样式
- CSS中值得记住的一些技巧
- ios 改变导航返回按钮的字体样式以及背景图片
- 基于display:table的CSS布局让HTML元素和像table一样
- CSS的一些必记属性整理
- iOS 重新定义cell的分割线样式
- css中background背景属性概述
- 详解 CSS 属性 - 伪类和伪元素的区别
- sass转换为css
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- 响应式布局框架 Pure-CSS 5.0 示例中文版-中
- 响应式布局框架 Pure-CSS 5.0 示例中文版-下
- 响应式布局框架 Pure-CSS 5.0 示例中文版-上
- CSS3 改变空格作用 -webkit-nbsp-mode 去掉点击框 -webkit-tap-highlight-color
- css在360浏览器的兼容问题
- QTreeWidget样式设置大全(一)
- CSS3实现小黄人动画
- 关于CSS的布局:position属性
- CSS-定位
- CSS中设置margin:0 auto; 水平居中无效的原因分析