css-selectors css选择器 css兄弟选择器 - 有一个CSS父选择器吗?





13 Answers

我认为你不能只选择css中的父级。

但是,由于您似乎已经拥有.active类, .active类移动到li (而不是a )会不会更容易? 这样你就可以只访问lia via css。

name选择器 css选择器text css关系选择器

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

在示例中,我的CSS将是这样的:

li < a.active {
    property: value;
}

显然有一些方法可以使用JavaScript来实现这一点,但我希望CSS Level 2本身存在某种解决方法。

我尝试设置样式的菜单正在由CMS喷出,因此我无法将活动元素移动到<li>元素...(除非我主题菜单创建模块,我宁愿不这样做)。

有任何想法吗?




正如其他几个人所提到的,没有一种方法可以使用CSS来设置元素的父/的样式,但以下内容适用于jQuery

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



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

li.active > a {
    property: value;
}



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

E ~ F {
    property: value;
}

这匹配任何以E元素开头的F元素。




我知道OP正在寻找一个CSS解决方案但是使用jQuery很容易实现。 在我的情况下,我需要找到包含在子<li>中的<span>标记的<ul>父标记。 jQuery具有:has选择器,因此可以通过它包含的子节点来标识父节点:

$("ul:has(#someId)")

将选择具有id为someId的子元素的ul元素。 或者回答原始问题,类似下面的内容应该可以做到(未经测试):

$("li:has(.active)")



您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。 像这样:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样,您可以根据父元素的翻转更改多个内部标记中的样式。




有人提出这样的建议吗? 只是水平菜单的想法......

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* 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%; }

更新了演示和其余代码

另一个如何将其与文本输入一起使用的示例 - 选择父字段集




伪元素: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等等。




简短的回答是NO ,我们在CSS的这个阶段没有parent selector ,但如果你没有交换元素或类,第二个选项是使用JavaScript,如下所示:

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;
  }
});

或者在您的应用程序中使用jQuery时更短的方法:

$('a.active').parents('li').css('color', 'red'); //your property: value;



不,你不能只在css中选择父。

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




至少包括CSS3在内,你不能选择那样的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>




在CSS中,我们可以在层次结构中级联到属性,但不能在相反方向上级联。 要修改子事件的父样式,可能使用jQuery。

$el.closest('.parent').css('prop','value');



Related