Table of Contents generated with DocToc
See the Pen FEND_Selectors by Li Xinyang (@li-xinyang) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>选择器可被看做表达式,通过它可以选择相应的元素并应用不同的样式。
- 简单选择器
- 元素选择器
- 组合选择器
简单选择器可组合使用。
<div>
<p>Sample Paragraph</p>
<p>Sample Paragraph</p>
<p>Sample Paragraph</p>
</div>
<style type="text/css">
p {
color: blue;
}
</style>
.className
以 .
开头,名称可包含字母,数字,-
,_
,但必须以字母开头。它区分大小写并可出现多次。
<div>
<p>Sample Paragraph</p>
<p class="special bold">Sample Paragraph</p>
<p>Sample Paragraph</p>
</div>
<style type="text/css">
p {
color: blue
}
.special {
color: orange;
}
.bold {
font-weight: bold;
}
</style>
#idName
以 #
开头且只可出现一次,其命名要求于 .className
相同。
<div>
<p id="special">Sample Paragraph</p>
</div>
<style type="text/css">
#special {
color: red;
}
</style>
<div>
<p>Sample Paragraph</p>
<p>Sample Paragraph</p>
</div>
<style type="text/css">
* {
color: blue;
}
</style>
[attr]
或 [attr=val]
来选择相应的元素。#nav{...}
既等同于 [id=nav]{...}
。IE7+
[attr~=val]
可选用与选择包含 val
属性值的元素,像class="title sports"
与 class="sports"
。.sports{...}
既等同于 [class~=sports]{...}
IE7+
[attr|=val]
可以选择val
开头及开头紧接-
的属性值。IE7+
[attr^=val]
可选择以val
开头的属性值对应的元素,如果值为符号或空格则需要使用引号 ""
。IE7+
[attr$=val]
可选择以val
结尾的属性值对应的元素。IE7+
[attr*=val]
可选择以包含val
属性值对应的元素。IE7+
<div>
<form action="">
<input type="text" value="Xinyang" disabled>
<input type="password" placeholder="Password">
<input type="button" value="Button">
</form>
</div>
<style type="text/css">
[disabled] {
background-color: orange;
}
[type=button] {
color: blue;
}
</style>
常用伪类选择器:
:link
IE6+:visited
IE7+:hover
IE6中仅可用于链接:active
IE6/7中仅可用于链接:enabled
IE9+:disabled
IE9+:checked
IE9+:first-child
IE8+:last-child
IE9+:nth-child(even)
可为odd
even
或数字 IE9+:nth-last-child(n)
n
从 0 开始计算 IE9+:only-child
仅选择唯一的元素 IE9+:only-of-type
IE9+:first-of-type
IE9+:last-of-type
IE9+:nth-of-type(even)
IE9+:nth-last-of-type(2n)
IE9+
不常用伪类选择器:
:empty
选中页面中无子元素的标签 IE9+:root
选择 HTML 根标签 IE9+:not()
参数为一般选择器 IE9+:target
被锚点选中的目标元素 IE9+:lang()
选中语言值为某类特殊值的元素 IE7+
NOTE:请在使用时查找文档
<div>
<a href="http://sample-site.com" title="Sample Site">Sample Site</a>
</div>
<style type="text/css">
/* 伪类属性定义有顺序要求! */
a:link {
color: gray;
}
a:visited {
color:red;
}
a:hover {
color: green;
/* 鼠标悬停 */
}
a:active {
color: orange;
/* 鼠标点击 */
}
</style>
注意与伪类学则器的区分。
::first-letter
IE6+::first-line
IE6+::before{content: "before"}
需与content
一同使用 IE8+::after{content: "after"}
需与content
一同使用 IE8+::selection
被用户选中的内容(鼠标选择高亮属性)IE9+ Firefox需用-moz
前缀
- 后代选择器
.main h2 {...}
,使用 - 子选择器
.main>h2 {...}
,使用>
表示 IE7+ - 兄弟选择器
h2+p {...}
,使用+
表示 IE7+h2~p {...}
,使用~
表示(此标签无需紧邻)IE7+
<style type="text/css">
/* 下面两组样式声明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h1, h2, h3 {color: red;}
</style>
子元素继承父元素的样式,但并不是所有属性都是默认继承的。通过文档中的 inherited: yes
来判断属性是否可以自动继承。
自动继承属性:
- color
- font
- text-align
- list-style
- ...
非继承属性:
- background
- border
- position
- ...
CSS Specificity Calculator 可以在这里找到。更多关于 CSS 优先级别的信息可以在这里找到(英文)。
计算方法:
- a = 行内样式
- b = id 选择器的数量
- c = 类、伪类的属性选择器的数量
- d = 标签选择器和伪元素选择器的数量
NOTE:从上到下优先级一次降低,且优先级高的样式会将优先级低的样式覆盖。大致公式(并不准确)如下。
value = a * 1000 + b * 100 + c * 10 + d
- 改变样式声明先后顺序
- 提升选择器优先级
!important
(慎用)
层叠为相同属性根据优先级覆盖,如优先级相同则后面会覆盖前面的属性,而不同属性则会合并。