我正在浏览 jQuery 文档，并且对所有选择器（“*”）示例感到非常困惑。为什么本例中的“h3”标签会出现红色边框？这是官方文档。var elementCount = $( "*" ).css( "border", "3px solid red" ).length;$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );h3 { margin: 0;}div, span, p { width: 80px; height: 40px; float: left; padding: 10px; margin: 10px; background-color: #EEEEEE;}<!doctype html><html> <head> <meta charset="utf-8"> <title>all demo</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> </head> <body> <div>DIV</div> <span>SPAN</span> <p>P <button>Button</button></p> </body></html>由于前置语句是在第一个语句之后执行的，因此我期望 h3 标签没有红色边框。我使用浏览器工具检查了 h3 元素，它的样式也没有显示任何红色边框。
1 回答
倚天杖
TA贡献1828条经验 获得超3个赞
*选择 DOM 中的所有元素。这包括<body>，这就是您所看到的边界实际所在的位置。如果删除浮动，效果会更明显，其他所有内容都与下面的代码片段相同：
var elementCount = $("*").css("border", "3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
h3 {
margin: 0;
}
div,
span,
p {
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
浮动元素不会导致其容器扩展以适应。当您附加 时h3，由于它是正文中唯一的非浮动元素，因此正文的边框看起来与 的边框相同h3。
类似地，如果你不附加 h3，你会在顶部看到一个奇怪的粗红色边框，它似乎没有包围任何东西，因为没有元素占用主体中的空间：
$("*").css("border", "3px solid red");
h3 {
margin: 0;
}
div,
span,
p {
float: left;
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
h3 实际上并没有边框——它只是看起来是这样，因为主体占据了相同的区域。
- 1 回答
- 0 关注
- 76 浏览
添加回答
举报
0/150
提交
取消