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元素受到那个小提琴中的CSS的影响。（即我在网站的其他地方使用LI并且不希望它们“font：bold 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的{{1}}，而不是带有后代的#switch of ul）
- 确保后代的所有样式也仅限于#switch ID，而不仅仅是那些直接应用于#switch标记的样式。

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

Answer 2

是的，您需要使用和ID或最好是类，如果您想在网站的其他页面重复该特定小提琴，则更好。这样做的方法是在列表样式的每个css条目中添加.switch。然后在您的HTML中将整个ul放在div class="switch"内。

HTML：

<div class="switch">
    <ul>
        <li>
            <a href="#">Item 1</a>
            <img src="" alt=""/>
        </li>
        <li>
            <a href="#">Item 2</a>
            <img src="" alt=""/>
        </li>
        <li>
            <a href="#">Item 3</a>
            <img src="" alt=""/>
        </li>
    </ul>
</div>

这是解释的小提琴：http://jsfiddle.net/zyd1822w/1/

另请查看this link以获取有关基本css选择器的更多信息。

我希望这会有所帮助。

分组CSS元素

2 个答案: