本文介绍了CSS中不同类型的選擇器，包括组合选择器，如使用逗号分隔多个选择器；后代选择器，如h1span用于影响h1内的span元素；子元素选择器，如h1>b>span选择直接子元素；相邻兄弟元素选择器，如h1+P对紧邻的下一个元素设置样式；属性选择器，针对具有特定属性或值的元素；以及伪类选择器，用于定义超链接的不同状态。
1、组合选择器
/*组选择器：把多个选择器组合到一起，用逗号隔开*/
h1,h2,h3,h4,h5{
color: red;
}
#mystyle1,#mystyle2{
background-color: #008000;
}
2、后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*后代选择器*/
h1 span{ /*h1中的span有效果*/
color: red;
text-decoration: underline;
}
table tr td p span{
color: green;
}
ul#list1 li span{
color: blue;
}
</style>
</head>
<body>
<h1>hello,<b><span>html</span></b></h1>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>hello,<span>java</span></p>
</td>
</tr>
</table>
<ul id="list1">
<li><span>hello1</span></li>
<li>hello2</li>
</ul>
</body>
</html>
3、 子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*子元素选择器*/
h1>b>span{
color: red;
}
table>tbody>tr>td>p{
color: #008000;
}
</style>
</head>
<body>
<h1>hello,<b><span>html</span>css</b></h1>
<table border="" cellspacing="" cellpadding="">
<tr><td><p>hello1</p></td></tr>
</table>
</body>
</html>
4、相邻兄弟元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*相邻的后一个兄弟元素有效果*/
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>hello1</h1>
<p>hello2</p> <!--这个有效果-->
<p>hello3</p>
</body>
</html>
5、 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1[align]{ /*给带align属性的h1加效果*/
color: red;
}
h1[align="left"]{ /*带属性align并且值为left的h1有效果*/
background-color: #CCCCCC;
}
p[class~="c1"]{ /*部分匹配值*/
color: red;
}
p[class][align]{ /*多属性*/
color:green;
}
</style>
</head>
<body>
<h1 align="center">hello</h1>
<h1>css</h1>
<h1 align="left">html</h1>
<p class="c1 c2">hello</p>
<p class="c1">html</p>
<p>css</p>
<p class="c2" align="center">html</p>
</body>
</html>
6、伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*伪类选择器用于超链接效果，有4种，注意要按顺序编写(后面的优先级高)！*/
a:link{ /*未访问的超链接效果*/
color: #000;
text-decoration: none;
}
a:visited{ /*超链接访问过的效果*/
color:plum;
}
a:hover{ /*鼠标在超链接上方时的效果*/
color:#000099;
/*text-decoration: underline;*/
}
a:active{ /*超链接激活时的效果*/
color: #FF0000;
}
</style>
</head>
<body>
<a href="#">首页</a>
</body>
</html>
3701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
