Как удалить <ул.>, незаказанная список, последний <литий> граница элемента списка с помощью CSS, ничего не изменяя в HTML-коде?
Как я могу удалить a граница элемента списка с помощью CSS, не добавляя класса к последнему элементу списка?
Посмотрите живой пример здесь: http://jsbin.com/umose
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;
border-right:1px solid green;
}
#navlist li:last-child { border-right: ; }
4 ответа
Добавьте этот стиль, и вам больше ничего не нужно будет изменять:
#navlist li:last-child { border-right:0px; }
Edit:
Original Script
Original Script, к которому применим ответ, размещен здесь, потому что jsbin.com может удалить содержимое, которое не просматривалось в течение 3 месяцев.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</body>
</html>
Используя CSS3
для удаления последнего в
ul li:last-child {
border:none;
}
Я бы попробовал jQuery, что-нибудь вроде этого:
$("#myDiv ul li:last-child").addClass("lastLi");
Вам нужно сделать так, чтобы класс lastLi установил ширину границы li равной 0.
Вот ссылка на документацию по селектору jQuery lastt-child: http://docs.jquery.com/Selectors/lastChild
] Я делаю это все время без CSS3 или JavaScript. Все, что вам нужно сделать, это поплавать []li[] и использовать расширенный селектор []+[]:[
<style>
ul li {
float: left;
border: none; }
li + li {
border-left: 1px solid #F00; }
</style>
]Это сохранит первую []li[] от границы.[