我最近剛開始學習 HTML & CSS，有很多疑問，這是其中之一
誰能解釋一下我是否必須為我的代碼中的每個 h2 上課以使作業“ h2[class=subtitle] {} ” 那么為什么我不應該簡單地提及“ .subtitle {} ”
所以，請解釋我在哪里可以使用 h2[class=value] 格式以及我在哪里可以使用 .subtitle
.subtitle {
color: red;
}
/* or */
h2[class=subtitle] {
color: red;
}<h2 class="subtitle">About Me</h2>
<h2 class="subtitle">Services</h2>
<h2 class="subtitle">Contact Us</h2>uj5u.com熱心網友回復：
.subtitle將適用于具有包含 的屬性的任何元素，而不管其型別或屬性中的其他條目。例如，將匹配以下所有元素：classsubtitleclass.subtitle {}
<h1 class="subtitle">Subtitle</h1>
<h2 class="red-text subtitle">Subtitle</h2>
<p class="subtitle text-center">Centered subtitle</p>
但是，h2[class=subtitle]只會針對<h2>具有類屬性匹配的元素subtitle。如果類名有附加值，或者元素不是 ，它將不匹配<h2>，即：
<h2 class="subtitle"> <!-- matches -->
<h2 class="subtitle red"> <!-- won't match -->
<h1 class="subtitle"> <!-- won't match -->
然而，值得注意的是特異性。h2[class=subtitle]比它更具體的.subtitle任何樣式都將覆寫.subtitle.
作為一般規則，您應該避免撰寫[class=]選擇器，因為它們非常具體，并且難以將樣式表重用于其他元素，并且意味著如果您的標記發生更改，則需要進行重構。
方括號表示法實際上稱為“屬性選擇器”，可用于根據元素的屬性和值來選擇元素。你可以在這里閱讀更多關于它的資訊。還值得注意的是，除了=在屬性選擇器內部之外，還可以使用相等檢查，如上面 MDN 鏈接的語法部分所述。
uj5u.com熱心網友回復：
[class=subtitle]目標元素只有subtitle和類。
[class="subtitle"]{
color:red;
}<div class="subtitle">subtitle</div>
<div class="subtitle A">subtitle A</div>如果你不需要指定你的元素只有一個類來應用你的樣式，你應該使用.subtitle.
通過添加h2之前，您只針對應用h2了類的元素subitle，它更具體。
[...]通常用于選擇type輸入或自定義中的屬性data-...
input{
border:3px solid black;
}
[type=text]{
background-color:red;
}
input[type=text]{
/*more specific : priority*/
background-color:orange;
}<input type="text">
<input type="email">您可以在此處檢查選擇器和組合器(MDN)。
uj5u.com熱心網友回復：
h2[class=subtitle]更具體 （google that...），因此推翻了不太具體的.subtitle選擇器（這也適用于具有該類的其他標簽）。
不過，您寧愿使用也不愿h2.subtitle {...}將h2[class=subtitle] {...}類與標簽結合起來。h2[class=subtitle] {...}實際上使用屬性選擇器而不是類選擇器。
uj5u.com熱心網友回復：
.classname可用于您分配該類的任何元素，而h2.classname用于H2僅包含該類分配的元素。
如果您只想對每個H2元素進行更改，只需使用
h2 {
color: red;
}
來源：https ://www.w3schools.com/tags/tag_hn.asp
uj5u.com熱心網友回復：
在 CSS 選擇器中使用 [] 匹配屬性及其值。
h2[] 匹配所有 h2 的屬性值恰好是 subtitle 而 h2.subtitle 匹配所有包含“subtitle”類的 h2 標簽。
您可以查看MDN上的 CSS 屬性選擇器
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478196.html
下一篇：使用CSS的HTML表格列樣式