【web初步】复合选择器

最新推荐文章于 2022-10-23 00:30:41 发布

xcdq

最新推荐文章于 2022-10-23 00:30:41 发布

阅读量350

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/xcdq_aaa/article/details/105366926

版权

web 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

可以更准确更精细的选择目标元素标签

后代选择器

选择元素或元素组的子孙后代
把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。
包含选择器通过空格连接两个简单的选择器，前面选择器表示包含的对象，后面选择器表示被包含的对象。

<style>
    #red p{
        color:red;
    }
</style>

<body>
	<div class="red">
        <p>aaaaa </p>
    </div>
    
</body>

能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素
子选择器使用尖角号（>）连接两个简单的选择器，前面选择器表示包含的父对象，后面选择器表示被包含的子对象。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
优点：相对后代选择器，匹配的范围更小，从层级结构上看，匹配目标更明确。
缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构。

<style>
    div>p{
        color:red;
    }
</style>

<body>
    <div>
        <p>aaaaa </p>
    </div>
	<div>
        <p>aaaaa </p>
    </div>
    
</body>

交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
第一个为标签选择器，第二个为class选择器
两个选择器之间不能有空格，如h3.special。

并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器
分组选择器使用逗号（,）连接两个简单的选择器，前面选择器匹配的元素与后面选择器匹配的元素混合在一起作为分组选择器的结果集。
并集选择器通常用于集体声明

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one（标签选择器class选择器）
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header

xcdq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【web初步】复合选择器

可以更准确更精细的选择目标元素标签后代选择器选择元素或元素组的子孙后代把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。 .class h3{color:red;font-size:16px;}能选择任何包含在内的标签。子元素选择器子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素其写法就是把父级标签写在前面，子...
复制链接

扫一扫