CSS选择器（一）
2016-01-06 本文已影响0人
MM_大琦
什么是CSS选择器
要使某个样式应用于特定的HTML元素，首先要找到该元素，在CSS中，执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。
CSS3选择器分类
css3选择器分类
（1）基本选择器：
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有的HTML元素 |
| E | 元素选择器 | 选择指定的类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
| selector,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
练习使用各个选择器，新建一个HTML文件，加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</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-color: #f36;
color: green;
margin-right: 5px;
}
</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 calss="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>
页面初步效果如图：
初步效果
1.1通过css3中的通配选择器来改变所有子项的背景色设置为orange
.demo *{
background: orange;
}
效果如下：
通配选择器
1.2通过ul元素选择器改变整个列表的背景色。
ul{
background: gray;
}
效果如下：
元素选择器
1.3在使用id选择器（#id）之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素，id选择器具有唯一性，在一个页面中不会同时出现id相同的属性值。在css样式中使用id选择器时，需要在id属性值的前面加上“#”号，如（#id）。
例如：通过id选择器来改变列表项中第一个和最后一个列表项的背景色和前景色。
#first{
background: lime;
color: #000;
}
#last{
background: #000;
color: lime;
}
效果如下：
id选择器
1.4类选择器是以独立于文档元素的方式来指定元素样式，使用方法与id选择器及其相似，首先HTML给需要的元素定义class属性，并为其设置属性值，其与id选择器有一个很大不同之处，“类选择器在一个页面中可以有多个相同的类名，而id选择器其id值在整个页面中是唯一的一个”。
.item{
background: green;
color: #fff;
font-weight: bold;
}
效果如下：
类选择器
由于类名在一个HTML文档中可以同时存在于不同的元素标签上，比如div可以有类名block，ul也可以由类名block，但需求有时仅是相对ul的block做样式的修改，那此时仅采用类名选择器并不能达到效果了，这时我们可以使用带有标签的类名选择器“ul.block”这样只会匹配ul元素内的block类名，其他元素的都不会匹配。
1.5群组选择器是将具有相同样式的元素分组在一起，每个选择器之间用逗号（，）隔开，这个逗号告诉浏览器，规则中包含多个不通的选择器。
未完。。。
