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'来定位元素.

因此,将所有这些内容组合在一起,您将获得一个样式,其目标是具有类属性'h83'的任何元素.

简单化

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

.h83 { height:43px !important;}

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

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

目前,所有选择器都带有前缀*和某些类型的属性选择器.虽然这会起作用,但通常是不必要的.

如果您使用基于id #id或基于类的.class选择器,那么您不应该*[id|class]分别为它们添加前缀,因为#或者.角色将自己处理它.