css 选父元素,CSS中模拟父元素选择器

最新推荐文章于 2025-04-17 11:24:54 发布

Zhang Tony

最新推荐文章于 2025-04-17 11:24:54 发布

阅读量7.2k

点赞数

文章标签： css 选父元素

本文探讨了CSS中缺乏父元素选择器的问题，并分享了一种利用子元素和相邻兄弟选择器来模拟父元素选择器效果的方法。通过示例代码展示了如何在鼠标悬停`p`元素时改变相邻`span`的样式，以及结合模拟点击事件的应用。文章强调了实现的关键点和注意事项，帮助开发者理解和应用这种技巧。

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

很多情况下，我们需要找到父元素，但可惜的是css中并没有这样的一个选择器。

至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。

简单来说这个实现并不是真正的父元素选择器，只是利用其它思路来实现相同效果罢了。

HTML：

pppppppp

CSS：

div,p{

margin:0;

padding:0;

}

#box{

width:300px;

height:300px;

position:relative;

}

#box>span{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

box-shadow:0px 0px 0px 1px #ccc;

}

#box>p:hover + span{

box-shadow:0px 0px 0px 1px red;

}

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

z-index:1;

}

效果：

hover的时候

下面说一下注意点

这个span必须放在p标签后一个位置，因为我们用的是+下一个同级选择器。还有就是p标签必须加z-index，不然span会把p标签盖住，效果就没了。

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

这段代码会把p标签垂直居中。

其实这个原理很简单，就是原本给父元素添加的样式给一个子元素添加，让子元素冒充父元素，定位就好了。

结合模拟单击事件使用。

HTML：

点击我！

CSS：

body,div{

margin:0;

padding:0;

}

#box{

width:300px;

height:300px;

position:relative;

}

#box>span{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

box-shadow:0px 0px 0px 1px #ccc;

}

#box>a:target + span{

box-shadow:0px 0px 0px 1px red;

}

#box>a{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%);

z-index:1;

text-decoration:none;

}

效果

css模拟单击事件的实现就是通过这个实现的。

点击我！

然后通过css的:target可以获取当前正在点击的元素。

a:target

完。

CSS中的伪元素选择器

定义伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

weex中css不能使用子元素选择器

weex中css不能使用子元素选择器刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

JQuery中查找父元素，子元素,追加元素，插入元素和删除元素及其他常用方法

Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

CSS中如何让元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

CSS中&colon;before和&colon;after选择器的用法

在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧. 阅读原文:CSS中:before和:after选择器的用法

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS:

CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

CSS中怎么设置元素水平垂直居中？

记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

理解CSS中的三种选择器&gt&semi;+~

1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...

随机推荐

git pull --rebase

git reset --hard orgin/master $ git push bit 1.8-subchannels To git@bitbucket.org:cms.git ! [rejecte ...

[转]SQL Server建立应用程序安全性和程序角色

转自:http://dev.yesky.com/450/7619450.shtml 2007-10-22 14:00 来源:论坛整理作者:luolina 责任编辑:幽灵·yesky Microsof ...

laravel实现数据库读写分离配置或者多读写分离配置

config\database.php里读写分离:'mysql' => array( 'read' => array( 'host' => '192.168.1.1', ), 'w ...

(译)Windsor入门教程---第五部分添加日志功能

介绍现在我们已经有了基础的框架了,是时候添加内容了,那么我们首先应该考虑的就是在应用程序中添加日志功能.我们会使用Windsor来配置,在这一部分,你将学习Windsor之外的其他功能. L ...

如何用PHP做到页面注册审核

用户注册后就有该条用户记录,你对用户表设一个"审核状态"字段,默认值设为"未审核",然后你写几句审核代码做成一个功能,按照你们的意愿若审核通过你把审核状态改为& ...

Jmeter的逻辑控制器——Controller

逻辑控制器(Logic Controller) --贯穿整个Test Plan中,与各组件执行顺序没关系:目的是用于控制采样器的执行顺序. Simple Controller Simple Contr ...

允许mysql用户从远程登录

1.修改/etc/mysql/my.cnf,将下面的行注释掉bind=127.0.0.1注释#bind=127.0.0.1 2.修改用户权限,允许从任何主机登录mysql>use mysql;m ...

java JDK环境的配置

1. 在Administrator用户变量中新建: 变量名:JAVA_HOME 变量值:C:\Program Files (x86)\Java\jdk1.7.0_01 2. 在Administra ...

python+selenium—webdriver入门(二)

本文中主要介绍webdriver常见的对象定位方法: 一.对象定位的目的二.常见的对象定位方法一.对象定位的目的: 1.操作对象 2.获得对象的属性,如:对象的class属性.name属性等 3. ...