CSS选择器的进阶

已于 2022-04-17 03:53:08 修改
阅读量255 收藏
点赞数 1
文章标签： 前端
于 2022-04-16 19:03:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31070029/article/details/124217844
版权

CSS选择器的进阶

学习目标

  • 能够使用复合选择器在HTML中选择元素
  • 能够使用Emmet语法提高编码速度
  • 能够使用hover伪类选择器设置鼠标悬停的状态
  • 能够使用结构伪类选择器找到偶数、奇数个li标签

复合选择器

在这里插入图片描述

  • 作用：在选择器1所在的后代中，找到选择器2，并且设计它的样式
  • 注意：后代包括：儿子 孙子 重孙子… 选择器与选择器之间通过空格隔开
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <style>
    /* h后代选择器 */
	/*后代选择器： 
 - 选择器语法：选择器1 选择器2 {css} 
  2.结果：在选择器1所在的后代中，找到选择器2，并且设计它的样式 
  3.注意：后代包括：儿子 孙子 重孙子......
         选择器与选择器之间通过空格隔开   */
	.father p { 
          color: red;
  	} 
</style>
</head>
<body>
    <div class="father">
        <p>小姐姐</p>
        <div>
            <p>小可爱</p>
        </div>
    </div>
        <p>小哥哥</p>
</body>
</html>

在这里插入图片描述

子代选择器

  • 作用：先通过选择器1的子代中，找到满足选择器2的标签，并对它设置样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .father > p {
            color: red;
        }
  .father > div >p {
            color: green;
        }
   
    </style>
</head>
<body>
    <div class="father">
        <p>小姐姐</p>
        <div>
            <p>小可爱</p>
        </div>
    </div>
        <p>小哥哥</p>
   
</body>
</html>

在这里插入图片描述

并集选择器

  • 作用：找到选择器1和选择器2对应的标签，设置样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  	  div,
    	p {
      		color: red;
    	}
  </style>
  </head>
<body>
  <!-- 需求：把div和p标签设置为红色（节省代码的方式） -->
  <div>我是div</div>
  <div>我也是一个div</div>
  <p>我是p标签</p>
  <p>我也是p标签</p>
  <h1 class="red">我是一个h1标签</h1>
  <h2>我是一个h2标签</h2>
</body>
</html>

在这里插入图片描述

交集选择器

  • 作用：找到同时满足选择器1和选择器2，并且对它设计样式
  • 注意：交集选择器中有标签选择器，此时标签选择器必须写在第一个
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  	 div.red {
      color: red;
    }
  </style>
  </head>
<body>
  <!-- 需求：只让小可爱变红（不能改变html结构） -->
  <div class="red">小姐姐</div>
  <p>小帅哥</p>
  <p class="red">小可爱</p>
</body>
</html>

在这里插入图片描述
伪类选择器
在这里插入图片描述

  • 注意：书写的顺序“lvha"
  • hover:除了可以作用在超链接a标签,还可以作用在其他标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类选择器对超链接设置不同状态 */
        a:link {
            color: red;
        }
        a:visited {
            color: goldenrod;
        }
        /* 适用于其他标签 */
        a:hover {
            color: pink; 
        }
        a:active {
            color: springgreen;
        }
    </style>
</head>
<body>
    <a href="#">我是一个a标签</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  	/* 需求：鼠标悬停在a标签上，文字变红 */
    a {
      text-decoration: none;
    }
    a:hover {
      color: red;
    }
    /* 需求：鼠标悬停在box上，box宽高变为400px，并且背景色变成粉色 */
    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box:hover {
      width: 400px;
      height: 400px;
      background-color:pink;
    }
  </style>
  </head>
<body>
  <a href="#">我是一个a标签</a>
  <div class="box"></div>
</body>
</html>

结构伪类选择器

  • E:fist-child {}匹配父元素的第一个子元素，并且是E元素 ;
  • E:last-child {}匹配父元素的最后一个子元素，并且是E元素;
  • E:nth-child(n) {}匹配父元素的第几个子元素，并且是E元素;
  • E:nth-last-child(n) {}匹配父元素的倒是第几个子元素，并且是E元素;
    在这里插入图片描述

使用结构伪类选择器找到偶数、奇数个li标签

查找单个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  	/* 1、找到第一个子元素，并且为li标签 */
    li:first-child {
      background-color: yellow;
    }

    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child {
      background-color: pink;
    }

    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3) {
      background-color: turquoise;
    }
    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-last-child(3) {
      background-color: slateblue;
    }
  </style>
  <body>

  <!-- ul>li*10>a{我是第$个a} -->
  <ul>
    <li><a href="#">我是第1个a</a></li>
    <li><a href="#">我是第2个a</a></li>
    <li><a href="#">我是第3个a</a></li>
    <li><a href="#">我是第4个a</a></li>
    <li><a href="#">我是第5个a</a></li>
    <li><a href="#">我是第6个a</a></li>
    <li><a href="#">我是第7个a</a></li>
    <li><a href="#">我是第8个a</a></li>
    <li><a href="#">我是第9个a</a></li>
    <li><a href="#">我是第10个a</a></li>
  </ul>
</body>
</html>

在这里插入图片描述

E:nth-child(n) {} 奇数个—偶数个

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  	 /* 1、找到偶数个li------------------------ */
    li:nth-child(2n) {
      background-color: goldenrod;
    }
    /* 2、找到奇数个li------------------------ */
    li:nth-child(2n-1) {
      background-color: violet;
    }
  </style>
  </head>
<body>

  <!-- ul>li*10>a{我是第$个a} -->
  <ul>
    <li><a href="#">我是第1个a</a></li>
    <li><a href="#">我是第2个a</a></li>
    <li><a href="#">我是第3个a</a></li>
    <li><a href="#">我是第4个a</a></li>
    <li><a href="#">我是第5个a</a></li>
    <li><a href="#">我是第6个a</a></li>
    <li><a href="#">我是第7个a</a></li>
    <li><a href="#">我是第8个a</a></li>
    <li><a href="#">我是第9个a</a></li>
    <li><a href="#">我是第10个a</a></li>
  </ul>
  </body>
</html>

在这里插入图片描述E:nth-child(n) {}前5个—后5个

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 3、找到前5个------------------------*/
    li:nth-child(-n+5) {
      background-color: mediumvioletred;
    }

    /* 4、找到从第5个往后------------------------ */
     li:nth-child(n+5) {
      background-color: darkgreen;
    } 
  </style>
  </head>
<body>

  <!-- ul>li*10>a{我是第$个a} -->
  <ul>
    <li><a href="#">我是第1个a</a></li>
    <li><a href="#">我是第2个a</a></li>
    <li><a href="#">我是第3个a</a></li>
    <li><a href="#">我是第4个a</a></li>
    <li><a href="#">我是第5个a</a></li>
    <li><a href="#">我是第6个a</a></li>
    <li><a href="#">我是第7个a</a></li>
    <li><a href="#">我是第8个a</a></li>
    <li><a href="#">我是第9个a</a></li>
    <li><a href="#">我是第10个a</a></li>
  </ul>
  </body>
</html>

在这里插入图片描述
易错点

li:first-child a {
            color: red;

        }

  li a:first-child {
        color: red;
    } 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child a {
            color: red;

        }
        /* li a:first-child {
            color: red;
        } */
    </style>
</head>
<body>
   <ul>
       <li><a href="#">我是第1个a</a></li>
       <li><a href="#">我是第2个a</a></li>
       <li><a href="#">我是第3个a</a></li> 
       <li><a href="#">我是第4个a</a></li>
       <li><a href="#">我是第5个a</a></li>
       <li><a href="#">我是第6个a</a></li>
       <li><a href="#">我是第7个a</a></li>
       <li><a href="#">我是第8个a</a></li>
       <li><a href="#">我是第9个a</a></li>
       <li><a href="#">我是第10个a</a></li>
   </ul>
</body>
</html>
carricss
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性
CSS进阶指引
01-19
你不要觉得CSS没什么重要可言？最近几年他成为一个热门的话题，很多人都在讨论他。CSS并不是一个简单的事情，前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些，我们更关心的是网站的性能以及如何制作出更好...
Web前端基础（七）：CSS选择器进阶
JesyWu的博客
02-07 303
1、后代选择器 使用多个选择器的组合来找到要控制的标签； 类名为wrap中的div里面的span标签样式； 选择器直接用空格隔开。 /*样式如下：*/ .wrap div { background-color: skyblue; } div class="wrap"> div>01div> div>02div> div> 效果解释： 类名wrap的div
CSS选择器进阶
XzXz0207的博客
11-21 126
CSS选择器用于选择你想要的元素的样式的模式。
CSS进阶--选择器进阶
bug 消灭师的博客
03-30 118
CSS进阶
四、CSS选择器进阶
weixin_46261309的博客
05-02 165
目录一、更多的选择器层级选择器组合选择器伪类选择器伪元素选择器选择器总结二、选择器权重class选择器与id选择器权重对比选择器权重计算方法其他引入css的方法!important 一、更多的选择器 前面我们已经掌握了常用css选择器和css的一些常用属性，现在我们进一步扩展css选择器的内容包括内容如下： 层级选择器 组合选择器 伪类选择器 伪元素选择器 层级选择器 找到指定html元素内的...
【前端学习第八天：css选择器进阶34种】
a2237464569的博客
07-29 273
今天是前端学习第八天，昨天为大家带来了css基础样式的引入，今天我们将样式学习更深入，引入更多的34种选择器。首先，我们还是从头开始，复习一下昨天的基础选择器。
css选择器进阶
weixin_42794873的博客
10-21 554
css选择器进阶： 1、 属性选择器、属性和值选择器 2、 相邻兄弟选择器 3、 后代选择器（包含选择器） 4、 子元素选择器 5、 选择器分组 1、属性选择器、属性和值选择器： /*1、 为带有 title 属性的所有元素设置样式： */ [title] { color:red; } /*2、 为 title="haha" 的所有元素设置样式： */ [title=haha] { border:5px solid blue; } /*3、 为 title的属性值中包含指定词汇的所有元素设置样式，适用于
CSS 选择器进阶
qq_41421033的博客
02-16 259
复合选择器 后代选择器: 空格 作用： 根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 选择器语法： 选择器1 选择器2 { css } 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过 空格 隔开 子代选择器：> 作用： 根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素 选择器语法： 选择器1 > 选择器2 {..
CSS选择器进阶1.2
m0_71385141的博客
04-10 344
结果：在选择器1所找到的标签后代（儿子，孙子，重孙子...）中，找到满足选择器2的标签，设置样式。结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。结果：在选择器1所找到标签子代（儿子）中，找到选择器2的标签，设置样式。②交集选择器中如果有标签选择器，标签选择器必须写在前面。②后代选择器中，选择器与选择器之间通过空格隔开。结果：找到选择器1和选择器2选中标签，设置样式。②子代选择器中，选择器与选择器之间用>隔开。②每组选择器可以是基础选择器或者复合选择器。
CSS第02天（选择器进阶背景相关属性元素显示模式三大.emmx
08-22
CSS第02天（选择器进阶背景相关属性元素显示模式三大.emmx
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
12-01
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
前端代码学习（HTML+CSS+JS进阶学习全资料）
12-25
CSS模块涵盖了CSS选择器和属性、各种布局技术，包括Flexbox和Grid，以及响应式设计原理。JavaScript模块包含了JavaScript语法和数据类型、DOM操作和事件处理，以及异步编程的重要概念，包括Promise和Async/Await。...
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 382
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 286
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 194
练习JS的实用案例
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 861
Web前端三大主流框架介绍：Angular、React、Vue
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 744
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 462
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
css中的子代选择器
08-19
- *3* [CSS进阶-02-选择器-子代](https://blog.csdn.net/weixin_63562705/article/details/121788344)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值