您的位置：首页 > Web前端 > CSS

CSS3：选择器

2016-03-01 14:53 721 查看
CSS选择器的作用是找出某类元素，以便我们使用style元素或者外部样式表对这类元素设置样式。

基本选择器

选择器含义示例描述
*选择所有元素
* {
border: thin black solid;
padding: 4px
}
选择所有元素
<元素类型>选取一个文档中该元素的所有实例
a {
border: thin black solid;
padding: 4px
}
选择a元素
.<类名>（或 *.<类名>）指定全局属性class为指定类的元素
.class2 {
border: thin black solid;
padding: 4px
}
选中指定class2的所有类型的元素
<元素类型>.<类名>指定全局属性class为指定类的特定元素
span.class2 {
border: thin black solid;
padding: 4px
}
选中指定class2的span元素
<元素类型>.<类名1>.<类名2>指定全局属性class指定了多个类的元素，即同时指定类名1和类名2的元素
span.class1.class2 {
border: thin black solid;
padding: 4px
}
选中同时指定class1和class2的sapn元素
#<id>根据全局属性id的值选择元素
#w3canchor {
border: thin black solid;
padding: 4px
}
选中id为w3canchor的元素
<元素类型>.#<id>根据指定元素类型的id值选择元素
span.#w3canchor {
border: thin black solid;
padding: 4px
}
选中id为w3canchor的span元素
[<条件>]或<元素类型>[<条件>]匹配具有指定条件的属性的元素
[href] {
border: thin black solid;
padding: 4px
}
匹配所有具有href属性的元素。见“元素属性选择器的条件”
元素属性选择器的条件：
1）[attr]：选择定义attr属性的元素，忽略属性值；
2）[attr="val"]：选择定义attr属性，且属性值为val的元素；
3）[attr^="val"]：选择定义attr属性，且属性值以字符串val大头的元素；
4）[attr$="val"]：选择定义attr属性，且属性值以字符串val结尾的元素；
5）[attr*="val"]：选择定义attr属性，且属性值包含字符串val的元素；
6）[attr~="val"]：选择定义attr属性，且属性值具有多个值，其中一个为val的元素；
7）[attr|="val"]：选择定义attr属性，且属性值为连字符分割的多个值，其中第一个为字符串val的元素。

复合选择器

选择器含义示例描述
<选择器1>,<选择器2>,<选择器3>选择器1、选择器2和选择器3匹配的所有元素的并集
a,[lang|="en"] {
border: thin black solid;
padding: 4px
}
选中a元素和具有属性lang，且属性值第一个为en的元素
<选择器1> <选择器2>匹配选择器1的元素的后代元素中匹配选择器2的元素
p span {
border: thin black solid;
padding: 4px
}
匹配p元素的后代span元素
<选择器1> > <选择器2>匹配选择器1的元素的直接后代元素（子元素）中匹配选择器2的元素
body > * > span, tr > th {
border: thin black solid;
padding: 4px
}
匹配body元素的任意子元素的span子元素，在匹配tr元素的th子元素
<选择器1> + <选择器2>匹配选择器1的元素的后续相邻的兄弟元素中匹配选择器2的元素
p + a {
border: thin black solid;
padding: 4px
}
匹配紧跟在p元素之后的a元素
<选择器1> ~ <选择器2>匹配选择器1的元素的后续兄弟元素中匹配选择器2的元素
p ~ a {
border: thin black solid;
padding: 4px
}
匹配p元素之后的a元素

伪元素选择器

选择器含义示例说明
::first-line文本内容的首行
::first-line {
border: thin black solid;
padding: 4px
}
p::first-line {
border: thin black solid;
padding: 4px
}
匹配p元素的文本的首行
::first-letter文本内容的首字母
::first-letter {
border: thin black solid;
padding: 4px
}
匹配所有文本的首字母
:before
:after		在选中元素的内容之前插入内容
在选中元素的内容之后插入内容
a:before {
content: "Click here to "
}
a:after {
content: "!"
}
分别在a元素的之前和之后插入内容

结构性伪类选择器

选择器含义示例说明
:root选择文档中的根元素，总是返回html
:root {
border: thin black solid;
padding: 4px
}
 
:first-child父元素的第一个子元素
p > span:first-child {
border: thin black solid;
padding: 4px
}
匹配p元素的第一个span子元素
:last-child父元素的最后一个子元素
:last-child {
border: thin black solid;
padding: 4px
}
匹配所有最后的子元素
:only-child匹配父元素包含的唯一子元素
:only-child {
border: thin black solid;
padding: 4px
}
匹配仅有一个子元素的元素
:only-of-type匹配父元素仅有一种类型子元素的所有子元素
:only-of-type {
border: thin black solid;
padding: 4px
}
 
使用nth-child选择器 :nth-child(n)：选择父元素的第n个子元素
:nth-last-child(n)：选择父元素的倒数第n个子元素
:nth-of-type(n)：选择父元素定义类型的第n个子元素
:nth-last-of-type(n)：选择父元素定义类型的倒数第n个子元素

UI伪类选择器

选择器含义示例说明
:enabled和:disabled选择启用或禁用的元素，该选择器不会匹配没有禁用状态的元素
:enabled {
border: thin black solid;
padding: 4px
}
匹配启用的所有元素
:checked选择由checked属性或用户勾选的单选按钮或者复选框
:checked + span {
background-color: red;
color: white;
padding: 5px;
border: medium black solid;
}
匹配勾选的元素后直接相邻的span元素
:default选择一组类似元素中的默认元素，例如：提交按钮总是表单的默认按钮
:default {
outline: medium solid red;
}
 
:value和:invalid分别匹配符合和不符合它们的输入验证要求的input元素
:invalid {
outline: medium solid red;
}
:valid {
outline: medium solid green;
}
 
:in-range
:out-of-range		匹配位于指定范围内的input元素
匹配位于指定范围之外的input元素
:in-range {
outline: medium solid green;
}
:out-of-range {
outline: medium solid red;
}
注意：仅部分浏览器支持
:required
:optional		匹配具有required属性的input元素
匹配没有required属性的input元素
:required {
outline: medium solid red;
}
:optional {
outline: medium solid green;
}
 

动态伪类选择器

选择器含义示例说明
:link
:visited		择链接元素
选择用户已访问的链接元素
:link {
border: thin black solid;
background-color: lightgrey;
padding: 4px;
color: red;
}
:visited {
background-color: grey;
color: white;
}
 
:hover鼠标悬停在其上的元素
button:hover {
border: thin black solid;
padding: 4px
}
匹配鼠标悬停在其上的button元素
:active当前被用户激活的元素，通常意味着用户即将点击该元素
:active {
border: thin black solid;
padding: 4px
}
 
:focus当前获得焦点的元素
input:focus {
border: thin black solid;
padding: 4px
}
选择获取焦点的input元素

其它伪类选择器

选择器含义示例说明
:not(<选择器>)对括号内选择器的选择取反
a:not([href*="apress"]) {
border: thin black solid;
padding: 4px
}
匹配href属性没有包含字符串apress的a元素
:empty没有子元素的元素  
:lang(<目标语言>)选择基于lang全局属性值的元素
:lang(en) {
border: thin black solid;
padding: 4px
}
匹配具有lang属性，且内容采用英文表达的元素
:targetURL片段标识符指向的元素
:target {
border: thin black solid;
padding: 4px;
color: red;
}
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 css3 浏览器 css
相关文章推荐
新的分享
章节导航