css line: *[class].testClass{ } 实际上是什么意思？答案

【问题标题】：What does the css line: *[class].testClass{ } actually mean?css line: *[class].testClass{ } 实际上是什么意思？
【发布时间】：2016-11-01 17:36:57
【问题描述】：

我刚受雇为一家营销公司创建交互式电子邮件，这是一些前沿技术。

我正在浏览离开这里的那个人的模板，他的 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; 
}

【问题讨论】：

这是一个属性选择器，只是为了检查它是否具有该属性。它在这里看起来完全没用。您应该从这里开始进行更改！
如果没有进一步的上下文，也许他们解雇了这个人，因为他做了*[class].pt50 之类的事情，而他本来可以做.pt50
这看起来像是一种提高特异性的方式。例如，.h83 和 *[class].h83 匹配相同的元素。但是.h83 的特异性为 {0,0,1,0} 而*[class].h83 的特异性为 {0,0,2,0}，因此如果具有两个选择器的规则包含相同的属性，则来自 @ 987654330@ 规则会赢。

标签： html css email interactive

【解决方案1】：

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

示例和细分

让我们以*[class].h83 为例，因为它发生了一些事情：

* - 这只是一个通用选择器，所以它在这里没有多大作用。
[class] - 这是一个attribute selector，它将针对任何具有已定义“类”属性的元素。
.h83 - 这将针对具有“h83”类的元素。

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

简化

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

.h83 { height:43px !important;}

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

关于简化选择器的说明

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

如果您使用基于 id 的 #id 或基于类的 .class 选择器，那么您不需要分别在它们前面加上 *[id|class]，因为 # 或 . 字符会很小心自己的。

【讨论】：

【解决方案2】：

我刚刚在一封营销电子邮件中发现了这一点。这里的答案似乎错过了“雅虎属性选择器修复”这一点。此修复程序的更新位于 Litmus 社区讨论板 https://litmus.com/community/discussions/995-update-to-yahoo-attribute-selector-fix

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

【讨论】：