CSS中的括号用法

问题描述

有人可以帮助我了解此例中括号的用法吗？我习惯在CSS中看到类名，例如.mobilecontent {}。我试图了解这有何不同？

    <style>@media screen and (max-width:480px) {   
                div[class=mobilecontent]{
                display: block !important;
                max-height: none !important;
                }
            }</style>

解决方法

假设您的意思是方括号[...] *，即attribute selector。可以与class或任何其他HTML属性一起使用。

此处的区别在于，它仅与属性（class="mobilecontent"）具有该确切值的元素匹配。例如，它不会将元素与class="mobilecontent some-other-class"匹配。同时，.mobilecontent选择器将两者都匹配。

---

*在美式英语中，不带修饰符的“括号”通常是指代括号，但在英式英语中，括号是指(...)。

,

[attribute=value]选择器用于选择具有指定属性和值的元素。参考：https://www.w3schools.com/cssref/sel_attribute_value.asp

它可以用在不同的情况下，例如，如果您要在类中从链接中删除文本修饰，则为

a[class] {
  text-decoration: none;
}

关于您的问题的示例将在屏幕上具有等于或小于480px的max-width和名为mobilecontent的类时应用样式。