css的扩展选择器

1.关联选择器

设置嵌套标签的样式

<html>
   <head>
    <title>html示例</title>
	<style type="text/css">
		div p{
			background-color:red;

		}
	</style>
   </head>
   <body>
   		<div><p>sadfghkjkghdfsafdgf</p></div>
		<p>测试关联选择器</p>
   </body>
</html>

2.组合选择器

顾名思义也就是让不同的标签具有相同的样式

<html>
   <head>
    <title>html示例</title>
	<style type="text/css">
		div,p{
			background-color:red;
		}
	</style>
   </head>
   <body>
		<div>aaaaaaaaaaaaa</div>
		<p>bbbbbbbbbbbbbbb</p>
   </body>
</html>

3.伪元素选择器

css提供一些定义好的样式,可以拿过来直接使用。

比如:超链接标签

超链接的状态:

原始状态:  :link          鼠标悬停上面的状态:        :hover           点击::click     

<html>
   <head>
    <title>html示例</title>
	<style>
		:link{
			background-color:red;
		}
		:hover{
			background-color:blue;
		}
		:active{
			background-color:blue;
		}
		:visited{
			background-color:blue;
		}
	</style>
   </head>
   <body>
		<a href="http://www.baidu.com.cn">超链接一为了测试伪元素选择器</a>

   </body>
</html>

也就是不同的状态显示不同的内容 

猜你喜欢

转载自blog.csdn.net/ll123c/article/details/88782993
今日推荐