html - 分组 CSS 元素

Question

我真的很难集中精力将不同的选择器和样式分组到一个连贯的设置中。

我发现这组 CSS/HTML 代码正是我所需要的 (http://jsfiddle.net/joshnh/daFDn/)，但我不知道如何在我的设置中使用它。

    body {
    padding: 50px;
}
ul {
    border: 1px solid #444;
    display: inline-block;
    height: 301px;
    position: relative;
    width: 400px;
}
li {
    font: bold 16px/100px sans-serif;
    height: 100px;
}
a {
    border-right: 1px solid #444;
    border-top: 1px solid #444;
    color: red;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 99px;
}
li:first-child a {
    border-top: none;
}
li:nth-child(2) a {
    color: blue;
}
li:nth-child(3) a {
    color: green;
}
a:hover {
    background: red;
    color: #fff;
}
li:nth-child(2) a:hover {
    background: blue;
    color: #fff;
}
li:nth-child(3) a:hover {
    background: green;
    color: #fff;
}
img {
    background: red;
    display: none;
    height: 301px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
}
li:nth-child(2) img {
    background: blue;
}
li:nth-child(3) img {
    background: green;
}
a:hover + img,
img:hover {
    display: block;
}

我有一个 WordPress 网站，使用 Headway Themes(GUI 主题创建器)。我想在一页上创建一个部分，完全按照 Fiddle 的方式进行。我也不希望任何其他类似的 HTML 元素受到该 fiddle 中的 CSS 的影响。 (即我在网站的其他地方使用 LI，不希望它们使用“字体:粗体 16px/100px sans-serif；”，就像这个例子)。

对我来说，这确实让我感到困惑，并且非常感谢有关如何正确构建它的一些指导。

我确定我需要创建一个 ID(因为此页面对于站点的其余部分将是唯一的)但我不确定这是 ID 的正确语法:

#switch  ul {border: 1px solid #444;display: inline-block;height: 301px;  position: relative;width: 400px;}, li {font: bold 16px/100px sans-serif;height: 100px;}

(作为示例，但本质上是我想做的)

Answer 1

只是快速尝试了一下 - 如您所说，您需要添加一些内容以将这些选择器限制在您感兴趣的范围内。id 是一种方法 - 在这种情况下您需要将您的选择器更新为如下所示:http://jsfiddle.net/2osg7a31/

需要注意两点:
- ul#switch 而不是 #switch ul(因为您将样式应用到 ID 为 # 的 ul switch，而不是带有 #switch 后代的 ul)
- 确保后代的所有样式也仅限于 #switch id，而不仅仅是那些直接应用于 ul 标签的样式。

我建议使用类而不是 id 可能是更好的主意，因为您只是添加标识符以允许样式，而不是尝试唯一地标识元素:http://jsfiddle.net/0h54wseL/