CSS3选择器
2017-06-04 本文已影响0人
agui526
1 CSS选择器的分类
- 基本选择器
- 层次选择器
- 伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
- 伪元素
- 属性选择器
2 基本选择器
2.1 语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配符选择器 | 选择文档中所有HTML元素 |
| E | 元素选择器 | 选择指定类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为"id"的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为"class"的任意类型的任意多个元素 |
| selector1, selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并在一起 |
2.2 案例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}
li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }
.demo *{background: orange}
ul {background:grey}
#first{background:lime;color:#000}
#last {background:#000;color:lime}
.item {background: green;color: #fff;font-weight:bold}
.item.important {background:red;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
2.3 通配符选择器（*）
通配符选择器用来选择所有的元素，当然也可以选择某个元素下的所有元素。
2.4 元素选择器（E）
2.5 ID选择器（#id）
在使用ID选择器之前要在HTML文档中给定的元素设置id属性，id在整个HTML文档中具有唯一性
2.6 类选择器（.class）
类选择器是以独立于文档元素的方式来指定元素样式。使用前需要给需要的元素设置class属性，与ID选择器的不同就是一个文档中可以有多个相同的类名。
在使用多类选择器时，要注意，如果一个多类选择器包含的类名中其中一个不存在，这个选择器讲无法找到相匹配的元素
由于类名在一个HTML文档中可以同时存在于不同的标签上，比如div上有类名block，ul上也有类名block，当仅需要对ul为block定义样式，此时采用类选择器并不能达到需要的效果，其实CSS选择器还支持带有标签的类名选择器ul.block，这将只匹配class为block的所有ul元素
2.7 群组选择器（selector1, selectorN）
将具有相同样式的元素分组在一起，每个选择器之间用逗号（,）隔开，注意这里省去逗号局变成后代选择器了。
3 层次选择器
层次选择器时通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和通用兄弟。
3.1 语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配F元素，且匹配的F元素紧接于匹配的E元素后面 |
| E~F | 通用选择器 | 选择匹配F元素，且位于匹配的F元素后的所有匹配的F元素 |
3.2 案例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
.active ~ div {background: red;}
.active + div {background: lime;}
</style>
</head>
<body>
<div class="active">1</div><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
3.3 后代选择器（E F）
选择E元素的所有后代，包括子元素、孙辈元素及更深层次的元素
3.4 子选择器（E>F）
选择E元素下的所有子元素
3.5 相邻兄弟选择器（E+F）
选择和E元素同层级且紧跟在E元素后面的元素
3.6 通用兄弟选择器（E~F）
选择E元素后面的所有兄弟元素
4 动态伪类选择器
待续。。。
