Question

是否可以仅使用HTML + CSS将相同的内容应用于两个（或更多）div？

HTML

<body>
    <div class="same"></div>
    abc
    <div class="same"></div>
    def
    <div class="same"></div>
<body>

CSS

.same
{
     //styling code
}

这三个div是否可以在不使用任何JavaScript的情况下拥有{content}相同的内容？

注意如果在用户浏览器JS中关闭，我需要它用于演示目的

Answer 1

Fiddle - CSS

Fiddle - JS

在某种程度上，是的。但是它应该像这样使用吗？否。

CSS不会立即控制内容，只应用于样式设置。您可以使用::after和::before，但不应将其用于内容。但是，这是你的代码，所以你可以做你喜欢的事。

HTML：

<div class="same"></div>

<div class="same"></div>

<div class="same"></div>

CSS：

.same:after{
    content:"Using content, yes!";
}

如果你想使用javascript，你可以这样做：

var same = document.getElementsByClassName('same'), //'same' variable gets all 'same' class
i = same.length; //gets amount of elements with class of 'same'

while(i--) { //while 'i' is a number above 0 (but taking 1 away each time)
  same[i].innerHTML = "Same Text!"; //Set each element's text with class of 'same' to 'Same Text!'
}

此方法不需要任何jQuery，因此无需添加任何外部文件即可继续工作。

Answer 2

没有。 CSS不控制内容。

嗯，大多数情况。您可以使用：before和：after伪类内容，但这应该保留给UI元素，而不是实际内容，

div的内容相同，只能通过HTML + CSS

2 个答案: