假設我有一個包含box類的html元素: & ltp class = & quot信箱警報& quot& gt這里的內容& lt/p & gt；

最近我學習了一種在CSS中定位元素的方法，所以如果我想選擇任何帶有box類的元素，我可以使用這個: *[class~=box] {border: 2px純灰；}

我想知道，這和僅僅通過類名定位一個元素是不是完全一樣？還是我沒弄對？ 。box {border: 2px純灰；}

如果相同，在什么情況下使用第二種方法比第一種方法更合適？

屬性選擇器并不是真正為類設計的，它是為元素中的其他屬性設計的，例如a[href * = & quot；谷歌& quot]，但是可以像這樣設計元素，這肯定會被認為是反模式。

雖然。classname和[class ~ = & quot；classname & quot]將樣式化相同的元素，那些選擇器的CSS特異性將被不同地計算——老實說，我不是很確定，但是*[class ~ = & quot；classname & quot]可能會贏。classname，這是一個使用像這樣編寫的樣式的人應該知道的。

為了選擇，選擇器確實是等價的。它們之間的差異既是現實的，也是歷史的。

實際差異 從實用的角度來看，類選擇器可讀性更好，也更簡單。它的效率也更高，因為對于CSS和DOM查詢，瀏覽器對待類的方式不同于其他屬性。當您希望從& quot由空格分隔的單詞列表，其中一個正好是value & quot(MDN規格)。

例如，如果您的數據屬性有幾個可能的值可供選擇，如下所示:

<div data-colors="blue">
<div data-colors="yellow blue">
<div data-colors="red blue green">

屬性選擇器[data-colors~=blue]將選擇所有三個元素，而不考慮屬性中的任何其他值。

歷史差異 從歷史上看，類選擇器。box是原始CSS規范的一部分(即& quotCSS 1 & quot).這意味著過去和現在的任何瀏覽器都支持這個選擇器。另一方面，屬性選擇器[class~=box]只是CSS規范第二次迭代的一部分(即& quotCSS2 & quot)并因此不被所有可能的瀏覽器支持；盡管您必須追溯到Internet Explorer 6，才能發現這個選擇器的問題。

一個重要的區別是在你的類中使用了一些特殊的名字。

這里有一個例子來說明:

.box {
  height:50px;
  background:red;
  margin:5px;
}

.80% {
  width:80%;
}

.50% {
  width:50%;
}

<div class="box 80%"></div>
<div class="box 50%"></div>

兩者會有完全相同的結果，所以*[class ~ = & quot；classname & quot]相當于。classname，只是選擇是使用class屬性進行的。請參見屬性選擇器以獲得關于此語法的更多信息。

.classname {
  color: blue;
}

*[class~="classname"] {
  color: red;
}

<p class="classname">Content here</p>