Question

如何在多个行和列上应用相同的样式？这是相关页面：

https://dev.s1biose.com/produit

我在“Chocolat noir artisanal BIO enrobant des noisettes”产品上应用了风格，我希望将它们应用于其他产品。

这是我的样式表：

.views-teaser-variation #edit-purchased-entity-wrapper {
    margin-bottom: 10px;
    margin-top: 10px;
}

.views-teaser-variation #edit-submit {
    float: right;
    margin-bottom: 10px;
    margin-right: 0px;
    width: 60%;
}

.views-teaser-variation #edit-quantity-0-value {
    float: left;
    margin-bottom: 10px;
    width: 40%;
}

.views-teaser-variation #edit-quantity-wrapper .form-inline .control-label {
    display: none;
}

.views-teaser-variation #edit-wishlist {
    margin-bottom: 10px;
    width: 100%;
}

Answer 1

您尝试定位动态生成ID，如#edit-purchased-entity-wrapper--2，#edit-purchased-entity-wrapper--3等。这些ID值以指定值开头，因此最好使用属性选择器。例如：

.views-teaser-variation [id^=edit-purchased-entity-wrapper]

将针对这些并应用CSS：

#edit-purchased-entity-wrapper
#edit-purchased-entity-wrapper--2
#edit-purchased-entity-wrapper--3
#edit-purchased-entity-wrapper--4
#edit-purchased-entity-wrapper--5
#edit-purchased-entity-wrapper--6

此外，尝试在定位元素时更具体，阅读更多内容：

CSS [attribute ^ =＆＃34; value＆＃34;] Selector

[attribute ^ =＆＃34; value＆＃34;]选择器用于选择属性值以指定值开头的元素。

以下示例选择具有以＆＃34; top＆＃34;开头的类属性值的所有元素：

注意：该值不必是一个完整的单词！

参考：https://www.w3schools.com/css/css_attribute_selectors.asp

注意：如果您可以控制动态生成的HTML项目，最好使用class来应用相同的样式。否则，可以使用属性选择器，只需确保在您定位所需的正确元素时具体（如果不是，您可以将样式应用于您不想要的元素）。

＆＃13;

.views-teaser-variation [id^=edit-purchased-entity-wrapper] {
    margin-bottom: 10px;
    margin-top: 10px;
}


.views-teaser-variation [id^=edit-submit] {
    float: right;
    margin-bottom: 10px;
    margin-right: 0px;
    width: 60%;
}

.views-teaser-variation input[id^=edit-quantity-0-value] {
    float: left;
    margin-bottom: 10px;
    width: 40%;
}

.views-teaser-variation [id^=edit-quantity-wrapper] .form-inline .control-label {
    display: none;
}

.views-teaser-variation [id^=edit-wishlist] {
    margin-bottom: 10px;
    width: 100%;
}

＆＃13;

Answer 2

以下是样式“级联”的示例。如果要将样式应用于行，则可以在其父元素上使用公共类，并为该类编写样式规则。简短的回答可能是“不要使用ID来造型” - 我不确定用例。

我将使用一些列表来说明这一点。

标记

<ul class='item-list'>
  <li class='item'>one</li>
  <li class='item'>two</li>
  <li class='item'>three</li>
</ul>

<ul class='item-list dark'>
  <li class='item'>one</li>
  <li class='item'>two</li>
  <li class='item'>three</li>
</ul>

<ul class='item-list'>
  <li class='item'>one</li>
  <li class='item'>two</li>
  <li class='item'>three</li>
</ul>

样式

ul { /* targets ALL unordered lists */
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-list { /* targets anything with this class (in  case the ul) */
  color: lightblue;
  margin-bottom: 1rem;
}
/* you could write    ul.item-list   if you wanted to be more specific... */

.item-list.dark { /* anything with BOTH of these classes */
  color: navy;
}

https://jsfiddle.net/sheriffderek/5xjqnv23/

如何在多个行和列上应用相同的样式？

2 个答案:

CSS [attribute ^ =＆＃34; value＆＃34;] Selector