有一个CSS父母select器？
如何select作为锚元素的直接父元素的<li>元素？
在例子中，我的CSS会是这样的：
li < a.active { property: value; }
很显然，有这样的JavaScript的方法，但我希望有一种解决scheme，原生存在的CSS级别2。
我正在尝试的样式菜单是由CMS发出的，所以我不能将活动元素移动到<li>元素中（除非我主题菜单创build模块，我不想这样做）。
有任何想法吗？
目前没有办法在CSS中select元素的父元素。
如果有办法做到这一点，它会在当前的CSSselect器规格：
- select器3级规格
- CSS 2.1select器规格
同时，如果您需要select父元素，则必须使用JavaScript。
select器4级工作草案包括:has()伪类，与jQuery实现相同。 截至2017年4月， 这仍然不被任何浏览器支持 。
使用:has()原来的问题可以用这个来解决：
li:has(> a.active) { /* styles to apply to the li tag */ }
我不认为你只能在CSS中select父项。
但是，因为你似乎已经有了一个.active类，将这个类移动到li （而不是a ）会不会更容易？ 这样，你可以只访问li和a通过CSS。
你可以使用这个脚本 。
*! > input[type=text] { background: #000; }
这将select文本input的任何父项。 但是等等，还有更多。 如果你愿意，你可以select一个指定的父母：
.input-wrap! > input[type=text] { background: #000; }
或者在活动时select它：
.input-wrap! > input[type=text]:focus { background: #000; }
看看这个HTML：
<div class="input-wrap"> <input type="text" class="Name"/> <span class="help hide">Your name sir</span> </div>
您可以在input处于活动状态时selectspan.help并显示它：
.input-wrap! .help > input[type=text]:focus { display: block; }
还有更多的function; 只需检查插件的文档。
顺便说一句，它在IE中工作。
正如其他一些人所提到的，没有一种方法可以使用CSS来devise元素的父类，但下面的代码适用于jQuery ：
$("a.active").parents('li').css("property", "value");
在css2中没有办法做到这一点。 你可以将这个类添加到li中并引用a
li.active > a { property: value; }
没有父母select器; 只是没有以前的兄弟select器的方式。 没有这些select器的一个好的理由是因为浏览器必须遍历一个元素的所有子元素来决定是否应该使用一个类。 例如，如果你写道：
body:contains-selector(a.active) { background: red; }
然后浏览器将不得不等待，直到它已经加载并parsing所有内容，直到</body>确定页面是否应该是红色的。
本文为什么我们没有父母select器详细解释它。
CSSselect器“ General Sibling Combinator ”也许可以用于你想要的：
E ~ F { property: value; }
这匹配前面有一个E元素的任何F元素。
我肯定遇到过这样的情况，但不幸的是父select器不存在于CSS中。
你能解释一下你想达到什么吗？ 解决scheme可能有另一种方法，例如将样式移动到li ，然后在a.active或通过子select器禁用它。
尝试切换到block显示，然后使用任何你想要的风格。 a元素将填充li元素，你将能够修改它的外观，只要你想。 不要忘记将li填充设置为0。
li { padding: 0; overflow: hidden; } a { display: block; width: 100%; color: ..., background: ..., border-radius: ..., etc... } a.active { color: ..., background: ... }
据我所知，不在CSS 2中。 CSS 3具有更健壮的select器，但并不是在所有浏览器中都一致实现。 即使使用改进的select器，我也不相信它会完成您在示例中指定的内容。
这是Selectors Level 4规范中讨论最多的方面。 使用这个select器将能够通过在给定select符（！）之后使用感叹号来根据其子对样式进行样式化。
例如：
body! a:hover{ background: red; }
将会设置一个红色的背景颜色，如果用户hover在任何锚点。
但是我们必须等待浏览器执行:(
您可能会尝试使用超链接作为父级，然后更改hover的内部元素。 喜欢这个：
a.active h1 {color:red;} a.active:hover h1 {color:green;} a.active h2 {color:blue;} a.active:hover h1 {color:yellow;}
这样，您可以根据父元素的滚动更改多个内部标签中的样式。
我知道OP正在寻找一个CSS解决scheme，但使用jQuery很容易实现。 在我的情况下，我需要find包含在子<li>中的<span>标签的<ul>父标签。 jQuery有:hasselect器，因此可以通过它包含的子项来标识父项：
$("ul:has(#someId)")
将select具有id为someId的子元素的ul元素。 或者回答原来的问题，像下面这样的应该做的伎俩（未经testing）：
$("li:has(.active)")
目前没有父母select，甚至在W3C的任何谈判中都没有讨论过。 您需要了解浏览器如何评估CSS以真正了解我们是否需要CSS。
这里有很多技术性的解释。
Jonathan Snook解释了如何评估CSS 。
克里斯Coyier在家长select的谈判 。
Harry Roberts再次撰写高效的CSSselect器 。
但是， 尼可·沙利文（Nicole Sullivan）对积极的趋势有一些有趣的事实
这些人都是前端开发领域的顶级人物。
有人build议这样的事吗？ 只是一个横向菜单的想法…
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%; }
更新的演示和其余的代码
另一个例子如何使用它与文本input – select父字段集
W3C排除了这样一个select器，因为它会在浏览器上产生巨大的性能影响。
从技术上讲，没有直接的方法来做到这一点，你可以用jQuery或JavaScript来sorting。
但是，你也可以做这样的事情。
a.active h1 {color:blue;} a.active p {color: green;}
jQuery的
$("a.active").parents('li').css("property", "value");
如果你想实现这个使用jQuery这里是jQuery父select器的参考
有一个扩展CSS的插件，包括一些非标准的function，可以真正帮助devise网站。 这就是所谓的EQCSS 。
EQCSS增加的一个东西是一个父母select器。 它适用于IE8以上的所有浏览器。 格式如下：
@element 'a.active' { $parent { background: red; } }
所以在这里我们已经打开了每个元素a.active的元素查询，而对于这个查询中的样式，像$parent这样的东西是有道理的，因为有一个参考点。 浏览器可以find父项，因为它与JavaScript中的parentNode非常相似。
下面是一个演示$parent和另一个$parent演示在IE8中工作 ，以及一个截图，如果你没有IE8的testing 。
EQCSS还包括选定元素之前元素的元select器 $prev ，仅用于匹配元素查询的那些元素的$this ，等等。
虽然目前在标准CSS中没有父母select器，但是我正在开发一个名为ax的（个人）项目（即增强CSSselect器语法/ ACSSSS ），其中包括7个新的select器：
- 一个直接的父母select器
<（启用相反的select） - 一个任何祖先select器
^（这使相反的select到[SPACE]）
斧头目前处于比较早的BETA阶段的发展阶段。
在这里看到一个演示：
http://rounin.co.uk/projects/axe/axe2.html
（将左边的两个列表与标准select器进行比较，右边的两个列表用axselect器进行比较）
伪元素:focus-within如果后代有焦点，则可以select父项。
如果元素具有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中，我们可以级联到层次结构中的属性，而不是沿着相反的方向。 要修改子事件的父types，可能使用jQuery。
$el.closest('.parent').css('prop','value');
不，你不能只在CSS中select父项。
但是，因为你似乎已经有了一个.active类，把这个类移到li （而不是a ）会不会更容易？ 这样，你可以只访问li和a通过CSS。
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; }
简单的答案是NO ，我们在这个阶段没有parent selector ，但是如果你还没有交换元素或类，第二个select就是使用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;
对于那些试图摆脱父select器缺乏的人来说，简单的帮助就是：最简单的是两行jQuery。
让我们根据hinnerinput的validation来找出我们要改变<form>元素的类的情况：
HTML：
<div class="parent-row"> <label>Form 1</label> <input type="text" name="field1" /> <input type="text" class="validation-error" name="field2" /> <input type="text" name="field3" /> </div>
CSS：
.make-red { color:red }
JQuery的：
if($( "input" ).hasClass( "validation-error" )) { $( ".parent-row" ).addClass( "make-red" ); }
