CSS 中能否選取父元素？

01-14

jQuery 可以實現, 想盡量避免 JS

不能。你可以在這裡查到 CSS3 提供的選擇器（Selectors Level 3）詳情： http://www.w3.org/TR/selectors/

CSS4 將很可能提供父元素選擇器，但現在連語法都沒定下來，更別提瀏覽器的實現了。

的確是可以的：Selectors Level 4 中已經新增了「Subject 」選擇器

Selectors Level 4

類似這樣：

!li &> p { border:1px solid #CCC; } /* 為 p 的父元素 li 設置一個邊框 */

2014年5月16日更新:

這個選擇器語法一直在改動:

2011年,語法是 $E &> F http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject
2012-2013年,語法是 !E &> F http://www.w3.org/TR/2012/WD-selectors4-20120823/#subject
2014年,語法改成了和 jQuery API 一樣的 :has() 偽類(Relational Pseudo-class)http://dev.w3.org/csswg/selectors/#relational

相關討論:http://lists.w3.org/Archives/Public/www-style/2014Feb/#msg408

li:has( &> p){ border:1px solid #CCC; }

但是由於在實現上存在「回溯」的問題，一直遲遲沒有瀏覽器去實現，更多關於父級選擇器的討論和實現問題參閱：如何給 W3C 組織提關於 Web 標準的建議？（父級選擇器回溯問題）

其實性能和:last-child差不多,比:nth-last-child()要好,這也是為什麼IE直到9才實現:last-child.

詳見:

Why we don"t have a parent selector
[譯]XPath和CSS選擇器

這裡有一個 CSS 選擇器說明和演示的網站：CSS4-Selectors

2015-07-23 更新：

:has() 選擇器被推遲到 Selectors Level 5 https://lists.w3.org/Archives/Public/www-style/2015Jul/0296.html

- -! 早知道我就換英文再搜一遍了,, 居然想要 Parent Selector 的人還不少

http://css-tricks.com/parent-selectors-in-css/

http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

性能方面的顧慮相當多的樣子, 可 jQuery 有了也沒聽說有重大影響啊..

說法是:

However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

CSS does not include parent selectors (a method of styling a parent based on what children it contains). This fact has been stackflow posters, but it turns out there is a very good reason for its absence. Particularly in the early days of the Internet, it was considered critically important that the page be renderable before the document has been fully loaded. In other words, we want to be able to render the beginning of the HTML to the page before the HTML which will form the bottom of the page has been fully downloaded.

A parent selector would mean that styles would have to be updated as the HTML document loads. Languages like DSSSL were completely out, as they could perform operations on the document itself, which would not be entirely available when the rendering is to begin.

https://eager.io/blog/the-languages-which-almost-were-css/

截止到答題這天還不可以。

你想要的效果肯定是，希望寫進你的通用組件中的css能支持父元素回溯的樣式，css4會增加這一功能，很可能使用has選擇器，當然標準還在制定中。

目前可替代方法很多，但是都離不開js的幫忙：

1. jquery.has()

2. cssParentSelector/jQuery.cssParentSelector.js at master · Idered/cssParentSelector · GitHub

這個東西重新解析了css文件，用了「！」的語法標記了需要被回溯的父元素，不過效率估計不會太高