我正在瀏覽 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 關注
- 102 瀏覽
添加回答
舉報
0/150
提交
取消