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>