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>
原文地址:https://www.cnblogs.com/b302/p/4505314.html