为了账号安全,请及时绑定邮箱和手机立即绑定

css最后一个子选择器:选择特定类的最后一个元素,而不是父类内部的最后一个子元素?

css最后一个子选择器:选择特定类的最后一个元素,而不是父类内部的最后一个子元素?

扬帆大鱼 2019-06-20 10:22:18
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.something作为评论员的最后一个孩子。在这种情况下,是否可以使用最后一个子选择器来选择article.comment?jsFiddle
查看完整描述

3 回答

?
尚方宝剑之说

TA贡献1788条经验 获得超4个赞

如果您正在浮动元素,则可以反转顺序。

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>


查看完整回答
反对 回复 2019-06-20
  • 3 回答
  • 0 关注
  • 8872 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信