子組合器（>）CSS是否會影響同級元素？
[英]does child combinator (>) css affects sibling elements?
問題描述
以下是我的HTML
<ul>
<li>title1
<ul>
<li>subtitle1.1</li>
<li>subtitle1.2</li>
</ul>
</li>
<li>title2
<ul>
<li>subtitle2.1</li>
<li>subtitle2.2</li>
</ul>
</li>
</ul>
這是CSS
ul > li {
color: red;
}
我期望只有title1和title2為紅色。 但是所有同級元素， subtitlle1.2 subtitlle1.1 ， subtitlle1.2 ， subtitlle2.1 ， subtitlle2.2變為紅色。
子組合器應僅影響子項，但此處的同級繼承了頂級子項的屬性。 您能否詳細說明背后的情況？ 如果我只希望上面的標題部分為紅色，css應該是什么樣？
3 個解決方案
解決方案1
4 已采納 2013-02-09 14:33:58
樣式也適用於字幕，不是因為它們在外部列表中，而是因為它們是其自身列表的直接子代。
在給出標記的情況下，沒有其他信息，沒有選擇器只能定位列表的第一級。
如果知道列表在另一個元素內，則可以使用直接子組合器來定位外部列表：
div > ul > li {
color: red;
}
您可以覆蓋內部列表的樣式：
ul > li {
color: red;
}
ul > li > ul> li {
color: black;
}
如果您可以向外部列表中添加ID或類，則可以使用它來定位它，並且它不適用於內部列表，因為它們沒有該ID或類：
.myList > li {
color: red;
}
解決方案2
1 2013-02-09 14:59:36
幕后花絮
這是由於默認情況下 color屬性是繼承的 。 因此，如果在頂部元素上定義一種顏色（例如<body> ），它將應用於所有不覆蓋此屬性的子級。 這對於CSS中心的級聯機制至關重要 。
解決方案
要解決您的問題，您可以：
HTML解決方案：添加更多語義
首先，使用（可能添加class屬性）將文本包裝到標簽中：
<ul>
<li><span class="term">title1</span>
...
</li>
...
</ul>
然后定義顏色：
ul > li > span,
ul .term {
color: red; # only apply to the span
}
- 優點：添加語義並更有效地使用CSS；
- 缺點：未排序列表（
<ul>）的使用並沒有真正適應。 我建議使用定義列表 （<dl>）。
CSS解決方案：覆蓋屬性
您可以簡單地強制字幕使用您想要的任何顏色：
ul > li > ul > li {
color: black; # back to default document color
}
- 專業人士：僅CSS；
- 缺點：增加額外的規則，降低可讀性。
解決方案3
0 2013-02-09 14:36:28
我會為標題添加標簽包裝器，並以此方式設置樣式：
<ul>
<li><span>title1</span>
<ul>
<li>subtitle1.1</li>
<li>subtitle1.2</li>
</ul>
</li>
<li><span>title2</span>
<ul>
<li>subtitle2.1</li>
<li>subtitle2.2</li>
</ul>
</li>
</ul>
在這種情況下，您的CSS將是：
ul > li > span {
color: red;
}
這樣，只有title1和title2會變成紅色。
為什么通用兄弟組合器允許切換偽元素的內容，而不是相鄰的兄弟？
[英]Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.