相关疑难解决方法(0)

我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

这个选择器有什么问题,我该如何纠正？

感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

我怎样才能让第一个孩子上课red？

是否可以选择没有班级attr的最后一个孩子？像这样:

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

在这种情况下,我想选择第三行.

我尝试了以下,但没有用:

tr:not(.table_vert_controls):last-child

提前致谢.

我有一个带inline-blockdiv 的酒吧。其中一些在视口之外，因为我white-space:nowrap; overflow: hidden;为容器设置了：。我正在寻找选择最后一个可见孩子的方法。我所说的可见是指 div 被放置（最好是完全）在它的容器区域中。

据我所知，CSS 和 jQuery 中都没有这样的选择器。最接近的是 jQuery 的，:visible但它说所有的 div 都是可见的，因为它们占用了页面布局中的空间。

我看到的唯一出路是在加载和每次调整大小时枚举 div，以便通过求和其宽度、填充和边距来计算 div 是否仍在容器中。

您有更好的想法吗？

#container {
  white-space:nowrap;
  overflow: hidden;
}

.element {
  display: inline-block;
  vertical-align:top;
}

<div id="container">
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/> …

是否有针对view 中的内容（即在视口中可见的内容）的 CSS 选择器？

我已经读过这个帖子: 一个CSS选择器来获取最后一个可见的div

但是,这对我不起作用.我想知道我哪弄错了？

我的CSS

.panel-i{
   position: relative;
   margin: 4px 0;
   text-align: right;
   border: 1px solid;
   border-right: none;    
   min-height: 76px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 8px 10px 0;
   -webkit-flex: 1 1 30%;
   -moz-flex: 1 1 30%;
   -ms-flex: 1 1 30%;
   flex: 1 1 30%;  /* flex-grow flex-shrink, flex-basis */
 }

.panel-i:not( [style*="display: none"]):last-child{
    border-right: 1px solid;
}

和HTML

<div class="money_boxesRow">
   <div class="panel-i">
       <div class="panel-i-label">
          One Off Charge                                    
       </div>
       <span>                        
           £ <span id="total_one_off_charge">0.00</span>
       </span>
   </div>

   <!-- ... -->

   <div class="panel-i …

CSS中是否有一种方法可以将CSS规则应用于最后一个可见的子节点而不知道使元素不可见的类？

例:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li style="display: none">Item 5</li>
<ul>

<style>
  ul > li {
    border: 1px solid black;
  }

  // Remove right border from last visible child
  // This does not work of course, but this is what I am looking for
  ul > li:last-child:not([style="display: none"]) {
    border-right: none;
  }
</style>

要明确:我正在寻找一个基于规则的选择器,而不是基于类的CSS而不是Javascript.但是这个回答一个CSS选择器来获取最后一个可见的div例如不起作用.这里的问题是:最后一个孩子和:不能合并.:last-child([style ="display:block"])也不起作用(当li有dispay:block时),因为它查看style属性而不是CSS规则.

bootstrap中的示例(注意:hidden-md是一个示例,它也可以是使用display:none的其他类):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="hidden-md">Item 5</li>
<ul>