css最后一个子选择器：选择特定类的最后一个元素，而不是父类内部的最后一个子元素？
css最后一个子选择器：选择特定类的最后一个元素，而不是父类内部的最后一个子元素？
<div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div></div>
#com19 ?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;}.comment:last-child {
border-bottom:none;
margin-bottom:0;}div.somethingarticle.comment?
扬帆大鱼浏览 8751回答 3
3回答
-
尚方宝剑之说
如果您正在浮动元素，则可以反转顺序。E.float: right;而不是float: left;然后使用此方法选择类的第一个子类。/* 1: Apply style to ALL instances */#header .some-class { padding-right: 0;}/* 2: Remove style from ALL instances except FIRST instance */#header .some-class~.some-class { padding-right: 20px;}这实际上是将类应用于最后一个实例，只是因为它现在处于相反的顺序。下面是一个给您的工作示例：<!doctype html><head><title>CSS Test</title><style type="text/css">.some-class { margin: 0; padding: 0 20px; list-style-type: square; }.lfloat { float: left; display: block; }.rfloat { float: right; display: block; } /* apply style to last instance only */#header .some-class { border: 1px solid red; padding-right: 0;}#header .some-class~.some-class { border: 0; padding-right: 20px;}</style></head><body><div id="header"> <img src="some_image" title="Logo" class="lfloat no-border"/> <ul class="some-class rfloat"> <li>List 1-1</li> <li>List 1-2</li> <li>List 1-3</li> </ul> <ul class="some-class rfloat"> <li>List 2-1</li> <li>List 2-2</li> <li>List 2-3</li> </ul> <ul class="some-class rfloat"> <li>List 3-1</li> <li>List 3-2</li> <li>List 3-3</li> </ul> <img src="some_other_img" title="Icon" class="rfloat no-border"/></div></body></html>
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3