css 行：*[class].testClass{ } 到底是什么意思？

Question

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

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

例如，有些领先 *[class]，有些领先 *[id]，有些领先 none。

这是一个例子。

*[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，它将以具有定义的 'class' 属性的任何元素为目标。
.h83 - 这将针对具有 class 'h83'.

因此，将所有这些东西放在一起，您将获得一种样式，该样式针对具有 'h83' 的 class 属性的任何元素。

简化

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

这样微不足道的东西重写

.h83 { height:43px !important;}

这是为什么？好吧，您知道通用选择器 * 将处理所有元素的定位，因此在这种情况下不会非常具体。其次，您知道如果您使用 .h83，您将以 class 属性为 h83 的元素为目标，因此您已经保证拥有 class属性（因此您不需要属性选择器）。

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

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

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

Answer 2

我刚刚在一封营销电子邮件中看到了这一点。这里的答案似乎忽略了"Yahoo Attribute Selector Fix"这一点。此修复程序的更新位于 Litmus 社区讨论板上 https://litmus.com/community/discussions/995-update-to-yahoo-attribute-selector-fix

这是最初的 Litmus 答案https://litmus.com/community/discussions/1285-class-header-selectors-format

css 行：*[class].testClass{ } 到底是什么意思？

What does the css line: *[class].testClass{ } actually mean?

html

css

email

interactive