有没有一个CSS父母选择器?



12 Answers

我不认为你只能在CSS中选择父项。

但是,因为你似乎已经有了一个.active类,将这个类移动到li (而不是a )会不会更容易? 这样,你可以只访问lia通过css。

Question

如何选择作为锚元素的直接父元素的<li>元素?

在例子中,我的CSS会是这样的:

li < a.active {
    property: value;
}

很显然,有些方法可以用JavaScript做到这一点,但我希望有一些原生存在于CSS Level 2的解决方法。

我尝试设计的菜单是由CMS拼出的,因此我无法将活动元素移动到<li>元素中(除非我主题菜单创建模块,我不想这么做)。

有任何想法吗?




伪元素:focus-within允许如果后代拥有焦点,则可以选择父项。

如果元素具有tabindex属性,则可以关注元素。

浏览器支持重点内

Tabindex

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>




有一个插件可以扩展CSS,使其包含一些非标准功能,这些功能在设计网站时确实有帮助。 这就是所谓的EQCSS

EQCSS增加的一件事是父母选择器。 它适用于IE8及以上的所有浏览器。 格式如下:

@element 'a.active' {
  $parent {
    background: red;
  }
}

因此,在这里我们已经在每个元素a.active上打开了一个元素查询,并且对于这个查询中的样式,像$parent这样的东西很有意义,因为有一个参考点。 浏览器可以找到父项,因为它与JavaScript中的parentNode非常相似。

下面是一个演示$parent另一个在IE8中运行的$parent演示,以及一个屏幕截图,如果你没有IE8进行测试

EQCSS还包含选定元素之前元素的meta-selectors $prev ,仅适用于与元素查询匹配的那些元素的$this等等。




据我所知,不在CSS 2中。 CSS 3拥有更强大的选择器,但并未在所有浏览器中始终如一地实施。 即使使用改进的选择器,我也不相信它会完成您在示例中指定的内容。







正如其他人提到的那样,没有一种方法可以使用CSS来设计元素的父类,但下面的代码适用于jQuery

$("a.active").parents('li').css("property", "value");



CSS选择器“ General Sibling Combinator ”可以用于你想要的东西:

E ~ F {
    property: value;
}

这匹配前面有E元素的任何F元素。




这是Selectors Level 4规范中讨论最多的方面。 使用这个选择器将能够根据它的孩子在给定的选择器(!)后面使用感叹号标记样式元素。

例如:

body! a:hover{
   background: red;
}

如果用户悬停在任何锚点上,会设置一个红色的背景色。

但是我们必须等待浏览器执行:(




在css2中没有办法做到这一点。 你可以将这个类添加到li并引用a

li.active > a {
    property: value;
}



尽管目前在标准CSS中没有父选择器,但我正在开发一个名为ax的(个人)项目(即。 增强CSS选择器语法/ ACSSSS ),该项目在其7个新选择器中包括:

  1. 一个直接的父母选择器< (使相反的选择成为)
  2. 一个任何祖先选择器 ^ (它启用与[SPACE]相反的选择)

斧头目前处于相对较早的BETA发展阶段。

在这里看到一个演示:

http://rounin.co.uk/projects/axe/axe2.html

(将左边的两个列表与标准选择器进行比较,右边的两个列表用ax选择器进行比较)




从技术上讲,没有直接的方法来做到这一点,但你可以用jQuery或JavaScript来排序。

Howeve,r你也可以做这样的事情。

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery的

$("a.active").parents('li').css("property", "value"); 

如果你想用jQuery实现这个功能,那么这里就是jQuery父选择器的参考




不,你不能仅在CSS中选择父项。

但是,因为你似乎已经有了一个.active类,将这个类移动到li (而不是a )会不会更容易? 这样,你可以只访问lia通过css。




至少包括CSS3,你不能选择这样的。 但是现在JS可以很容易地完成,你只需要添加一些vanilla JavaScript,注意代码很短。

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>




Related