CSS3选择器
CSS3是CSS的升级版本,对比于以前的版本也多了些不同的选择器。
子元素选择器
- 概念:只能选择某元素的子元素;
- 语法格式:父元素>子元素 (father>children);
- 说明:只能是子元素,子元素以下都不行!
- 兼容:ie8+、firefox、chrome、opera、safari
相邻兄弟元素选择器
- 概念:可以选择紧接在另一个元素后的元素,而且他们具有一个相同的父元素;
- 语法:元素+兄弟相邻元素;
- 说明:直接兄弟元素!
- 兼容:ie8+ 、chrome 、safari、opera、firefox;
群组选择器
- 概念:具有相同样式的元素分组在一起,每一个选择器之间用逗号, 分隔开;
- 语法:元素1,元素2,…元素n;
- 说明:逗号是英文字符下的逗号“,”
- 兼容:ie6+、chrome、safari、opera、firefox;
属性选择器
概念:对带有指定属性的HTML元素设置样式,可以指定元素的某个属性,也可以同时指定属性名和属性值;
语法:元素[属性attribute];
兼容:ie8+、chrome、safari、opera、firefox;
- 元素[属性=“属性值”];
属性名=属性值 - 元素[属性~=“属性值”];
属性名包含属性值的元素 - 元素[属性^=“属性值”];
属性名以属性值开头的所有的元素 - 元素[属性$=“属性值”];
属性名以属性值结尾的所有的元素 - 元素[属性*=“属性值”];
属性名包含属性值的所有的元素 - 元素[属性|=“属性值”];
选择属性名=属性值或者以属性值-开头的元素
注:
要注意元素[属性~=“属性值”]和元素[属性*=“属性值”]的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<!-- 对带有指定属性的HTML元素设置样式,你可以指定元素的某个属性,或者你也可以同时同时指定属性名和属性值 -->
<style type="text/css">
a[href]{
text-decoration: none;
}
/*属性名包含属性值的元素*/
a[class~="two"]{
color: red;
}
/*a[class*="two"]{
color: yellow;
}*/
</style>
</head>
<body>
<a href="#">0-0</a>
<a class="one two" href="#1">0-1</a>
<a class="two three" href="#2">0-2</a>
<a href="#3">0-3</a>
<a href="#4">0-4</a>
<a href="#5" class="two12">0-5</a>
<a href="3#" class="twoksa">0-6</a>
<a href="4#" class="oktwo">0-7</a>
<a href="5#" class="two-sas">0-8</a>
<a href="#-6">0-9</a>
</body>
</html>
效果:
元素[属性~=“属性值”],是0-1和0-2会变成红色;
元素[属性*=“属性值”],是0-1,0-2,0-5到0-8都会变成黄色;
伪类选择器
包含:动态伪类 (锚点伪类,用户行为伪类),UI元素状态伪类,CSS3结构类,否定选择器,伪元素。
- 动态伪类
说明:用户和网站交互的时候才能体现出的动态伪类。
锚点: :link,:visited
用户行为伪类: :hover, :active,:focus - UI元素状态伪类
:enabled ,:disabled ,:checked这一类伪类称为UI元素状态伪类。
兼容:ie9+ 、chrome 、safari、 opera 、firefox - 结构类
1.:first-child
选择属于其父元素的首个子元素的每个element元素
兼容:ie8+ 、 chrome、 safari 、 opera 、 firefox
2.:last-child
属于父元素的最后一个子元素的每个element元素
兼容:ie9+ 、 chrome、 safari 、opera、 firefox4+
3.:nth-child(n)
匹配属于其父元素的第N个子元素,不论元素类型
说明:n(从0开始) , 2n ,2n+1 , 2n-1, odd奇数 , even偶数
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
4.:nth-last-child(n)
匹配属于其父元素的第n个子元素,不论元素的类型,从最后一个开始计算
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
5.:nth-of-type()
匹配属于父元素的特定类型第N个子元素的每个元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
6.:nth-last-of-type(n)
匹配属于父元素的特定类型第N个子元素的每个元素,从最后一个子元素开始计算
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
7.:first-of-type
匹配属于父元素的特定类型第N个子元素的首个子元素的每个元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox
8.:last-of-type
匹配属于父元素的特定类型第N个子元素的最后一个子元素的每个元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox
9.:only-child
匹配父元素的唯一子元素的每个元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox
10.:only-of-type
匹配属于父元素的特定类型的唯一子元素的每个元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
11.empty
匹配没有子元素(包括文本节点)的每个子元素
兼容:ie9+ 、 chrome 、 safari 、 opera 、firefox4+
注: type和child的区别
type --指定元素类型;
child–不限制元素类型;
-
否定选择器(:not)
概念:选择器匹配非指定元素/选择器的每个元素 – 表示除了这个元素,其他都可以选中;
语法:父元素:not(子元素/子选择器);
兼容性:ie9+ -
伪元素选择器
概念:CSS伪元素用于向某些选择器设置特殊效果;
语法格式: 元素::伪元素;
兼容:ie9+ 、 chrome 、safari 、 opera 、 firefox
1.::first-line
对第一行文本进行格式化
注:只能用于块状元素
2.::first-letter
用于向文本的首字母设置特殊样式
注:只能用于块状元素
3.::before
在元素的内容前面插入新内容
常用content配合使用
特点:第一个子元素/行级元素内容/通过content写入
4.::after
内容之后插入新内容
常用于content配合使用
多用于清除浮动
5.::selection
用于设置浏览器中选中文本后的样式设置
兼容:ie9+ 、 火狐浏览器需加-moz-前缀