html - css 行 : *[class]. testClass{ } 实际上是什么意思？

Question

我刚受聘为一家营销公司创建交互式电子邮件，这是一些前沿的东西。

我正在浏览离开这里的人的模板，他的 CSS 有一些我无法理解的东西。我负责创建新的 CSS 文件和模板，但我以前从未见过。有人可以帮我弄清楚这一切意味着什么吗？我在网上找不到任何相关信息

例如，有些引导符是 *[class]，有些引导符是 *[id]，有些引导符没有这些。

这是一个例子。

*[class].h83 {
    height:43px !important;
}

*[class].pt50 {
    padding-top:50px;
}

*[class].pl30 {
    padding-left:30px;
}

*[class].anim_h {
    display:none;
}

*[id]#MMGContainer {
    width:640px !important; 
    height:500px !important;
    position:relative; 
    text-align:left; 
    display:block;
    overflow:hidden;                
}

*[id]#MMGContainer #hotspot_03_btn.hotspot:after {                
    top:166px;
    padding:0;
    display:inline-block; 
    content: url(images/1/icon-2.png);
}

#mobile-cta, .mobile-only { 
    display: block !important;
    max-height: none !important;
    width: 100% !important; 
    height: auto !important; 
    overflow: visible !important; 
}

Answer 1

大多数这些声明都过于冗长，可以简化很多。

示例和分解

让我们以 *[class].h83 为例，因为它有一些事情正在发生:

• * - 这只是一个通用选择器，所以它在这里没什么用。
• [class] - 这是一个 attribute selector ，它将以具有定义的“类”属性的任何元素为目标。
• .h83 - 这将以类为“h83”的元素为目标。

所以将所有这些东西放在一起，您将获得一种样式，该样式针对具有“h83”类属性的任何元素。

简化

正如我最初提到的，几乎所有这些样式都过于冗长。前面的 *[class].h83 示例可以很容易地使用一些简单的东西重写:

.h83 { height:43px !important;}

这是为什么？你知道通用选择器 * 将处理所有元素的目标，因此在这种情况下不会非常具体。其次，您知道如果您使用的是 .h83，您将针对具有 h83 类属性的元素，因此您已经可以保证具有类属性(因此您不需要属性选择器)。

关于简化选择器的注意事项

目前，您所有的选择器都以 * 和某种类型的属性选择器为前缀。虽然这可行，但通常没有必要。

如果您使用基于 id 的 #id 或基于类的 .class 选择器，那么您不需要在它们前面加上 *[ id|class] 分别作为 # 或 。 字符将自行处理。