CSS 中的星号属性是什么意思?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1667531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:12:42  来源:igfitidea点击:

What does a star-preceded property mean in CSS?

css

提问by Majid Fouladpour

I was looking at a css file today and found the following rule set:

我今天正在查看一个 css 文件,发现以下规则集:

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

What does the star mean in *padding and *line-height?

*padding 和 *line-height 中的星号是什么意思?

Thanks.

谢谢。

回答by opello

This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).

这是与“下划线黑客”相同的“明星属性黑客”。它包括 IE 忽略的属性之前的垃圾(* 对 IE 7 有效,_ 对 IE 6 有效)。

回答by Quentin

In CSS? Nothing; it is an error.

在 CSS 中?没有; 这是一个错误。

Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.

由于某些版本的 Internet Explorer 中的错误,它们不会正确忽略无效的属性名称,因此这是提供特定于这些浏览器的 CSS 的一种方式。

Using conditional comments is clearer and safer though.

不过,使用条件注释更清晰、更安全。

回答by Quentin

The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:

星号字符是 CSS 中的有效通配符。单独使用它意味着以下 CSS 属性将用于 DOM 中的所有元素节点。例子:

*{color:#000;}

The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:

上述属性将应用于所有 DOM 元素,从而击败 CSS 中的自然级联。它只能通过专门标记 DOM 元素来覆盖,其中该目标以唯一标识符引用开始。例子:

#uniqueValue div strong{color:#f00;}

The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".

上述属性将覆盖通配符,并使出现在 div 中的所有强元素的文本都包含在 id 属性值为“uniqueValue”的元素中。

Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:

使用普遍应用的通配符(例如第一个示例)可能是编写重置样式表的一种快速而肮脏的方法。它既快速又脏,因为通配符之后的表示的细粒度定义可能会创建一个非常臃肿的样式表。如果您打算使用通配符,我建议更具体地使用它,例如:

* strong{color:#f00;}

The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.

上面的示例将使所有强元素的文本颜色为红色,而不管其他未指定唯一标识符的 CSS 属性。这被认为比使用 "!important" 声明要安全得多,因为该声明会干扰预期行为的自然功能,并且是维护的噩梦。

The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.

您示例中的星号位于错误的位置,因为它们似乎出现在属性声明中,花括号内的代码,这可能会导致错误。

回答by Bruno Lesieur

This is a hack for IE7.

这是 IE7 的黑客。

If you write this:

如果你这样写:

.test {
    z-index: 1;
    *z-index: 2;
}

on all navigator which respect the W3C Standard <div class="test"></div>HTMLElement have a z-index: 1but for IE7, this element have a z-index: 2.

在所有遵守 W3C 标准<div class="test"></div>HTMLElement 的导航器上都有一个,z-index: 1但对于 IE7,这个元素有一个z-index: 2.

This is not standard.

这不是标准的。

To achieve same thing with W3C Standard, follow this steps:

要使用 W3C 标准实现相同的目标,请按照以下步骤操作:

  • Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).

    <!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->

    <!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->

  • 添加一些 Internet Explorer 条件注释(这是对所有其他导航器的简单 HTML 注释,因此,这是一种标准方式)。

    <!--[如果 IE 7]><html lang="fr" class="ie7"><![endif]-->

    <!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->

And use the previous rules like this:

并像这样使用以前的规则:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}