CSS中td标签的类名为何用方括号包裹？技术咨询

Hey there! Let’s unpack why that CSS uses square brackets for the class attribute—great question, by the way.

First, let’s clarify the two ways to target elements by class here:

• The class selector you’re probably used to: .spechide matches any element that has the spechide class, even if it has other classes too (like <td class="spechide extra-class">).
• The attribute selector [class="spechide"] is a strict, exact match—it only targets elements where the class attribute’s value is exactly "spechide". If the element has multiple classes (e.g., <td class="spechide another-class">), this selector won’t pick it up.

Why would someone use this instead of td.spechide? #

There are a few common reasons:

• Precision control: The developer might only want to hide <td> elements that only have the spechide class, not any <td> that includes spechide alongside other classes. This prevents accidentally hiding elements that share the class but have other purposes.
• Specificity clarity: While attribute selectors have the same specificity weight as class selectors, writing td[class="spechide"] makes it explicit that you’re targeting <td> elements with an exact class value—this can help avoid conflicts with other styles that might target .spechide on different elements.
• Legacy or team conventions: Sometimes this is just a holdover from older codebases, or a team’s preferred way to write selectors for strict matching scenarios.

As a side note: If the goal was simply to hide all <td> elements with the spechide class (regardless of other classes), the more concise and common approach would be td.spechide { display: none !important; }. The attribute selector here is just a stricter alternative.

内容的提问来源于stack exchange，提问作者HunterLiu