有两个班级h[c] = 0 + 1 #=> 1
＆amp;每c分配h[c] = h[c] + 1
#=> 1 + 1 => 2
个String。现在我尝试将line = ("Ignore punctuation, please :)")
s = line.strip.downcase.gsub(/./) { |c| (c =~ /[a-z]/) ? c : '' }
#=> "ignorepunctuationplease"
h = s.each_char.with_object(Hash.new(0)) { |c,h| h[c] += 1 }
#=> {"i"=>2, "g"=>1, "n"=>3, "o"=>2, "r"=>1, "e"=>3, "p"=>2,
# "u"=>2, "c"=>1, "t"=>2, "a"=>2, "l"=>1, "s"=>1}
s.each_char.sort_by { |c| h[c] }
#=> ["l", "g", "s", "c", "r", "i", "p", "u", "a", "o", "t", "p",
# "a", "t", "i", "o", "u", "n", "n", "e", "e", "n", "e"]
和.float-left CSS选择器属性应用于这两个类。 .float-right类的子选择器工作正常，但不适用于 div类。
first-childlast-child
您可以在上面的代码段结果中看到，内容 Right1 的第float-left类float-right具有红色背景，而 {第一个孩子的CSS属性{1}} 类为.float-left:first-child {background: yellow;}
.float-left:last-child {background: green;}
.float-right:first-child{background: blue;}
.float-right:last-child{background: red;}。 <div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
</br>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>出现了同样的问题。
我从评论中的讨论和答案中了解到
CSS selector for first element with class这就是div和float-right选择器的工作方式，但我需要一种方法来选择多个父级的最后一个元素。欢迎JavaScript / jQuery解决方案。
上述情景只是一个最小的例子，但我的实际情况如下：
假设我有50个div与类float-right并且所有这些都是在不同的父元素中的个体，它们也不是奇偶模式。那么用类background:blue;选择最后一个（第50个）div的方法是什么？
答案 0 :(得分：1)
正如在注释中所讨论的，当元素属于不同的父元素时，CSS选择器不能用于基于模式选择元素。您需要使用JavaScript或jQuery或任何首选库来实现此目的。
以下提供的两种方法都已在我在评论中链接的主题中的高级别描述，但我发布了详细的答案以帮助您。
使用纯JavaScript：
您可以使用document.querySelectorAll来获取具有所需类的所有元素（到数组中）。然后，您可以使用索引（第一个元素为[0]，最后一个元素为[array.length - 1]）访问数组中的第一个和最后一个元素，并分配所需的类/属性。
window.onload = function() {
var floatRightEls = document.querySelectorAll(".float-right"); // select all elements with float-right class
var floatLeftEls = document.querySelectorAll(".float-left"); // select all elements with float-left class
floatRightEls[0].classList.add("first"); // add extra class first to the first element with float-right class
floatLeftEls[0].classList.add("first"); // add extra class first to the first element with float-left class
floatRightEls[floatRightEls.length - 1].classList.add("last"); // add extra class last to the last element with float-right class
floatLeftEls[floatLeftEls.length - 1].classList.add("last"); // add extra class last to the last element with float-left class
};.float-left.first {
background: yellow;
}
.float-left.last {
background: green;
}
.float-right.first {
background: blue;
}
.float-right.last {
background: red;
}
/* Just for demo */
body{
font-family: Calibri;
font-size: 14px;
}<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
使用jQuery：
使用jQuery选择器实现它变得更加容易。只需使用普通的jQuery选择器根据其类名选择元素，然后按顺序附加:first或:last伪，以选择具有所需类的第一个或最后一个元素。
$(document).ready(function() {
$(".float-left:first").addClass("first");
$(".float-right:first").addClass("first");
$(".float-left:last").addClass("last");
$(".float-right:last").addClass("last");
});.float-left.first {
background: yellow;
}
.float-left.last {
background: green;
}
.float-right.first {
background: blue;
}
.float-right.last {
background: red;
}
/* Just for demo */
body {
font-family: Calibri;
font-size: 14px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
<div>
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
<div>
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>
答案 1 :(得分：0)
我通常会在主要容器中添加一个宽度，以便在浮动它们时保存子元素。我编辑你的，希望它有帮助：）
.main-div{ width: 300px;}
.float-left{ float: left; }
.float-left:first-child {background: yellow;}
.float-left:last-child {background: green;}
.float-right{ float: right; }
.float-right:first-child{background: blue;}
.float-right:last-child{background: red;}
<div class="main-div">
<div class="float-left">Left1</div>
<div class="float-right">Right1</div>
</div>
</br>
<div class="main-div">
<div class="float-right">Right2</div>
<div class="float-left">Left2</div>
</div>