是否有CSS父选择器?
如何选择作为锚元素直接父元素的是否有CSS父选择器?,css,css-selectors,Css,Css Selectors,如何选择作为锚元素直接父元素的元素 例如,我的CSS如下所示: li < a.active { property: value; } var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active')); activeATag.map(function(x) { if(x.parentNode.tagName === 'LI') { x.parentNode.style.
元素
例如,我的CSS如下所示:
li < a.active {
property: value;
}
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});
li
显然,JavaScript有很多方法可以做到这一点,但我希望有一些CSS级别2固有的解决方法
我试图设置样式的菜单被CMS弹出,因此我无法将活动元素移动到
元素。。。(除非我将菜单创建模块设为主题,我不希望这样做)
有什么想法吗?在CSS2中没有这样做的方法。您可以将该类添加到
li
并引用a
:
li.active > a {
property: value;
}
我不认为你只能在CSS中选择父对象
但是,由于您似乎已经有了一个
.active
类,因此将该类移动到li
(而不是a
)会更容易。这样,您就可以仅通过CSS访问li
和a
。据我所知,CSS 2中没有。css3有更强大的选择器,但并不是在所有浏览器中都一致地实现。即使使用了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。目前无法在CSS中选择元素的父元素
如果有一种方法可以做到这一点,那么可以使用当前的CSS选择器规范:
:has()
伪类。它将类似于
li:has(>a.active){/*样式应用于li标记*/}
但是,截至2021年,
同时,如果需要选择父元素,则必须使用JavaScript。正如其他几个人所提到的,没有一种方法可以仅使用CSS设置元素父元素的样式,但以下方法适用于: CSS选择器“”可能用于您想要的:
E ~ F {
property: value;
}
这与前面有E
元素的任何F
元素相匹配。您可以使用:
*!>输入[type=text]{background:#000;}
这将选择文本输入的任何父项。但是等等,还有很多。如果需要,可以选择指定的父级:
。输入换行!>输入[type=text]{background:#000;}
或在其处于活动状态时选择它:
。输入换行!>输入[类型=文本]:焦点{背景:#000;}
查看此HTML:
先生,您叫什么名字
当输入处于活动状态时,您可以选择span.help
,并显示它:
.input wrap。帮助>输入[类型=文本]:焦点{显示:块;}
还有更多的能力;只需查看插件的文档即可
顺便说一句,它在InternetExplorer中工作。W3C排除了这样一个选择器,因为它会对浏览器的性能产生巨大影响。尝试将a
切换到块
显示,然后使用您想要的任何样式。a
元素将填充li
元素,您可以根据需要修改其外观。不要忘记将li
padding设置为0
li{
填充:0;
溢出:隐藏;
}
a{
显示:块;
宽度:100%;
颜色:…,背景:…,边框半径:…,等等。。。
}
a、 活跃的{
颜色:…,背景:。。。
}
您可以尝试使用hyperlink作为父元素,然后更改悬停时的内部元素。像这样:
a.activeh1{颜色:红色;}
a、 活动:悬停h1{颜色:绿色;}
a、 活性h2{颜色:蓝色;}
a、 活动:悬停h1{颜色:黄色;}
通过这种方式,您可以根据父元素的滚动来更改多个内部标记中的样式。我知道OP正在寻找CSS解决方案,但使用jQuery很容易实现。在我的例子中,我需要为包含在子中的标记找到
父标记。jQuery具有:具有
选择器,因此可以通过其包含的子项来识别父项:
$("ul:has(#someId)")
将选择具有id为someId的子元素的ul
元素。或者,为了回答最初的问题,应该使用以下类似的方法(未经测试):
没有父选择器;就像没有以前的同级选择器一样。不使用这些选择器的一个很好的原因是,浏览器必须遍历元素的所有子元素,以确定是否应应用类。例如,如果您编写了:
body:包含选择器(a.active){background:red;}
然后,浏览器将不得不等待,直到它加载并解析了所有内容,直到
确定页面是否应该为红色
这篇文章对此进行了详细的解释。目前没有父选择器&W3C的任何会谈都没有讨论它。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它
这里有很多技术上的解释
但是
这些人在前端开发领域都是一流的。这是选择器4级规范中讨论最多的方面。
这样,选择器就可以根据元素的子元素,在给定的选择器(!)后面使用感叹号来设置元素的样式
例如:
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
身体!a:悬停{
背景:红色;
}
如果用户将鼠标悬停在任何锚点上,将设置红色背景色
但是我们必须等待浏览器的实现:(从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript来解决这一问题
但是,您也可以这样做
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
如果您想使用jQuery实现这一点,这里是reference
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
@element 'a.active' {
$parent {
background: red;
}
}
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});
$('a.active').parents('li').css('color', 'red'); // Your property: value;
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/
<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
{kiddos.map(kid => <div key={kid.id} />)}
</div>
.parent {
color: #000;
}
.parent.has-kiddos {
color: red;
}
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
a.link {
display: inline-block;
color: white;
background-color: green;
text-decoration: none;
padding: 5px;
}
li.listitem {
display: inline-block;
margin: 0;
padding: 0;
background-color: transparent;
}
/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */
a.link:active {
display: none;
}
.listitem:active {
background-color: blue;
}
.listitem:active a.link {
display: inline-block;
background-color: transparent;
}