Question

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

任何人都可以向我解释这个吗？

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

Answer 1

没有。 style属性仅定义给定HTML元素的样式属性。伪类是选择器族的成员，它们不出现在属性中。

Answer 2

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

Answer 3

<强> Working jsFiddle Demo

您必须将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文件位于同一文件夹中。

Answer 4

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

虽然在这种情况下选择器碰巧匹配相同的元素，但如果可能的话，你也可以这样做，这没什么意义：

<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>

:: after，::选择器之前的元素样式

4 个答案: