子元素选择器

最新推荐文章于 2023-06-22 21:35:09 发布
最新推荐文章于 2023-06-22 21:35:09 发布
阅读量712 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39941521/article/details/77659456
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为第一个标签设置一个背景颜色为黄色
*  :first-child 可以选中第一个子元素
*  :last-child 可以选中最后一个子元素
* 
* p:last-child{
* background-color: yellow;
* }
* 
*  :nth-child 可以选中任意位置的子元素
* 该选择器后面可以指定一个参数,指定要选则的第几个元素
*    even 表示偶数位置的子元素
* odd  表示奇数位置的子元素
*/
p:nth-child(2){
background-color: pink;
}
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常类似
* 只不过child是在所有子元素中排列
* 而type是在当前类型的子元素中排序
*/
p:nth-of-type(4){
background-color: skyblue;
}

/*
* 否定伪类:
* 作用:可以从已选的元素中剔除某些元素
* 语法:
* :not(选择器)
*/
p:not(.a){
background-color:yellow;
}

</style>
</head>
<body>
<span>qwqwwqw</span>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p class="a">我是一个段落</p>
<p class="a">我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
</html>
qq_39941521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS第二阶段学习
weixin_53317758的博客
03-23 1073
emmet语法使用 生成标签直接输入标签名 按下tab键即可，比如div然后tab键，就可以生成 <div></div> 如果想要生成多个相同的标签，加上""就可以了比如div3就可以快速生成3个div 如果有父子关系的标签，可以用>比如ul> li就可以 如果有兄弟关系的标签，用 * 就看比如div*p 如果生成带有类名或者id名字，直接写.demo或者 #two tab键就可以 如果生成的div类名有顺序的，可以
元素选择器
panwanning的博客
08-11 149
主要问题 读取时用stringstream处理空白符，如果用ios::sync_with_stdio(false)有问题 标签是不区分大小写的，不仅是存放时要转小写，查询时也要转小写 此问题主要是判断路径存在性，因此可以把存储方式定为只存父母 加一个倒过来的索引便于字符串查询效率 后代选择器需要匹配祖先而不只是父母（要先检查是不是在树里头，不在直接结束） 答案 #include <bit...
CSS子元素选择器使用介绍
09-25
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，可以使用子元素选择器
css first-child,css :first-child选择器使用实例详解
weixin_39869593的博客
08-03 1612
css :first-child介绍css:first-child设置父元素的第一个子元素的样式表属性，即匹配父元素的第一个子元素，并为其设置css样式。例如：一个div中包括多个p元素，匹配第一个p元素可使用:first-child伪类语法：:first-child {style properties}比如：body *:first-child {font-weight: bold;}p:fi...
css选择器之first-child和first-of-type的比较
小太阳的博客
12-17 837
定义： :first-child 选择器匹配其父元素中的第一个子元素。 :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。 注意： ：修饰的是当前元素，比如你想选p元素下的第一个span元素，你可以 p span:first-child : {} // 或者sass写法 p { & span:first-child: {} } p:first-child: {} // 错误写法 小例子 <div> <p>我是p元素</p
CSS的选择器和三大特性
一指流沙的博客
07-13 1547
① 基础选择器：由单个选择器组成。② 复合选择器：由基础选择器组合而成。 其他伪类选择器：1. 是 CSS 伪类，表示父元素的第一个子元素。2. CSS 伪类 代表父元素的最后一个子元素。3. 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 括号中表达式 匹配到的元素集合 4. 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。5. CSS 伪元素
CSS选择器
qq_62755767的博客
04-17 6875
1.CSS选择器作用：选择器（选择符）就是根据不同需求把不同的标签选择出来 例如上图，如果想用css改变第二个div的样式，或者想改变<ul>中的<li>的样式，就需要使用选择器 2.选择器分类：选择器分为基础选择器和复合选择器两大类，基础选择器是由单个选择器组成的，其中包括标签选择器，类选择器，id选择器和通配符选择器 1）标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的C...
jQuery选择器之子元素选择器详解
10-19
本篇文章将详细解析jQuery中的子元素选择器，这些选择器可以帮助开发者精确地选取页面上的特定子元素。 子元素选择器是jQuery选择器的一种，主要用于筛选出父元素内的特定子元素。下面我们将介绍几种常见的子元素...
举例讲解CSS的子元素选择器用法
12-13
基础 子元素选择器只能一级一级向下寻找，不能跨越  HTML代码： XML/HTML Code复制内容到剪贴板   this is my <strong><i>w</i>eb page.   CSS代码： CSS Code复制内容到剪贴板 p>strong { color: ...
CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child
colin5210的博客
06-22 9868
CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child、not
【CSS】结构伪类选择器
德仔
06-20 1344
结构伪类选择器 上图中，我们很清楚的看到了那些属于同级，first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。 解析：如上代码中，我们给 p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。...
伪类和伪元素区别；
yyjiuguilian的博客
11-25 306
注意: 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如或 元素。 CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。 <!-- CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。--> <!-- 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。--> /* Add a heart ..
关于CSS伪类first-child的深入理解
mirro81的博客
07-21 1694
关于CSS伪类first-child的深入理解在CSS（CSS3）中，有一种选择器很特殊，那就是伪类，关于伪类有很多，这里详细分析其中的一种：first-child。具体书写格式如下： element：first-child{（CSS语句）}关于这个伪类，可能很多人都会对它有一个误解，那就是字面上的误解：以为是element的第一个子元素，其实这种理解是完全错误的，首先我们来看下面的代码：代码1.
CSS的选择器 :first-child和:last-child
Learning_xzj的博客
08-21 8092
转载！！！原文地址：https://blog.csdn.net/weixin_44710964/article/details/104502602?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242 last-child选择器查了下W3C的文档发现我想的没那么简单。 就拿:last-child举例，文档中对其的解释是：
如何用css选择器选中某个类的第一个元素
reol44的博客
03-30 7023
则可以选中 A后的所有B元素,只要它们共用一个父元素,也就是说这句加上去,不会选到任何一个元素,因为父元素。这样弄不太好,因为初始属性还要去重新设置,要是每个。但是上面这句其实是选中一下两个条件都满足的元素。的颜色都是在不同地方设置的不同颜色,就不好改了。要将’选中’变成红色改怎么使用css。除此之外,可以使用兄弟选择器。首先想到的是 伪类选择器。
解决css样式中first-child和last-child不生效的问题
热门推荐
LYQ
11-29 1万+
前端项目需要使用v-for指令来渲染一个问题回复列表，列表的第一和最后需要显示不同的样式，便使用到了first-child和last-child这两个CSS属性，在编码后发现 last-child 和 first child 中的样式不生效，经过查找资料后解决了这个不生效问题的同时也加深了印象。 首先我们得明白first-child和last-child是干什么用的： first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 last-c...
css first-child伪类选择器详解
weixin_44607531的博客
01-26 1万+
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下，同级第一个且为em的元素 first-child 代码 <style> p:first-child{ /* 同级第一个并且为p的元素 */ color: red; } </style> <body> ...
CSS3的first-child和last-child选择器用法总结（很容易犯才错误，有几个坑！）
weixin_43343144的博客
03-25 8187
first-child官方解释：表示在一组兄弟元素中的第一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。） last-child官方解释：表示在一组兄弟元素中的最后一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。） 务必注意：你的这组兄弟元素节点必须在同一个...
css中使用子元素选择器编写规则
最新发布
09-04
CSS中的子元素选择器是一种用于选择某个元素的子元素的选择器。它使用大于号（>）来表示父子关系。 使用子元素选择器写规则时，首先需要写上父元素的选择器，紧接着添加大于号（>），然后再写上子元素的选择器。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值