CSS——派生选择器

1. 派生选择器

<style type="text/css">
		a {
			color: red;
		}
		/*派生选择器*/
		p a {
			font-size: 32px;
		}
	</style>

2. id派生选择器

<style type="text/css">
   	a {
   		color: red;
   	}
   	/*id派生选择器*/
   	#p2 a {
   		font-family: 微软雅黑;
   	}
   </style>

3. 类派生选择器

<style type="text/css">
  	a {
  		color: red;
  	}
  	/*类派生选择器*/
  	p.myclass a {
  		background: #ccc;
  	}
  </style>

4. >直接子元素

<style type="text/css">
 	a {
 		color: red;
 	}
 	/*>直接子元素*/
 	#div3>a {
 		color: blue;
 	}
 	#div3 p a {
 		color: green;
 	}
 </style>

组合演示

<div>
		我是div,<a href="#">链接一</a>
	</div>

	<p>
		我是p,<a href="#">链接二</a>
	</p>

	<p id="p2">
		我是p2,<a href="#">链接三</a>
	</p>

	<p class="myclass">
		我是p3,<a href="#">链接四</a>
	</p>

	<div class="myclass">
		我是div2,<a href="#">链接五</a>
	</div>
	<hr />

	<div id="div3">
		<a href="#">链接六</a>
		<p>我是div3,<a href="#">链接七</a></p>
	</div>