CSS中是否可以有多個ID選擇器

Question

這是正確的，並且可以在所有瀏覽器中正常工作嗎？

<div id="test">
  Some stuff
    <div id="anotherTest">
      More stuff
    </div>
  Even more stuff
</div>

CSS ...

#test #anotherTest {
  color:red;
}

只有“更多內容”為紅色。

我知道我可以使用類，並且有幾種不同的方法可以實現這一點，但是基本上我是在問通過幾個ID選擇帶有CSS的元素嗎？

謝謝。

Answer 1

是的，這種方法是可行的

#test #anotherTest {
  color:red;
}

它選擇id anotherTest的元素，其ancestor的id test

請閱讀此

Answer 2

為了回答您的問題，它可以跨瀏覽器運行，並且您所寫的內容是正確的。 只有“更多內容”將顯示為紅色。

但是不建議使用ID進行樣式設置。 在這里可以找到一個很好的參考，以了解更多相關信息。 順便說一句，如果您想了解更多有關編寫優質CSS的知識，那么這篇文章非常有用！

關於ID的最重要部分是：

• 在一個頁面中，ID不能被多次使用。
• 類在一個頁面中只能存在一次或一百萬次。
• ID通常可以將其特征抽象為許多可重用的類。
• ID絕對比類更具體。
• 這意味着沒有任何鏈接的類可以覆蓋ID。

Answer 3

是的，這是可能的。

如果您希望#anotherTest和#test都為紅色，請添加一個逗號。

#test, #anotherTest {
    color:red;
}

Answer 4

有多種使用CSS設置網頁樣式的方法，但看來您的問題不僅與樣式有關，甚至與選擇器有關。 查看以下關於CSS選擇器的w3school鏈接

http://www.w3schools.com/cssref/css_selectors.asp

以及CSS選擇器的出色演示

http://www.w3schools.com/cssref/trysel.asp?selector=.intro

它支持所有流行的瀏覽器。

Answer 5

您應該嘗試始終使用類，即：

<div class="test">
  Some stuff
    <div class="anotherTest">
      More stuff
    </div>
    <div class="andAnotherTest">
      Even More stuff
    </div>
  Even more stuff
</div>

然后在CSS中：

.test .anotherTest {
   color: red;
}

.test .andAnotherTest {
  color: green;
}