css之复合选择器
|
133
|
前端
|

2465 字
|
11 分钟

前言

我们在入门篇了解到一些简单选择器，这一篇就让我们见识一些复合选择器吧！

同时由于展示方便，此处我们采用内部样式展示代码。

正文

所谓复合，就是把简单选择题进行组合，就形成是复合选择器。

交集选择器

所谓交集，说白了就是一个字——且。

话不多说我们先上栗子

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>复合选择器</title>
     <style>
         .chicken {
             color: gold;
         }
         .beauty {
             color: yellow;
         }
         p.beauty {
             color: red;
         }
     </style>
 </head>
 <body>
     <h2 class="chicken">我家鸽鸽</h2>
     <h2 class="beauty">一眼丁真</h2>
     <hr>
     <p class="beauty">小鸡坤坤</p>
     <p class="beauty">小猪佩奇</p>
 </body>
 </html>

我们可以看到捏，p是个元素选择器，.beauty是个类选择器，把两个串在一起就成了交集选择器，也就是p元素且class=beauty的元素表示的是红色，让我们看看效果。

image-20250125110501576

这里注意哦，在交集选择器里面，只要有元素选择器，元素选择器一定要在前面，不能放在后面哦，如果放在后面就变成了.beautyp,这就变成另一个类选择器了捏。

既然两个选择器复合成交集选择器，那么三个选择器可以吗，我们来试一试

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>复合选择器</title>
     <style>
         .chicken {
             color: gold;
         }
         .beauty {
             color: yellow;
         }
         p.beauty#caixukun {
             color: red;
         }
     </style>
 </head>
 <body>
     <h2 class="chicken">我家鸽鸽</h2>
     <h2 class="beauty">一眼丁真</h2>
     <hr>
     <p class="beauty" id="caixukun">小鸡坤坤</p>
     <p class="beauty">小猪佩奇</p>
 </body>
 </html>
image-20250125110936329

目标达成捏

虽然id选择器可以作为一个交集的条件，但是我们一般都不用捏，因为id本身就具有唯一性，用交集为啥不用id选择器捏，能一步到位，何必画蛇添脚捏。

而且交集里面可以结合多个条件，但是也不能同时用两个元素捏，因为不存在，但是类选择器可以捏，因为我们可以用两个类名形成一个交集。

 <h2 class="beauty chicken">坤坤丁真</h2>

上面就改成

 .beauty.chicken{
     color: red;
 }

当然最常用的还是元素+类的交集选择器

并集选择器

简单一个字概括就是——或

咱们直接上栗子

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>并集选择器</title>
     <style>
         .niganma {
             color: gold;
         }
 ​
         .beauty {
             color: rgb(32, 183, 234);
         }
         .chicken {
             color: rgb(214, 188, 43);
         }
 ​
         .pig {
             color: rgb(227, 13, 206);
         }
     </style>
 </head>
 ​
 <body>
     <h2 class="niganma">我家鸽鸽</h2>
     <h2 class="beauty">一眼丁真</h2>
     <h2>塌房某人</h2>
     <hr>
     <p class="chicken">小鸡坤坤</p>
     <p class="pig">小猪佩奇</p>
     <p id="caixukun">你干嘛，哎呦~</p>
 </body>
 ​
 </html>

只加了字体颜色好像有点单调，我想再美化一下，我该怎么办捏，当然可以一个一个增加样式，但是好像有点麻烦，懒得搞怎么办捏，这时并集选择器就派上用场了

 .beauty,
 .chicken,
 .niganma,
 .pig{
     font-size: 40px;
     background-color: gray;
     width: 200px;
 }

我们把不同选择器用,连接就能表示或的条件，这也就变成了一个并集选择器，为了美观捏，在每个,后面敲一个回车表示分割，这样更清晰捏。

注意最后一个选择器后面不要加逗号哦。

当然，并集选择器并没有什么特别的要求，我们可以把简单选择器往里面加

 #caixukun,
 .beauty,
 .chicken,
 .niganma,
 .pig{
     font-size: 40px;
     background-color: gray;
     width: 200px;
 }

看看效果

image-20250125115446840

目标达成。

注意

并集选择器通常竖着写，且任何形式的选择器都可以作为并集选择器的一部分，通常用于集体生命，可以缩小样式表体积。

后代选择器

讲选择器之前，我们先了解一下HTML元素之间的关系，有点像人类社会的关系，还是很好理解的。

父元素：直接包裹某个元素的元素就是该元素的父元素

子元素：被父元素直接包含的元素就是该元素的子元素

注意：子元素和父元素是相对的并不是绝对的。

祖先元素：父亲的父亲······一直往外找都是祖先

后代元素：儿子的儿子······一直往里找都是后代

兄弟元素：具有相同父元素的元素，互为兄弟元素

这些概念如果不能理解的话，我们一边学选择器一边来理解吧

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>后代选择器</title>
     <style>
 ​
     </style>
 </head>
 ​
 <body>
     <u1>
         <li>唱</li>
         <li>跳</li>
         <li>rap</li>
         <li>篮球</li>
         <div>
             <li>只因</li>
         </div>
     </u1>
     <hr>
     <o1>
         <li>你干嘛</li>
         <li>哎呦</li>
         <li>只因你太美</li>
     </o1>
 </body>
 ​
 </html>

我要把<ul>的<li>元素全部变成红色，这里又可以用后代选择器 了，我们在<style>标签里面加入后代选择器吧

  <style>
      ul li{
          color: red;
      }
 </style>

后代选择器就是在父类和子类直接加空格来表示。

image-20250125184637222

欸只因怎么也变红了捏，原来啊，后代选择器会的范围的所有的后代，不管是子辈还是孙子辈，都会覆盖哦。

下面我们来升级改造一下代码

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>后代选择器</title>
     <style>
         ul li{
             color: red;
         }
         ol li{
             color: blue;
         }
     </style>
 </head>
 ​
 <body>
     <ul>
         <li>唱</li>
         <li>跳</li>
         <li>rap</li>
         <li>
             <a href="#">篮球</a>
         </li>
     </ul>
     <hr>
     <ol>
         <li>你干嘛</li>
         <li>哎呦</li>
         <li>
             <a href="#">只因你太美</a>
         </li>
     </ol>
 </body>
 ​
 </html>

我们现在要把篮球文字变成橙色，把只因你太美变成灰色吧

 ul li a {
     color: orange;
 }
 ol li a {
     color: green;
 }

这也就说明了捏，后代选择器可以写出很多的层级，子子孙孙无穷匮也。

上面也只是尝试了元素选择器，那么类选择器可不可以捏，我们上代码看效果。

 <ol class="fensi">
    <li>别黑我家鸽鸽</li>
 </ol>
 .fensi li{
             color: green;
 }

把上面两行代码分别插入之后，看看效果

image-20250125191046394

这样也是可以的捏，当然id选择器也是可以的，甚至我们可以把交并集选择器放进去组合都是可以的捏，这里就不做实现啦。

注：结构也要复合HTML的嵌套要求，例如：不能<p>里面嵌套<h1>~<h6>再找父代子代。

子代选择器

话不多说先上栗子

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子代选择器</title>
     <style>
 ​
     </style>
 </head>
 ​
 <body>
     <div>
         <a href="#">原神</a>
         <a href="#">崩坏三</a>
         <a href="#">崩坏星穹铁道</a>
         <p>
             <a href="#">绝区零</a>
         </p>
     </div>
 </body>
 ​
 </html>

我要把原神、崩坏三、崩坏星穹铁道变成蓝色，我该怎么办捏，如果用后代选择器，好像要改不少东西捏，这里我们就要用子代(只是指儿子)选择器了。

那么我们该怎么写捏，直接上代码

 div>a
 {
     color: red;
 }
image-20250125193336577

目标达成捏

那我们再让绝区零变成灰色吧

 div>p>a{
     color: rgb(133, 133, 135);
 }
image-20250125193930608

目标达成捏。

我们再让代码复杂一点

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子代选择器</title>
     <style>
         div>a{
             color: red;
         }
         div>p>a{
             color: rgb(133, 133, 135);
         }
     </style>
 </head>
 ​
 <body>
     <div>
         <a href="#">原神</a>
         <a href="#">崩坏三</a>
         <a href="#">崩坏星穹铁道</a>
         <p>
             <a href="#">绝区零</a>
             <div>
                 <a href="#">未定事件簿</a>
             </div>
         </p>
     </div>
 </body>
 ​
 </html>

我们来猜一猜未定事件簿是什么颜色捏。

红色？黑色？灰色？

我们来看看结果

image-20250125194538961

为什么是红色捏。原来是div>a的选择器选择的是所有子代，只要是在<div>标签之下的子代，都应该是红色。

当然这里不仅仅只是元素选择器，类选择器和id选择器当然也是可以的，甚至复合选择器都是可以的，这里就不做演示啦。

但是我们来复杂一个小小的栗子。

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子代选择器</title>
     <style>
         div>a{
             color: red;
         }
         div>p>a{
             color: rgb(133, 133, 135);
         }
         .girlgame>a{
             color: charcoter;
         }
         /*.girlgame>a*/
         /* div.girlgame>a */
         /* div .girlgame>a */
     </style>
 </head>
 ​
 <body>
     <div>
         <a href="#">原神</a>
         <a href="#">崩坏三</a>
         <a href="#">崩坏星穹铁道</a>
         <p>
             <a href="#">绝区零</a>
             <div class="girlgame">
                 <a href="#">未定事件簿</a>
             </div>
         </p>
     </div>
 </body>
 ​
 </html>

为什么被注释掉的三个选择器效果是一样的捏，这个答案就留给大家去思考喽。

兄弟选择器

我们以及学了那么多选择器了，这里，我们就直接上代码吧

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>兄弟选择器</title>
     <style>
         div+p {
             color: red;
         }
     </style>
 </head>
 ​
 <body>
     <div>形形色色的大一新生</div>
     <p>绩点大佬</p>
     <p>技术大牛</p>
     <p>竞赛大佬</p>
     <p>艺术大师</p>
 </body>
 ​
 </html>

这里的+可以理解为紧紧相邻的，在代码中值得就是绩点大佬这一行

image-20250125211720716

那么我们来换一下位置

     <p>绩点大佬</p>
     <div>形形色色的大一新生</div>
     <p>技术大牛</p>
     <p>竞赛大佬</p>
     <p>艺术大师</p>

我们猜猜有哪些变红了捏

image-20250125211910619

原来捏，兄弟选择器只会往下找，不会往上看，所以技术大牛变红了捏

我们可以理解为去找睡在我下铺的兄弟

我们再来变一下

     <div>形形色色的大一新生</div>
     <h1>绩点大佬</h1>
     <p>技术大牛</p>
     <p>竞赛大佬</p>
     <p>艺术大师</p>

再来猜猜结果是什么样子捏

image-20250125212126282

欸嘿，没有一个变红了哦。是不是你会觉得技术大牛会变红捏，技术大牛和形形色色的大一新生不是相邻的哦，所以一定不会变红的哦，而紧紧相邻的没有p元素，那么css就不起作用哦。

这种选择器捏叫相邻兄弟选择器，当然不止又这一种哦，还有一种通用兄弟选择器，这个就不是去找睡在我下铺的兄弟了，而是去找睡在我下铺的所有兄弟，注意哦他也是不往上看的。

         div~p {
             color: red;
         }

格式就是把+换成~效果如图

image-20250125212650636

我们再来点贴合实际的应用吧

 <body>
     <ul>
         <li>角色</li>
         <li>背包</li>
         <li>祈愿</li>
         <li>纪行</li>
         <li>活动</li>
     </ul>
 </body>

我想要吧除了角色之外的文字都变成红色，我该怎么办捏

 <style>
     li+li {
         color: red;
     }
 </style>

我们直接揭晓答案吧，要找<li>紧邻的<li>那么第一个肯定是第一个参照点，背包变红，背包是第二个参照点，祈愿变红，这样依次向下，就都变红啦，只有角色没变红哦。

属性选择器

我们直接上代码

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>属性选择器</title>
     <style>
         /* 第一种写法：选中具有title属性的元素 */
         [title]{
             color: red;
         }
     </style>
 </head>
 ​
 <body>
     <div title="ttdr-blog1">ttdr1</div>
     <div title="ttdr-blog2">ttdr2</div>
     <div title="ttdr-blog3">ttdr3</div>
     <div title="blog4">ttdr4</div>
 </body>
 ​
 </html>

猜猜有几个变红捏

image-20250125213920292

咦？为什么会有三个捏，属性选择器只是选择属性，和属性的值无关捏，所以会有三个变红啦。

有的兄弟就要说了，博主博主这个属性选择器太不精确了，有没有更加精确的呢，有的有的兄弟，这就要说我们属性选择器的第二种写法了

     <style>
         /* 第二种写法：选中具有title属性值是ttdr-blog1的元素 */
         [title="ttdr-blog1"]{
             color: red;
         }
     </style>
image-20250125214754124

这样就只有第一个变红啦。

此外元素选择器还有第三种写法，咱们上代码

     <style>
         /* 第三种写法：选中具有title属性值是以b为开头的元素 */
         [title^="b"]{
             color: red;
         }
     </style>
image-20250125215204575

就只有第4个变红啦，注意：只能找属性值以什么开头的，不能找在中间的哦。

既然说了开头，那必然有结尾啊，那以某个字符结尾的属性选择器该怎么写捏。

     <style>
         /* 第四种写法：选中具有title属性值是以2为结尾的元素 */
         [title$="2"]{
             color: red;
         }
     </style>
image-20250125215612544

这样我们就可以看到，第二个变红啦，我能能通过开头或者结尾字符来定位，那么我们能不能通过元素值里含有某个字符来做选择捏，答案是可以的，这就是属性选择器的第五种写法

     <style>
         /* 第五种写法：选中具有title属性值是含有dr的元素 */
         [title*="dr"]{
             color: red;
         }
     </style>
image-20250125215957456

再强调一遍哦，属性值一定是title的属性值哦，不是显示在网页上的字幕哦，所以只有前三个变红了。

结语

选择器还有伪类选择器没有说，由于伪类选择器内容较多，我们放到下一篇去讲。

CSSJAVA全栈前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之事件入门

							
							

							
API之入门第一课

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
JS基础——基础语法（1）

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
CSS常见属性之字体属性和文本属性

							
							

							
css的三大特性以及像素和颜色