Giả sử tôi có một hierararchy như:Có thể nhắm mục tiêu phần tử theo phần tử con "toàn cầu"?
ul
li
li
ul
li
li <-----
li
Tôi có thể nhắm mục tiêu được đánh dấu bởi lili:nth-child(4) hoặc một cái gì đó tương tự?
Bạn có thể thực hiện việc này bằng jQuery.
tài jQuery.eq();
Hãy thử ví dụ đơn giản này (jsFiddle).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("li:eq(6)").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
Với css thuần túy, tôi không nghĩ rằng mình có thể chọn li trên toàn cầu. Trước tiên, bạn phải chọn phần tử ul.
ul:last-child li:nth-child(2)
(Ở đây tôi đang nhắm mục tiêu yếu tố thứ hai của ul trước).
Điều quan trọng bạn chỉ cần sử dụng bộ chọn đầu tiên cho ul sau đó chọn cho li
Không, nhưng bạn có thể làm điều này:
ul:nth-child(2) li:nth-child(2){
color:#F00;
}
Mà tôi nghĩ sẽ là gần nhất với những gì bạn đang tìm kiếm.
Đây là một demo
li:nth-last-of-type(2)
là không có trật tự toàn cầu. Bạn có thể sử dụng điều này:
ul:nth-of-type(2) li:nth-child(2){
color:#F00;
}
Tôi tin rằng [SASS] (http://sass-lang.com/) cung cấp cho bạn chức năng này. Nhưng tôi không phải 100%. – Griffin