我如何選擇& lt李& gt是錨元素的直接父元素。
舉個例子，我的CSS大概是這樣的:
li < a.active {
property: value;
}顯然，使用JavaScript有很多方法可以做到這一點，但我希望CSS級中存在某種固有的變通方法。
我試圖設計的菜單是由CMS提供的，所以我不能將活動元素移動到& lt李& gt元素...(除非我對菜單創建模塊進行主題化，這是我不愿意做的)。
目前還沒有一種方法可以在所有瀏覽器中選擇CSS中元素的父元素。
選擇器4級工作草案包括一個:has()偽類，它將提供這一功能。它將類似于jQuery實現，但目前不被Firefox支持。
li:has(> a.active) { /* styles to apply to the li tag */ }Firefox是目前唯一默認不支持它的主流瀏覽器。
與此同時，如果您需要選擇一個完全跨瀏覽器支持的父元素，您將不得不求助于Firefox中的JavaScript。
您可以使用:has() CSS偽類
但它對瀏覽器的支持有限(目前Firefox不支持)。
我認為你不能只在CSS中選擇父節點。
但是既然你已經有了。活動類，將該類移動到li(而不是a)會更容易。這樣你就可以只通過CSS訪問li和a。
您可以使用以下腳本:
*! > input[type=text] { background: #000; }這將選擇文本輸入的任何父項。但是等等，還有很多。如果需要，您可以選擇指定的父項:
.input-wrap! > input[type=text] { background: #000; }或者在它活躍時選擇它:
.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>當輸入激活時，您可以選擇span.help并顯示它:
.input-wrap! .help > input[type=text]:focus { display: block; }還有更多的能力；只需查看插件的文檔。
順便說一句，它在InternetExplorer中工作。
正如其他幾個人提到的，沒有辦法只使用CSS來樣式化元素的父元素，但是下面的例子可以和jQuery一起使用:
$("a.active").parents('li').css("property", "value");沒有父選擇器；就像沒有先前的兄弟選擇器一樣。沒有這些選擇器的一個很好的理由是，瀏覽器必須遍歷一個元素的所有子元素，以確定是否應該應用一個類。例如，如果您寫道:
body:contains-selector(a.active) { background: red; }然后，瀏覽器將不得不等待，直到它已經加載并解析了所有內容，直到& lt/body & gt；以確定頁面是否應該是紅色的。
為什么我們沒有父選擇器這篇文章詳細解釋了這一點。
偽元素:focus-within允許在后代擁有焦點時選擇父元素。
如果元素具有tabindex屬性，則該元素可以被聚焦。
瀏覽器支持焦點在內
塔賓德克斯
例子
.parent:focus-within {
background: hsl(199deg, 65%, 73%);
}
/* demo styles */
body {
margin: 0;
}
.parent {
background: hsl(0, 0%, 80%);
min-height: 100vh;
display: grid;
place-content: center;
}
.child {
background: hsl(0, 0%, 0%);
color: white;
padding: 3rem;
outline: 0;
cursor: pointer;
font: 18px/1.25 sans-serif;
width: 20ch;
}<div class="parent">
<div class="child" tabindex="0">
Click or Focus on me, my parent will change.
</div>
</div>在CSS2中沒有辦法做到這一點。您可以將該類添加到li中并引用a:
li.active > a {
property: value;
}嘗試將a切換到阻止顯示，然后使用您想要的任何樣式。a元素將填充li元素，您可以根據需要修改它的外觀。不要忘記將li填充設置為0。
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}CSS選擇器“通用兄弟組合器”可以用于你想要的:
E ~ F {
property: value;
}這匹配任何前面有E元素的F元素。
據我所知，CSS 2中沒有。CSS 3有更健壯的選擇器，但是并沒有在所有的瀏覽器中實現。即使有了改進的選擇器，我也不相信它能完全實現您在示例中指定的功能。
這是選擇器級別4規范中討論最多的方面。 這樣，選擇器就能夠根據子元素的樣式，在給定的選擇器(！idspnonenote)后使用感嘆號。).
例如:
body! a:hover{
background: red;
}如果用戶懸停在任何錨點上，將設置紅色背景色。
但是我們必須等待瀏覽器的實現:(
您可以嘗試使用hyperlink作為父元素，然后在懸停時更改內部元素。像這樣:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}這樣，您可以基于父元素的翻轉來更改多個內部標記中的樣式。
我知道OP正在尋找一個CSS解決方案，但是使用jQuery很容易實現。在我的情況下，我需要找到& ltul & gt& lt的父標記span & gt標簽包含在子& lt李& gt。jQuery有:has選擇器，所以可以通過它包含的子節點來識別父節點:
$("ul:has(#someId)")將選擇具有id為someId的子元素的ul元素?；蛘呋卮鹱畛醯膯栴}，類似下面的內容應該可以解決問題(未經測試):
$("li:has(.active)")下面是一個使用指針事件和懸停的方法:
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>在CSS選擇器4規范中，CSS引入了一個名為:has()的新選擇器，它最終允許我們選擇父代。這意味著我們將能夠定位一個包含特定子元素的CSS元素。Safari已經支持這一功能，Chrome 105也支持。顯示了完整的支持表 給你。
父選擇器工作方式 在CSS中，如果我們想要選擇一些東西，我們使用下行DOM的選擇器。
例如，在div標簽中選擇一個p標簽如下所示:
div p {
color: red;
}直到現在，還不能真正選擇包含p標簽的div標簽，這意味著我們必須求助于Javascript。這沒有在CSS中實現的主要原因是這是一個相當昂貴的操作。CSS解析起來相對較快，但是選擇父標簽需要相對大量的處理。
使用:has選擇器，我們現在可以選擇有p個子元素的div元素，或者任何選擇器的正常組合。
例如，選擇一個帶有子元素p的div，如下所示:
div:has(p) {
color: red;
}這將使任何帶有子元素p的div變成紅色。
將父選擇與其他選擇器相結合 就像任何其他CSS選擇器一樣，我們可以在特定的情況下組合使用它。 例如，如果您只想選擇具有直接span子級的div標記:
div:has(> span) {
color: red;
}正如:的詞匯所暗示的，它不僅僅局限于父母選擇。
例如，下面我們可以選擇一個span，它:有一個兄弟div:
span:has(+ div) {
color: red;
}或者甚至通過使用:not()選擇器選擇一個沒有子元素的元素。
例如，下面將選擇任何沒有p子級的div:
div:not(:has(p)) {
color: red;
}在CSS中選擇只包含文本的元素 CSS中一個非常常見的問題是:empty標簽不選擇包含任何文本的元素——所以有時一個元素可以包含一個空格，而:empty將不適用。has選擇器使我們能夠選擇只包含文本節點而不包含其他子元素的元素。
盡管這對于simply :empty elements with spaces(因為這將選擇任何只有文本而沒有額外的HTML DOM元素的元素)來說不是完美的解決方案，但它確實讓我們能夠選擇只有文本節點的DOM元素，這在以前是不可能的。我們可以通過下面的代碼實現這一點:
div:not(:has(*)) {
background: green;
}目前沒有父選擇器& amp它甚至沒有在W3C的任何會談中被討論過。你需要了解CSS是如何被瀏覽器評估的，才能真正理解我們是否需要它。
這里有很多技術性的解釋。
喬納森·斯努克解釋了CSS是如何被評估的。
克里斯·科伊爾談父母選擇者。
Harry Roberts再次講述如何編寫高效的CSS選擇器。
但是妮可·沙利文有一些有趣的積極趨勢。
這些人都是前端開發領域的頂尖高手。
有一個插件擴展了CSS，增加了一些非標準的功能，在設計網站時非常有用。它叫做EQCSS。
EQCSS增加的一個功能是父選擇器。它適用于所有瀏覽器，InternetExplorer8及更高版本。格式如下:
@element 'a.active' {
$parent {
background: red;
}
}因此，在這里，我們在每個元素a.active上打開了一個元素查詢，對于該查詢中的樣式，像$parent這樣的東西是有意義的，因為有一個引用點。瀏覽器可以找到父節點，因為它與JavaScript中的parentNode非常相似。
這里有一個$parent的演示和另一個在InternetExplorer8中工作的$parent演示，還有一個截圖以防你沒有InternetExplorer8來測試。
EQCSS還包括元選擇器:$prev用于所選元素之前的元素，而$this僅用于那些匹配元素查詢的元素，等等。
只是一個橫向菜單的想法...
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%; }更新的演示和其余代碼
另一個如何使用文本輸入的例子——選擇父字段集
現在都2019年了，CSS嵌套模塊的最新草案居然有這樣的東西。介紹@nest at-rules。
3.2.嵌套At規則:@nest
雖然直接嵌套看起來不錯，但它有些脆弱。一些有效的嵌套選擇器，比如。foo & amp、都是不允許的，以某些方式編輯選擇器可能會使規則意外無效。同樣，一些人發現嵌套很難從視覺上與周圍的聲明區分開來。
為了幫助解決所有這些問題，該規范定義了@nest規則，它對如何有效地嵌套樣式規則施加了更少的限制。它的語法是:
@ nest = @ nest & lt選擇器& gt{ & lt聲明列表& gt}
@nest規則的功能與樣式規則相同:它從選擇器開始，包含應用于選擇器匹配的元素的聲明。唯一的區別是@nest規則中使用的選擇器必須是嵌套的，這意味著它在某個地方包含一個嵌套選擇器。如果一個選擇器列表中的所有單個復合選擇器都是嵌套的，那么這個列表就是嵌套的。
(從上面的URL復制粘貼)。
本規范下的有效選擇器示例:
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/CSS父選擇器(也稱為:has()選擇器)終于登陸Safari TP 137。該功能目前也正在Chrome中實現。(MDN文檔)
父選擇是通過偽類:has()完成的。例如，div:has(& gt；。子)將選擇全部& ltdiv & gt子元素有一個子類。
其他示例:
選擇元素的直接父級
<div>
<p>Child Element</p>
</div>div:has(> p)選擇元素的所有父元素
<div id="grandparent">
<div id="parent">
<div id="child"></div>
<div>
</div>以下選擇器將同時選擇祖父母和父母
div:has(.child)您還可以將它用于嵌套選擇器，甚至用于其他偽類:
div:has(> :nth-child(10))其他有效的CSS操作符可用于定制查詢。
留意caniuse.com/css-has的瀏覽器兼容性。
W3C排除了這樣的選擇器，因為它會對瀏覽器產生巨大的性能影響。
從技術上講，沒有直接的方法可以做到這一點。但是，您可以使用jQuery或JavaScript來解決這個問題。
然而，你也可以這樣做。
a.active h1 {color: blue;}
a.active p {color: green;}jQuery
$("a.active").parents('li').css("property", "value");如果您想使用jQuery實現這一點，這里是jQuery父選擇器的參考。
簡短的回答是否定的；在CSS的這個階段我們沒有父選擇器，但是如果你不需要交換元素或者類，第二個選擇是使用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中沒有父選擇器，但是我正在做一個(個人的)項目，叫做axe(即。增強的CSS選擇器語法/ ACSSSS ),在其7個新的選擇器中，包括:
直接父選擇器& lt(這使得相反的選擇能夠& gt) 任何祖先選擇器^(它使相反的選擇能夠
轉向
點擊時。
基于子元素更改父元素目前只能在我們有& lt輸入& gt父元素中的元素。當輸入獲得焦點時，其對應的父元素會受到CSS的影響。
下面的例子將幫助你理解在CSS中使用:focus-within。
.outer-div {
width: 400px;
height: 400px;
padding: 50px;
float: left
}
.outer-div:focus-within {
background: red;
}
.inner-div {
width: 200px;
height: 200px;
float: left;
background: yellow;
padding: 50px;
}<div class="outer-div">
<div class="inner-div">
I want to change outer-div(Background color) class based on inner-div. Is it possible?
<input type="text" placeholder="Name" />
</div>
</div>