css - 设置样式的问题

Question

我有一个使用 <select> 的下拉列表元素。对于我在页面上放置此下拉列表的位置，我只希望该页面的列表受样式影响，因此我在 select 元素上提供了一类“帖子”。

在我的样式表中，我有:

.posts select
{
  margin-left: 40px
} 

除非我删除 .post，否则它不起作用。为什么？

这是元素:

<select class="form-control posts" (change)="reloadPosts({ userId: u.value })" #u>
       <option value="">Select a user...</option>
       <option *ngFor="#user of users" value="{{ user.id }}">
            {{ user.name }}
       </option>
   </select>

Answer 1

.posts select 目标 select 是具有类 .posts

的元素的子元素

.posts select 起作用的 HTML 示例

div {
  background: lightblue;
}

.posts select {
  margin-left: 40px;
}

<div class="posts">
  <select>
    <option>Select a value</option>
  </select>
</div

---

在您的情况下，您应该这样做，select.posts，它针对具有类 posts

的 select

请注意，select 和 .posts 之间不应有空格

select.posts 起作用的 HTML 示例

div {
  background: lightblue;
}

select.posts {
  margin-left: 40px;
}

<div>
  <select class="posts">
    <option>Select a value</option>
  </select>
</div