我如何使用css选择器仅将样式赋予同一类型的两个div之间的第一个div?

时间:2021-04-20 20:33:22

I want to give border to the first div with the class block in the code below:

我想在下面的代码中使用类块给第一个div边框:

<div class="col-md-4 news">
            <h3>News Feed</h3>
            <div class="block">
              <p class="date"><span>15</span>march</p>
              <p><a href="#">serving people from 23 branches all over the nepal</a></p>
              <div class="clearfix"></div>
            </div>
            <div class="block">
              <p class="date"><span>17</span>march</p>
              <p><a href="#">serving people from 23 branches all over the nepal</a></p>
              <div class="clearfix"></div>
            </div>
          </div>

7 个解决方案

#1


3  

I would suggest

我会建议

.block:first-of-type {
 border: yourborder;
}

#2


2  

  .col-md-4 .block:first-of-type{
      border:1px solid RED;
   }

#3


2  

This will work

这会奏效

.block:first-of-type {
    border:solid 1px #ccc;    
}

#4


2  

You can use the first-of-type pseudo selector for this:

您可以使用第一个类型的伪选择器:

.news .block:first-of-type {border:1px solid #000;}

Fiddle Here

在这里小提琴

#5


1  

Use first-of-type selector. Source here

使用第一个类型选择器。来源于此

.block:first-of-type {
    border:2px solid red;
}

JSFiddle

的jsfiddle

#6


1  

with following code:

使用以下代码:

.news > div:first-child

#7


0  

Try:

尝试:

.col-md-4.news h3 + .block{ border:solid 1px #000; }

#1


3  

I would suggest

我会建议

.block:first-of-type {
 border: yourborder;
}

#2


2  

  .col-md-4 .block:first-of-type{
      border:1px solid RED;
   }

#3


2  

This will work

这会奏效

.block:first-of-type {
    border:solid 1px #ccc;    
}

#4


2  

You can use the first-of-type pseudo selector for this:

您可以使用第一个类型的伪选择器:

.news .block:first-of-type {border:1px solid #000;}

Fiddle Here

在这里小提琴

#5


1  

Use first-of-type selector. Source here

使用第一个类型选择器。来源于此

.block:first-of-type {
    border:2px solid red;
}

JSFiddle

的jsfiddle

#6


1  

with following code:

使用以下代码:

.news > div:first-child

#7


0  

Try:

尝试:

.col-md-4.news h3 + .block{ border:solid 1px #000; }