css - 我希望加载特定于正在查看的页面的具有适当文本 block 和音频文件的某些 Div

Question

这对于图形来说非常简单。我有一个“外部”CSS 文件，它简单地列出了每个网页上两个不同位置的图形。每个页面的容器都单独编号(即 ID=upper6、lower6、upper7 等等)。外部 CSS 文件 (imageref.css) 只有一个列表:#upper6 {background:url(path to graphic) no-repeat;) etc.

这些负载很好。

为什么我不能对文本 block (即#uppercaption6、#lowercaption6)执行此操作。我已经尝试了所有我能想到的排列方式(背景等)。

我想做同样的事情来填充每个页面上的音频剪辑。我必须学习 jQuery 吗？在这里帮助初学者，好吗？

应要求，我扩展了我的困境:

在有问题的页面上，我首先加载了 CSS 和这样的文本文件:

<link rel="stylesheet" type="text/css" href="../includes/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="../includes/imageref.css" />

第二个文件可以只是文本，因为它的格式如下:

#upper6 {background:url(../images/phone.png) no-repeat right 0px;}
#lower6 {background:url(../images/writing_utensils.png) no-repeat right 0px;}

...

此处列出的图像链接是从 HTML 中的这一点开始调用的:

<figure id="photo_1"><a href="javascript:" onclick="upvis();" >
    <div class="figure_photo" id="upper6"></div></a></figure>

所有网页都工作正常。

问题:如何对视频剪辑和文本 block 做同样的事情？

这些区域具有相同类型的列表，但不起作用。

<video class="video-container" preload="none" controls>
    <source class="vid_mp4" id="vid01" />
</video>

或者，

<div class="CC_container">
    <div class="closed_caption" id="caption1" ></div>
</div>

我很困惑，我可以通过引用它们的“ID”轻松调用图形和照片，但不能调用视频剪辑或文本 block 。

Answer 1

这可以使用“内容”属性来完成。

例如，你可以这样做:

<div class="CC_container">
<div class="closed_caption" id="caption1" >your dynamic text here: </div>
</div>

.closed_caption:after {
    content : " some text";
}

jsFiddle

如果效果好，请告诉我。