Question

好像我被困了。为什么下面的代码显示12px但不是50px的消息？不是class1有高如果我不允许更改*属性，如何解决？甚至！重要没有帮助。

<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>

Answer 1

这是因为*还会在<span>中选择<div>标记。

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

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

上述方法可行。

Answer 2

这应该有效

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

*将选择div内的范围。删除<span>作为子元素将起作用。或明确定位。

Answer 3

*将包含<span>，因此您可以为span提供一个id或一个类，并将css规则应用于此。或者这样做：

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

Answer 4

选择器*是一个catchall（意味着它选择所有内容。）

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

.class1 span

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

div.class1 span

或者您可以在跨度本身添加一个类并使用

选择它

span.class2

：）

Answer 5

或者您可以使用！important

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

一个工作示例：

http://jsfiddle.net/gWQeZ/

html css * {...}：无法更改字体大小

5 个答案: