针对特定的div仅选择css类

Question

I have

<div class="col-sm-1 col-1-box">
<span class="glyphicon glyphicon-ok"></span>

如何仅在 col-sm-1 col-1-box 类下使用目标图标 glyphicon glyphicon-ok？

我尝试了以下操作：

.col-1-box + .glyphicon .glyphicon-ok {     
  ...
}

但是这并没有起作用，我做错了什么吗？

- user1765862

---

删除 + - Amar Singh

Answer 1

你也可以尝试：

  .col-1-box > .glyphicon.glyphicon-ok {     
      border: 1px solid black;
    }

它是直接子元素，不是递归匹配。

- 우두머리

Answer 2

'+'代表下一个同级元素，空格代表所有子元素

如果您的HTML是这样的

<div class="col-sm-1 col-1-box">
    <span class="glyphicon glyphicon-ok"></span>
</div>

然后 CSS

.col-1-box .glyphicon.glyphicon-ok {     
   ... 
}

- Jay Patel

Answer 3

试一下

  .col-sm-1.col-1-box .glyphicon.glyphicon-ok{.....}

- Head In Cloud

Answer 4

你可以使用>来选择直接子元素:

.col-sm-1.col-1-box > .glyphicon.glyphicon-ok {  ...  }

- Jai

Answer 5

将HTML代码包装在一个带有唯一ID或类名的span中。

<span class="awwwwyeah">
    <div class="col-sm-1 col-1-box">
    <span class="glyphicon glyphicon-ok"></span>
    </div> <!-- I assume the div ends somewhere -->
</span>

然后你可以使用 CSS 访问元素

.awwwwyeah .col-1-box .glyphicon-ok{
    color: blue;
}

- Pekka

Answer 6

您需要移除 .glyphicon 和 .glyphicon-ok 之间的空格。

.col-1-box + .glyphicon.glyphicon-ok {     
  border: 1px solid black;
}

<div class="col-sm-1 col-1-box"></div>
<span class="glyphicon glyphicon-ok">Lorem Ipsum</span>

- Nenad Vracar

Answer 7

试试这个，也许会有帮助

.col-sm-1 span.glyphicon{
  color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-1 col-1-box">
<span class="glyphicon glyphicon-ok"></span>

你可以看到OK图标的颜色是黑色的，我把它改成了红色

- Pratik Bhajankar

Answer 8

“element+element”选择器用于选择紧接在第一个指定元素之后（而不是内部）放置的元素。这是从w3schooldoc直接引用的。要了解更多详细信息，请在此处阅读 element + element selector。

让我们看一个例子。

.parentElement .childElement {
   /*Selected Children only*/
   background: red;
   width: 50px;
   height: 50px;
   display: inline-block;
 }
 .notImmediate {
   background: blue;
   width: 30px;
   height: 30px;
 }
.childElement + .childElement {
  /*Selected immediately after (not inside) */
   border-right: 10px solid green;
}

<div class="parentElement">
  <div class="childElement">
    <div class="notImmediate"></div>
  </div>
  <div class="childElement"></div>
</div>

- Lusan Das

Answer 9

你的问题有点令人困惑！以下是两种可能的情况 - 根据你的需求选择

body {
  color: #000;
}
/* scenario 1 */

.col-1-box + .glyphicon.glyphicon-ok {
  color: tomato;
}
/* scenario 2 */

.col-1-box .glyphicon.glyphicon-ok {
  color: aqua;
}

<h1>Scenario 1</h1>
<div class="col-sm-1 col-1-box"></div>
<span class="glyphicon glyphicon-ok">OK</span>

<hr>
<h1>Scenario 2</h1>
<div class="col-sm-1 col-1-box">
  <span class="glyphicon glyphicon-ok">OK</span>
</div>

- Deepak Yadav