css3中实现从子元素出发 找到父元素

最新推荐文章于 2024-05-15 18:00:00 发布
原创 最新推荐文章于 2024-05-15 18:00:00 发布 · 5k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css

博客介绍了CSS中的伪类选择器:has，可通过span元素选中p元素并添加边框，指出很多伪元素选择器功能强大，CSS深入学习较为复杂，还表示会持续更新前端知识。

可能有的童鞋会有这种想法 其实还确实有这种选择器 就是伪类选择器

:has

 <p>
        我是p元素
        <span class="has">
            我是has
        </span>
    </p>

通过span元素选中 p元素 并加上一个边框

>.has 就是直接子类选择器

 :has(> .has) {
        border: 1px solid #f00;
      }

其实有很多伪元素选择器还是很强大 css往深处去 也是很复杂的

关注我 持续更新前端知识

CSS3 中的 @container 查询：元素级响应式设计
AI架构全栈开发实战笔记
06-10 666
本文将深入讲解 CSS3 中@container查询的核心原理、使用方法及实际应用场景。我们会从「传统响应式设计的痛点」出发，逐步拆解@container的语法规则、容器类型（Container Type）、查询逻辑，并通过「自适应卡片组件」的实战案例，展示如何用纯 CSS 实现「元素级响应式」。本文将按照「问题引入→核心概念→原理拆解→实战演示→应用场景→未来趋势」的逻辑展开，确保从理解到应用的完整闭环。容器（Container）：被标记为「可查询尺寸」的父元素（通过属性声明）。
前端CSS3的文本对齐与缩进技巧
最新发布
小白菜的博客
05-27 979
你是否遇到过这样的场景：写了一段优美的文字，在页面上却歪歪扭扭；想让按钮文字居中，却总是差那么一点；段落开头想空两格，结果用空格硬挤导致排版错乱……这些问题的根源，都在于对CSS文本对齐与缩进的不熟悉。本文将覆盖CSS3中与文本对齐、缩进相关的10+核心属性，并结合实际开发场景（如新闻排版、导航设计、表单优化），帮你彻底解决文字排版难题。本文将按照“概念→原理→实战”的逻辑展开：先用生活案例解释核心概念（如“文本对齐=排座位”），再拆解CSS属性的底层逻辑（如text-align。
css子元素选择父元素的实现
一个小白的成长历程
01-24 2万+
css元素不能往前选择，即不能选择父元素或前兄弟元素；这都受制于DOM渲染规则；而这里我们使用别的方法来实现前元素或父元素选择的效果；有改变dom的排版位置，:focus-within伪类的选择；
CSS子元素选择父元素的实现
11-19
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？
【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
m0_61049675的博客
01-31 5131
【代码】【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
css通过子元素选择父元素
progrmmmm的博客
07-19 1万+
如：elementui的table的type="expand"表格展开行。点击展开后td标签有padding。但td标签和包裹他的tr标签都是点击后产生的。无法在外层包裹div，直接用::v-deep会改变包裹他的表格的样式。个别UI框架个别标签通过事件直接生成或者无法选中的情况。直接使用::v-deep会导致全部标签改变，包裹标签使用class名::v-deep无法选中父元素改变父元素属性的情况。所以可以使用伪类:has来改变td标签的padding。伪类:has选择父元素。
第十章 定位(2)
qq_45983879的博客
10-21 231
定位 固定定位 position:fixed; 参考物 浏览器窗口 移动距离 left/right/bottom/top 特点 不会跟随滚动条进行滚动 脱离文档流 margin: auto;失效 宽度自适应会失效，需要重新设置宽度 应用场景 侧边栏/回到顶部/头部导航/广告 粘性定位 position:sticky; 参考物 浏览器窗口 移动距离 top 特点 未达到top值之前，普通元素，达到top值之后类似于固定定位 锚点 实现在同一个页面不同板块之间的跳转 利用a标
CSS子元素选择父元素
热门推荐
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
10-09 10万+
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？ &lt;ul&gt; &lt;li&gt; &lt;a href="#" class="active"&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=&quo
小标签大作用 CSS中zoom:1的使用方法
09-25
2. **解决浮动问题**：在CSS布局中，浮动元素可能会引起父元素高度塌陷，即父元素不会扩展以包含浮动子元素。在某些情况下，通过给父元素添加`zoom:1`可以触发haslayout，从而使父元素包裹住浮动的子元素，避免高度...
css子元素相对父元素进行定位的实现
11-19
解决方案
详解CSS 子元素相对于父元素固定定位解决方案
11-19
基本概念
详解CSS-opacity子元素继承父元素透明度的解决方法
11-19
在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。
js中onclick的参数为this,修改这个元素的同级元素的css
03-14
这时候，用户需要知道如何从当前元素出发，找到父节点，再遍历其他子节点。 然后，我应该介绍几种常见的方法。首先是使用parentNode和children属性，通过父节点来获取所有子元素，然后过滤掉当前元素，找到目标同级...
CSS 根据子元素选择父元素，并设置父元素的样式
easonjake的博客
05-15 1万+
场景举例：当子元素有增加了一个class时，需要影响其父元素的样式。可以看到，当p元素拥有child类时，父元素的样式发生了改变。可以使用":has"伪类来实现选择父元素的效果。
根据当前元素获取其父元素
qq_56298427的博客
02-20 418
如果有更好的方法请指教。
获取父级元素
小白一个
05-18 1702
（1）获取父1级元素： $("xxx").parent() （2）获取父2级元素，以此类推获取父n级元素 $("xxx").parent().parent(); （3）项目实战： 如下图所示，根据图中input元素（红色框）的点击情况，修改父2级（父1级为td）的tr元素（紫色框）的class JS代码： $(".eachCheck").change(function(){
js css 查找指定父类
m0_65730686的博客
07-03 1494
js css 查找指定父类
css中如何根据子元素选择祖父级（：has）
熬夜搬码员的博客
07-11 1761
【代码】css中如何根据子元素选择祖父级（：has）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yunchong_zhao

帮到你了，请作者喝杯矿泉水可好

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值