1

好像我被卡住了。为什么下面的代码显示的是 12px 的消息，而不是 50px 的消息？如果我不允许更改 * 属性， class1 是不是有较高的如何解决它？即使 !important 也无济于事。

<html>
    <head>
        <style type="text/css">
            *
            {
                font-size : 12px
            }

            .class1
            {
                font-size : 50px;
            }
        </style>
    </head>
    <body>
        <div class="class1">
            <span>why it is not 50px font size?</span>
        </div>
    </body>
</html>
4

5 回答 5

12

那是因为 * 也会<span>选择<div>.

所以 * 在这种情况下更具体，因此具有优先权。

.class1 span
{
    font-size : 50px;
}

以上将工作。

于 2012-08-15T07:58:14.187 回答
2

或者您可以使用 !important

.class1 {font-size : 50px !important;}

一个工作示例：

http://jsfiddle.net/gWQeZ/

于 2012-08-15T08:45:51.987 回答
1

*将包括<span>, 所以你可以给 span 一个 id 或一个类并将 css 规则应用于它。或者这样做：

.class1 span {font-size:50px;}
于 2012-08-15T08:09:35.063 回答
1

这应该工作

div.class1 span 
{
    font-size : 50px;
}

*将选择 div 内的跨度。删除<span>作为子元素的任何一个都可以。或明确定位。

于 2012-08-15T07:59:35.473 回答
1

选择器*是一个包罗万象的东西（意味着它选择了所有东西。）

因此，要让您span被选中，您需要一个更具体的选择器：

.class1 span

应该可以工作，但您也可以选择更具体：

div.class1 span

或者您可以将一个类添加到跨度本身并使用它选择它

span.class2

:)

于 2012-08-15T08:12:13.020 回答