Question

我有

<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 {     
  ...
}

但那不起作用，我做错了什么？

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 {     
   ... 
}

Answer 3

您需要删除.glyphicon和.glyphicon-ok

之间的空格

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

试试这个

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

Answer 5

尝试这可能会有所帮助

.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图标的颜色是黑色，我将其更改为红色

Answer 6

您可以将>用于直接子女：

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

Answer 7

将HTML包装在具有唯一ID或类名的范围内。

<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;
}

Answer 8

元素+元素选择器用于选择紧接在第一个指定元素之后（而不是在其内部）的元素。直接从w3schooldoc引用它。

有关详细信息，请在此处阅读element + element selector。

让我们看一个例子

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

仅针对特定div下的css类

9 个答案: