1> ID选择器、交叉选择器、群组选择器、子代选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <style type="text/css">
p{
color: purple;
font-size: 25px;
} li{
font-size: 25px;
line-height: 35px;
} #two{
color: red;
} /* .lanse{
color: blue;
}*/ /*交叉选择器*/
li.lanse{
color:blue;
} /*群组选择器*/
#test,.seven{
color: orange;
} /*子代选择器*/
li span{
color: pink;
} </style> </head> <body>
<!-- 下面是html的写法 -->
<font color='blue' size='3'>下面是html的写法</font>
<font color='blue' size='3'>下面是html的写法</font>
<font color='blue' size='3'>下面是html的写法</font>
<font color='blue' size='3'>下面是html的写法</font>
<font color='blue' size='3'>下面是html的写法</font>
<font color='blue' size='3'>下面是html的写法</font> <!-- 下面是css的写法 -->
<p>下面是css的写法</p>
<p>下面是css的写法</p>
<p>下面是css的写法</p>
<p>下面是css的写法</p>
<p>下面是css的写法</p> <span>我是ul外面的span标签</span> <ul>
<li>我是第1行li标签
<span>我是ul里面的span标签</span></li>
<li id="two">我是第2行li标签</li>
<li class="lanse">我是第3行li标签</li>
<li>我是第4行li标签</li>
<li class="lanse">我是第5行li标签</li>
<li id="test">我是第6行li标签</li>
<li class="seven">我是第7行li标签</li>
</ul> <p class="lanse">我是class为lanse的p标签</p> </body>
</html>
2> 子选择器、相邻选择器、属性选择器、伪类选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*子选择器*/
/*#box>p{
color:red;
}*/ /*相邻选择器*/
div+p{
color:blue;
} /*属性选择器*/
p[name]{
color:red;
} a{
font-size: 30px;
color:blue;
} /*伪类选择器*/
a:hover{
font-size: 50px;
color: red;
} #word{
width: 300px;
border: 3px solid blue;
margin: 0 auto;
} p#word:first-letter{
font-size: 50px;
color: red;
} div[name]{
color: yellow;
} </style>
</head> <body> <div name="box">我是name为box的div元素</div> <p id="word">p标签p标签p标签p标签p标签p标签</p> <a href="http://www.baidu.com">百度</a>
<br />
<br />
<br />
<div id="box">
<div id="son">
<p>我是son的p标签</p>
</div>
<p>我是box的p标签</p>
<p name="test">我是box的p标签</p>
<p>我是box的p标签</p>
</div>
</body>
</html>
3> 选择器的优先级
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{
font-size: 30px;
color: red;
} h1{
font-size: 40px;
color: orange;
}
/*有优先级*/
#title{
color: blue;
}
</style>
</head> <body>
<h1 id="title">今天是星期一</h1>
<div id="box">
<p>我是box里面的p标签</p>
<span>我是box里面的span标签</span>
</div> </body>
</html>