html复合选择器

最新推荐文章于 2024-06-18 13:20:32 发布

mariner_zp

最新推荐文章于 2024-06-18 13:20:32 发布

阅读量1.8k

点赞数 3

分类专栏： HTML/CSS 文章标签：关系选择器 html

本文链接：https://blog.csdn.net/weixin_41174502/article/details/104738694

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

基本选择器：标签选择器、class类名选择器(.name)、id选择器(#name)

复合选择器：交集选择器、并集选择器、后代元素选择器、子代选择器、兄弟元素选择器、相邻元素选择器

交集选择器：

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

<style>
	div.test{
		color: red;
	}
</style>
<body>
	<div class="test">hello world</div>
	<h1 class="test">hello world</h1>
</body>

输出：

在这里插入图片描述

并集选择器：

1.并集选择器是一个，号

2.任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

例子：

<style>
	p,h1,.fox{
		color:red;
	}/*这是一个并集元素选择器的例子*/
</style>
<body>
	<p>hello</p>
	<h1>world</h1>
	<span class="fox">!!!</span>
</body>

输出：

在这里插入图片描述

后代元素选择器：

后代元素选择器是一个空格，空格前后各有一个选择器。
作用：找到空格前元素的所有符合空格后选择器要求的后代元素。(儿子孙子…都是你的后代)

例子：

<style>
        .test div{
            color:red;
        }/*这是一个后代元素选择器的例子*/
    </style>
    <body>
        <div class="test">
            <div class="content">1</div>
            <ul>
                <li>
                    <div>2</div>
                </li>
                <li>3</li>
            </ul>
        </div>
    </body>

输出:

在这里插入图片描述

子元素选择器：

子元素选择器是一个>号，大于号前后各有一个选择器。
作用：找到空格前元素的所有符合空格后选择器要求的子代元素。

例子：

<style>
        .test>div{
            color:red;
        }/*这是一个子代元素选择器的例子*/
    </style>
    <body>
        <div class="test">
            <div class="content">1</div>
            <ul>
                <li>
                    <div>2</div>
                </li>
                <li>3</li>
            </ul>
        </div>
    </body>

输出：
在这里插入图片描述

相邻元素选择器：

相邻元素选择器是一个+号。
作用：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素。

例子：

  <style>
        .test>ul>li+li{
            color:red;
        }/*这是一个相邻元素选择器的例子*/
    </style>
    <body>
        <div class="test">
            <div class="content">1</div>
            <ul>
                <li>
                    <div>2</div>
                </li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </body>

输出：
在这里插入图片描述
（ul子代元素中从上到下数前面是li元素的当前li元素，则是3、4）

兄弟元素选择器（弟弟选择器）：

兄弟元素选择器是一个~号

作用：找到~号前的选择器所选中的元素紧跟其后所符合号后的选择器选中的元素。

例子：

</head>
    <style>
        .test>ul>div~li{
            color:red;
        }/*这是一个兄弟元素选择器的例子*/
    </style>
    <body>
        <div class="test">
            <ul>
                <li>1</li>
                <div>2</div>
                <li>3</li>
                <li>4</li>
                <div>
                    <li>5</li>
                </div>
                <p>6</p>
                <li>7</li>
            </ul>
        </div>
    </body>

输出：
在这里插入图片描述
好了说完这个例子，又来说一说为什么又叫弟弟选择器呢：

<style>
	ul>.joy~li{
		color:red;
	}/*这是一个兄弟元素选择器的例子*/
</style>
<body>
	<ul>
		<li >borther1</li>
		<li class="joy">borther2</li>
		<li>borther3</li>
		<li>borther4</li>
	</ul>
</body>

按道理，borther1、brother3、brother4都是brother2的兄弟元素。

下面是结果:

在这里插入图片描述

说到底，brother2还是brother1的弟弟，他只能决定他弟弟的颜色。

mariner_zp

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html复合选择器

基本选择器：标签选择器、class类名选择器(.name)、id选择器(#name)高级选择器：后代元素选择器、子代选择器、兄弟元素选择器、相邻元素选择器后代元素选择器：后代元素选择器是一个空格，空格前后各有一个选择器。作用：找到空格前元素的所有符合空格后选择器要求的后代元素。(儿子孙子…都是你的后代)例子：<style> .test div{ ...
复制链接

扫一扫

专栏目录