设置样式的问题

Question

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

在我的样式表中，我有：

.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，其目标是select有posts个

请注意，select和.posts

之间不应有空格

select.posts工作

的HTML示例

div {
  background: lightblue;
}

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

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