CSS提高篇(复合选择器)_『愚』的博客-程序员宅基地

技术标签: CSS  css  复合选择器  

后代选择器

在CSS选择器中通过嵌套的方式,对特殊位置的HTML标签进行声明,外层的标签写在前面,内层的标签写在后面,之间用空格分隔,标签嵌套时内层的标签成为外层标签的后代。

就是首先要符合外层标签然后还符合内层标签,这样的就可以被后代选择器修饰了

看样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div h3{
     
                color: red;
            }
        </style>
    </head>
    <body>

    <div>
            <h3>水果</h3>
            <ul>
                <li>
                    <h3>列表中的h3</h3>
                    香蕉</li>
                <li>苹果</li>
                <li>橘子</li>
                <li>菠萝</li>
            </ul>
           
            <h3>手机品牌</h2>
            <ul>
                <li>华为</li>
                <li>小米</li>
                <li>苹果</li>
                <li>联想</li>
                <li>三星</li>
            </ul>
    </div>
    <h3>div外面的h3标题</h3>
    </body>
</html>

看下图,首先红色框 div 里的所有 h3 都会被上面的后代选择器给修饰,所有在 div 范围里的 h3 都会变成红色,下面蓝色框的 h3 ,由于不在 div 里面,所以不会被修饰。

在这里插入图片描述
运行效果:
在这里插入图片描述

所以这个很好理解吧,继续往下看

交集选择器

由两个选择器直接连接构成,选中二者各自元素范围的交集 第一个必须是标签选择器第二个必须是类选择器或者ID选择器,选择器之间不能有空格,必须连续书写。

看样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h3.aa{
     
                color: red;
            }
			h3#bb{
     
				color: green;
			}
        </style>
    </head>
    <body>

    
            <h3 class="aa">水果</h3>
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>橘子</li>
                <li>菠萝</li>
            </ul>
           
            <h3>手机品牌</h2>
            <ul>
				<h3 class="aa">列表里的h3标题</h3>
                <li>华为</li>
                <li>小米</li>
                <li>苹果</li>
                <li>联想</li>
                <li>三星</li>
            </ul>
    
    <div class="aa">class为aa但是不是h3标签的情况</div>
	<h3 id="bb">第二部分为id选择器的情况</h3>
    </body>
</html>

看下图
红色的框框就是第一部分是便签选择器第二部分是类选择器的情况
绿色的框框就是第一部分是便签选择器第二部分是id选择器的情况
紫色的框框虽然类是aa但是不是h3标签,所以不会被修饰

在这里插入图片描述
运行效果:
在这里插入图片描述

这个也很好理解吧,就是交集,第一部分符合并且第二部分也符合就是可以被修饰的情况,顾名思义就是取交集。

并集选择器

多个选择器通过逗号连接而成,利用并集选择器同时声明风格相同样式
并集,只要符合其中一种就会被修饰

看样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h3,li{
     
				color: red;
			}
		</style>
	</head>
	<body>
		<h3>水果</h3>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>橘子</li>
			<li>菠萝</li>
		</ul>
		
		<h2>手机品牌</h2>
		<ul>
		    <li>华为</li>
		    <li>小米</li>
		    <li>苹果</li>
		    <li>联想</li>
		    <li>三星</li>
		</ul>
		<h3>牛哄哄的柯南</h3>
	</body>
</html>

h3,li{
color: red;
}

如下图,所有的只要是 h3 或者是 li 的都会被修饰成红色。
h2 不属于其中的任意一种,所以不会被修饰

在这里插入图片描述
运行效果:
在这里插入图片描述

效果就是这样,并集,只要是其中的一种就会被标记了,注意多个选择器通过逗号连接而成 。

写作不易,看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,右下角还有"一键三连",没错点它[哈哈]

在这里插入图片描述
加油!

共同努力!

Keafmd

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43883917/article/details/109344405

智能推荐

随便推点