仅针对特定div下的css类

Question

I have

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

how can I use target glyphicon glyphicon-ok under this col-sm-1 col-1-box class only?

I tried with

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

but that doesnt work, what I'm doing wrong?

Answer 1

You also can Try:

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

It's the direct child, not a recursive match.

Answer 2

'+' is for next sibling and space is for all child elements

As your HTML like this

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

then CSS

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

Answer 3

You need to remove space between .glyphicon and .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> 

Answer 4

试试这个

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

Answer 5

Try this might be this will help

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

you can see color of ok icon is black and i change it to red

Answer 6

你可以使用>直接孩子：

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

Answer 7

Wrap the HTML inside a span that has a unique id or class name.

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

Then you can access the elements with css

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

Answer 8

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element. Quoting it directly from the w3schooldoc.

For more details read element + element selector here.

Let's see an example

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

Answer 9

Your question is somewhat confusing! Here are the two possible scenarios - Choose as per your requirement

 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>