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]-这是一个属性选择器，它将针对任何具有已定义"class"属性的元素
• .h83-这将针对类为"h83"的元素

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

简化

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

.h83 { height:43px !important;}

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

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

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

如果使用基于id的#id或基于类的.class选择器，则不需要分别用*[id|class]作为它们的前导，因为#或.字符将自行处理。

Answer 2

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

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