Как удалить границу элемента списка в группе списка начальной загрузки?

Question

Я просто хочу, чтобы удалить верхнюю границу первого списка-группы пункт:

<ul class="list-group"> 
    <li class="list-group-item borderless">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 

.borderless li { 
    border-top: none; 
} 

, но не работает, кто-нибудь может мне помочь, спасибо заранее!

Answer 1

Проблема:

текущий код вы пытаетесь является потомком селектор и будет работать только тогда, когда li является ребенком .borderless, как показано ниже:

<div class="borderless"> 
    <li></li> 

Решение:

Попробуйте использовать несколько селекторов классов, которые выбирают элементы списка, которые имеют класс borderless.

li.borderless { border-top: 0 none; } 

---

Выход:

li.borderless { 
 
    border-top: 0 none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="list-group"> 
 
    <li class="list-group-item borderless">Cras justo odio</li> 
 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
 
    <li class="list-group-item">Morbi leo risus</li> 
 
    <li class="list-group-item">Porta ac consectetur ac</li> 
 
    <li class="list-group-item">Vestibulum at eros</li> 
 
</ul>

Answer 2

Вы можете воспользоваться : п-го ребенка() Selector, так что вам не нужно добавьте без полей класс.

Пример:

<ul class="list-group"> 
    <li class="list-group-item">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 

Разметка

.list-group li:nth-child(1){ 
    border-top: 0 none; 
} 

Ура!

Answer 3

Вы можете удалить границы, объявив границу ни одному, в элементе стиля. См. Ниже

<h2>Basic List Group</h2> 
    <ul class="list-group"> 
    <li class="list-group-item" style="border: none">First item</li> 
    <li class="list-group-item" style="border: none">Second item</li> 
    <li class="list-group-item" style="border: none">Third item</li> 
    </ul>