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




css兄弟选择器 css组合选择器 (22)

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

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

li < a.active {
    property: value;
}

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

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

有任何想法吗?


Answers

从技术上讲,没有直接的方法可以做到这一点,你可以用jquery或javascript对它进行排序。

不过,你也可以这样做。

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

jQuery的

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

如果你想使用jQuery实现这一点,这里是jQuery父选择器的引用


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

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

在SASS中使用&符号是可能的:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS输出:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

W3C排除了这样一个选择器,因为它会对浏览器产生巨大的性能影响。



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

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


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

E ~ F {
    property: value;
}

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


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


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

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



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

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

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

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

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

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

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

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

更新了演示和其余代码

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


有一个扩展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中没有父选择器,但我正在开发一个名为ax的(个人)项目(即增强型CSS选择器语法/ ACSSSS ),它在7个新的选择器中包括:

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

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

在这里看一个演示:

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

(比较左边的两个列表用标准选择器设置,右边的两个列表用斧头选择器设置)


尝试切换到block显示,然后使用您想要的任何样式。 a元素将填充li元素,您将能够根据需要修改它的外观。 不要忘记将li填充设置为0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

没有父选择器; 只是没有以前的兄弟选择器的方式。 没有这些选择器的一个很好的理由是因为浏览器必须遍历元素的所有子元素以确定是否应该应用类。 例如,如果您写道:

body:contains-selector(a.active) { background: red; }

然后浏览器必须等到它已加载并解析所有内容,直到</body>确定页面是否应为红色。

本文为什么我们没有父选择器详细解释它。


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

li.active > a {
    property: value;
}

至少包括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>


这是Selectors Level 4规范中讨论最多的方面。 使用此选择器将能够通过在给定选择器(!)后使用感叹号根据其子项设置元素的样式。

例如:

body! a:hover{
   background: red;
}

如果用户将鼠标悬停在任何锚点上,则会设置红色背景颜色。

但是我们必须等待浏览器实现:(


根据你的确切目标,有一种方法可以实现父选择器的有效性,而不使用一个(即使存在一个)...

假设我们有:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做些什么来使袜子块(包括袜子颜色)在视觉上使用间距突出?

什么会很好,但不存在:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在的是什么:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这将所有锚点链接设置为在顶部具有15px的边距,并将其重置为0,以便那些在LI内没有UL元素(或其他标签)的元素。





css css-selectors