CSS样式说明

a.hover            表示所有class为hover的a标签

a:hover            表示给a标签设置鼠标滑过的样式

.hover  a           表示class为hover元素内部的a标签

.hover,a            表示所有class为hover的标签和所有a标签

li > a                表示父元素为li的所有a标签

li + a                表示选取li元素之后紧挨(不是内部)的a标签

 

<!DOCTYPE html>
<html>
<head>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>欢迎来到我到的主页</h1>

<div>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<p>我的样式不会改变。</p>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<style>
div p
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>欢迎来到我到的主页</h1>

<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>欢迎来到我到的主页</h1>

<div>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<div>
<span><p>我的样式不会改变。</p></span>
</div>

</body>
</html>

 

posted @ 2015-05-15 10:41  萍踪侠影B302  阅读(136)  评论(0编辑  收藏  举报