Question

我试图找到与display: block一起显示的最后一个div，以便我可以为此div添加border-bottom。您可以使用this JSFiddle

查看原因

尝试输入＆＃34; Dan＆＃34;或者＆＃34; Alfredo＆＃34;在文本框中输入问题的示例。

<!doctype html>
<html ng-app>
  <head>
    <style>
      body {
        margin: 0px;
        font-family: Helvetica, sans-serif;
      }
      #customers {
        margin-top: 20px;
        width: 300px;
        margin-right: auto;
        margin-left: auto;
      }
      #nameSearch {
        width: 300px;
        outline: none;
        height: 30px;
        font-size: 17px;
        text-align: center;
        border: 1px solid black;
        margin: 0;
        padding: 0;
      }
      .cust-info > p {
        margin: 0px;
        line-height: 35px;
      }
      .cust-info {
        text-align: center;
        height: 30px;
        width: 300px;
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-left: 1px solid black;
        display: none;
      }
      #search-result {
        width: 301px;
        height: 124px;
      }
      .cust-info:nth-child(1),
      .cust-info:nth-child(2),
      .cust-info:nth-child(3),
      .cust-info:nth-child(4){
        display: block;
      }
      .cust-info:nth-child(1) {
        border-top: 0px solid white;
      }
      .cust-info:nth-child(4) {
        border-bottom: 1px solid black;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body ng-init="customers=[{name:'Roemer Blom', city:'Utrecht'}, {name:'Peter Rusell', city:'Amsterdam'}, {name:'John deere', city:'Den Haag'}, {name:'Richard Kowinski', city:'Leiden'}, {name:'John Silver', city:'Delft'}, {name:'Dan Aniston', city:'Leiden'}, {name:'Alfredo Querida', city:'Mexico-Stad'}, {name:'Dani Alves', city:'New York'}, {name:'Harvey Cook', city:'New York'}, {name:'Mike Ross', city:'Texas'}, {name:'Michelle Donalds', city:'Neimegen'}, {name:'Cathy Treys', city:'Nieuwegein'}, {name:'Lucy O\'Neil', city:'Nevada'}, {name:'Patrick Blom', city:'Utrecht'}, {name:'Coco Chanel', city:'Amsterdam'}, {name:'Jimi Hendrix', city:'Den Haag'}, {name:'Steve Jobs', city:'Leiden'}, {name:'Susane Boyle', city:'Delft'}, {name:'George Bush', city:'Leiden'}, {name:'Susie Waters', city:'Mexico-Stad'}, {name:'Dan Perkins', city:'New York'}, {name:'Mitchel Green', city:'New York'}, {name:'Leroy Fericho', city:'Long Island'}, {name:'Gus McGregor', city:'Neimegen'}, {name:'Ronnie Sullivan', city:'Nieuwegein'}, {name:'Vivian Sherbert', city:'Nevada'}]">
    <div id="customers">
    Name:
    <br>
    <input type="text" id="nameSearch" ng-model="name">
    <div id="search-result">
    <div class="cust-info" ng-repeat="cust in customers | filter:name | orderBy:'name'">
      <p>{{ cust.name }} - {{ cust.city }}</p>
    </div>
    </div>
    </div>
  </body>

</html>

Answer 1

您可以使用CSS来实现它

.cust-info:last-child {
  border-bottom: 1px solid black;
}

Answer 2

将border-top: 1px solid black;课程中的.cust-info规则替换为border-bottom: 1px solid black;。

CSS：

.cust-info {
    text-align: center;
    height: 30px;
    width: 300px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    display: none;
}

Answer 3

如何使用.cust-info：last-child

.cust-info:nth-child(4),.cust-info:last-child {
    border-bottom: 1px solid black;
  }

找到有显示的最后一个可见div：block

3 个答案: