从零开始学HTML&&CSS&&JavaScript（五)——CSS选择器

CSS选择器

1.元素选择器

html代码如下：

<span>hello!</span>

css代码如下：

/*元素选择器*/
span{
	font-size:20px;
	color: #868686;
}

页面效果如下:

2.属性选择器

html代码如下：

		<div>没有任何属性的div元素</div>
		<div id="a">带 id属性的div元素</div>
		<div id="zzxx">id 属性值包含xx子字符串的div元素</div>
		<div id="xxyy">id 属性值以xx开头的div元素</div>
		<div id="xx">id 属性值为xx的div元素</div>

css代码如下：

/*对所有div元素都起作用的css样式*/
div {
width: 300px ;
height: 30px;
background-color: #eee;
border:1px solid black;
padding:10px;
}
/*对有id属性的div元素起作用的Css样式*/
div[id] {
background-color: #aaa;
}
/*对有id属性值包含xx的div元素起作用的Css样式*/
div[id*=xx] {
background-color :#999 ;
}
/*对有id属性值以xx开头的div元素起作用的Css样式*/
div[id^=xx] {
background-color :#555;
color:#fff ;
}
/*对有id属性值等于xx的div元素起作用的css样式*/
div[id=xx] {
background-color: #111;
color:#fff ;
}

页面效果如下:

3.id选择器

html代码如下：

		<p id="aa">id 属性值为aa的p元素</p>
		<p id="zz">id 属性值为zz的p元素</p>

css代码如下：

#aa{
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid #999999;
}

/*对id为zz的p元素起作用的Css样式*/
p#zz{
	width: 200px;
	height: 100px;
	border: 1px solid #999999;
}

页面效果如下:

4.class选择器

html代码如下：

		<p class="aa">class 属性值为aa的div元素</p>
		<p class="zz">class 属性值为aa的div元素</p>
		

css代码如下：

.aa{
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid #999999;
}
/*对class为zz的p元素起作用的Css样式*/
p.zz{
	width: 200px;
	height: 100px;
	border: 1px solid #999999;
}		

页面效果如下:

5.包含选择器

html代码如下：

		<div >
			<a href="#">hahaaa</a>
			<p><a href="#">hahaaa</a></p>
		</div>

css代码如下：

div a{
	text-decoration: none;
	font-size: 25px;
	color:#B6B6B6;
}

页面效果如下:

6.子选择器

html代码如下：

		<div >
			<a href="#">hahaaa</a>
			<p><a href="#">hahaaa</a></p>
		</div>

css代码如下：

div>a{
	text-decoration: none;
	font-size: 25px;
	color:#B6B6B6;
}

页面效果如下:

7.兄弟选择器

html代码如下：

		<div>
			<div class="long">轻量级Java EE企业应用实战</div>
			<div id="android">疯狂 Android讲义</div>
			<p class="long">经典 Java EE企业应用实战</p>
			<div class="1ong">JavaScript 权威指南</div>
		</div>

css代码如下：

/*匹配id为android的元素后面、class属性为long的兄弟节点*/
#android~.long{
	height: 80px;
	width: 200px;
	border: 1px solid red;
	display: block;
	font-size: 30px;
}

页面效果如下:

8.组合选择器

html代码如下：

		<div>
			<div class="long">轻量级Java EE企业应用实战</div>
			<div id="android">疯狂 Android讲义</div>
			<p class="long">经典 Java EE企业应用实战</p>
			<div class="1ong">JavaScript 权威指南</div>
		</div>

css代码如下：

/*匹配id为android的元素和class属性为long的元素*/
#android,.long{
background- color: red;
}

页面效果如下: