0

我正在做这样的事情但是，这个词world不会出现。在头部 css 中声明该规则，它工作正常。

谁能给我解释一下？

<span id="aa" style="#aa::after{content=" world";}">hello</span>
4

4 回答 4

3

不可以。style 属性仅定义给定 HTML 元素的样式属性。伪类是选择器家族的成员，不会出现在属性中。

于 2013-06-10T03:04:06.627 回答
2

该style属性不接受选择器。它只接受适用于当前元素的规则。您不能使用style属性执行此操作。

于 2013-06-10T03:02:04.923 回答
0

工作 jsFiddle 演示

您必须将 CSS 与 HTML 分开：

<!doctype html>
<html>
<head>
    <title>My Web Page</title>
    <style>
        #aa:after {
            content: 'world';
        }
    </style>
</head>
<body>
    <span id="aa">hello</span>
</body>
</html>

最好创建一个带有.css扩展名的文件，例如styles.css，并将样式放入其中：

#aa:after {
    content: 'world';
}

在您的 HTML 中，链接到此文件：

<!doctype html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <span id="aa">hello</span>
</body>
</html>
  • 确保您的html和css文件在同一个文件夹中。
于 2013-06-10T03:04:02.407 回答
0

该style属性将样式应用于当前元素；它不能包含带有选择器的完整样式表规则。

尽管这种情况下的选择器恰好匹配相同的元素，但如果可能的话，您也可以这样做，这几乎没有意义：

<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>
于 2013-06-10T03:04:07.040 回答