Question

假设我在同一页面中有2个元素，它们具有唯一的id属性，但具有相同的子元素：

<div id="a">
    <div class="book"></div>
    <div class="table"></div>
</div>

<div id="b">
    <div class="book"></div>
    <div class="table"></div>
</div>

我在css文件中有一些针对这些子元素的CSS样式：

.book{
    background:red;
    color:blue;
}
.table{
    margin:5px;
    border:1px;
}

如果我在头标记中链接此样式表，它将以相同的方式定位两个父div中的元素。

我的问题是，这个css的每个实例单独定位的方法是什么？

这是唯一的解决方案吗？

#a .book{
    background:red;
    color:blue;
}
#a .table{
    margin:5px;
    border:1px;
}

#b .book{
    background:green;
    color:white;
}
#b .table{
    margin:15px;
    border:10px;
}

基本上我正在编写一个允许同一页面中有多个实例的插件，但它的css文件应该为每个实例设置不同的设置。所以我能想到的唯一方法是为每个css声明加上父id属性。

有更好的方法吗？

Answer 1

您可以在父级上设置class / id / data-attribute来定位它

或者您可以使用div：nth-child（1）或div：nth-of-type（1），以及不以所有div为目标的类，例如

Answer 2

根据您拥有的项目数量以及您希望如何区分样式，您可以对当前应用id的对象使用子伪类。

这是使用无序列表的示例。请注意，所有ul都需要包含在另一个块级对象中，以便：### - 子伪类可以正常工作。

ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 5px;
}

ul .book{
    background:blue;
    color:orange;
}
ul .table{
    margin:20px;
    border:5px solid black;
}

ul:first-child .book{
    background:red;
    color:blue;
}
ul:first-child .table{
    margin:5px;
    border:1px solid black;
}

ul:nth-child(3) .book{
    background:gray;
    color:blue;
}
ul:nth-child(3) .table{
    margin:30px;
    border:10px solid black;
}

ul:last-child .book{
    background:green;
    color:white;
}
ul:last-child .table{
    margin:50px;
    border:15px solid black;
}

<div>
<ul>
    <li class="book">Foo</li>
    <li class="table">Bar</li>
</ul>

<ul>
    <li class="book">Foo</li>
    <li class="table">Bar</li>
</ul>

<ul>
    <li class="book">Foo</li>
    <li class="table">Bar</li>
</ul>
  
<ul>
    <li class="book">Foo</li>
    <li class="table">Bar</li>
</ul>
</div>

如果您使用javascript动态添加内容，请考虑创建一个类列表，以根据需要插入每个部分。您甚至可以在填充页面时随机化样式分布。

多个样式表集成

2 个答案: