css选中子元素中不是第一个元素的3种方法

本文介绍了三种利用CSS选择器实现特定样式的方法:使用伪类选择器:not、nth-of-type/nth-child及兄弟选择符+,帮助开发者高效定位并样式化DOM元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述

第一种:使用伪类选择器:not

这里写图片描述

<!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>
		#od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		#od div:not(:first-child){background:red;}
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
    </div>
</body>
</html>

第二种:使用nth-of-type或者nth-child

这里写图片描述

这里写图片描述

顾名思义,n是从0开始的,那么n+1自然就是从1开始了,以此类推n+3就是从第三个元素开始,同理如果选中单数元素那么就是2n+1,如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

nth-of-type和nth-child 区别 这里写的很明白 这里就不做介绍。

<!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>
		#od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		
		/*#od div:nth-child(n+1){background:red;}*/
		#od div:nth-of-type(n+1){background:red;}
		
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
    </div>
</body>
</html>

第三种:巧妙使用+兄弟选择符

这里写图片描述

<!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>
		#od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		
		#od div+div{background:red;}
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
    </div>
</body>
</html>

至于为什么+选择符为什么可以呢?很简单#od div+div选择器,表示选中#od元素下面的所有后代div元素的兄弟元素,所以以此类推就选中了第二个元素以后的所有div元素了,为什么第一个没有被选中呢?很简单,第一个div元素前并有没有一个兄弟元素,所以不可能被选中,所以就得到了想要的结果。

### 判断父元素内是否存在特定类名的子元素 在 JavaScript 中,可以利用 `querySelector` 或者 `getElementsByClassName` 方法来查找指定父元素下的特定类名子元素。如果目标是确认存在与否,则可以通过这些方法返回的结果来进行判断。 对于现代浏览器支持良好的场景下推荐使用 `Element.querySelector()` 来定位单个匹配的第一个元素: ```javascript const hasChildWithClass = (parent, className) => { return parent.querySelector(`.${className}`) !== null; }; ``` 此函数接受两个参数:一个是代表父节点的对象 `parent`;另一个是要查询的 CSS 类名称字符串 `className`。当找到至少一个符合条件的孩子时返回 true 否则 false[^1]。 另外一种方式是通过遍历所有带有该类名的元素并检查它们是否属于给定的父级范围之内: ```javascript function containsChildOfClass(parentElem, targetClass){ let elements = document.getElementsByClassName(targetClass); for(let i=0; i<elements.length; i++){ if(elements[i].closest(`${parentElem.tagName}:not(:has(.${targetClass}))`) === null && elements[i].closest(`${parentElem.tagName}`) === parentElem){ return true; } } return false; } ``` 这段代码定义了一个名为 `containsChildOfClass` 的函数,用于检测某个 HTML 元素(由第一个参数表示)内部是否有任何后代拥有第二个参数所指明的 CSS 类。这里采用了更复杂的逻辑以确保只考虑直接位于所提供的父容器内的项目[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值