css高级特性

最新推荐文章于 2024-05-09 14:04:31 发布

开开心心罗非鱼

最新推荐文章于 2024-05-09 14:04:31 发布

阅读量507

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_59384581/article/details/127435294

版权

思维导图

CSS复合选择器

1.标签指定式选择器

标签指定式选择器Q又称交集选择器，由两个选择器构成，中第一个为标记选择器，第二个为
class选择器或id选择器，两个选择器之间不能有空格。

		p.special{ color:red;}    /*标签指定式选择器*/

2.后代选择器

后代选择器用来选择元素或元素组的后代，写法就是把外层标记写在前面,内层标记写在后边，中
间用空格分隔。当标记发生嵌套Q时，内层标记就成为外层标记的后代。

p strong{color:red;}     /*后代选择器*/

用于p标签下的strong标签。

3.并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器来实现。

	h2,h3,p{color:red; font-size:14px;}              /*不同标签组成的并集选择器*/
		h3,.special,#one{text-decoration:underline;}   /*标签、类、id组成的的并集选择器*/

可以用这种方式来定义选择器。

层叠性

层叠性指多种CSS样式的叠加。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css层叠性</title>
	<style type="text/css">
		div{color: #00f;}
		
		.red{color: #f0f;}
				
		p{ color: #00f;}
		
		.special{color: green;}
		
		p.special{color: red;}            /*标签指定选择器*/
		
		
	</style>
	
	</head>
	<body>
		<div class="red">css层叠性,猜猜我是什么颜色</div>
		<p>普通蓝色段落文本（蓝)</p>
		<p class="special">指定了.special类的段落文本（红）</p>
		<h1 class="special">指定了.special类的段落文本（绿）&