css 相关问题

我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，有人能解释一下CSS中星号*的作用吗？ * { 轮廓：2px 红色虚线 } * ...</desc> <question vote="109"> 我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素， 有人可以解释一下星号<pre><code>*</code></pre>在CSS中的作用吗？ <pre><code><style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } </style> </code></pre> </question> <answer tick="true" vote="109"> 它是一个通配符，这意味着它将选择 DOM 该部分内的所有元素。 例如，如果我想将边距应用于整个页面上的每个元素，您可以使用： <pre><code>* { margin: 10px; } </code></pre> 您还可以在子选择中使用它，例如以下将为段落标记内的所有元素添加边距： <pre><code>p * { margin: 10px; } </code></pre> 您的示例正在执行一些 CSS 技巧，将连续的边框和边距应用于元素，从而为它们提供多个彩色边框。例如，白色边框被黑色边框包围。 </answer> <answer tick="false" vote="32"> 您引用的 CSS 对于网页设计师调试页面布局问题非常有用。我经常将其临时放入页面中，这样我就可以看到所有页面元素的大小并进行追踪，例如，填充过多的元素将其他元素推到了位置之外。 仅使用第一行即可完成相同的技巧，但定义多个轮廓的优点是，您可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。 </answer> <answer tick="false" vote="6"> <pre><code>*</code></pre> 充当通配符，就像在大多数其他情况下一样。 如果你这样做： <pre><code>*{ margin: 0px; padding: 0px; border: 1px solid red; } </code></pre> 然后所有 HTML 元素都将具有这些样式。 </answer> <answer tick="false" vote="4"> * 是通配符。这意味着它将将该样式应用于任何 HTML 元素。附加的 * 将样式应用于相应的嵌套级别。 此选择器将根据元素的嵌套级别将不同颜色的轮廓应用于页面的所有元素。 </answer> <answer tick="false" vote="0"> 虽然这个问题已经得到解答， 我只是想把这个CSS放在这里（的标题） StackOverflow页面.. 结果如下： <a href="https://i.stack.imgur.com/TqkJ2.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Rxa0oyLnBuZw==" alt=""/></a> 我以前从未见过这个CSS </answer> <answer tick="false" vote="-1"> 在样式表中，通常您需要为所有元素定义基本规则，例如字体大小属性和边距。 {字体大小：14px;保证金：0；填充：0；} / 覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为 14 像素大小，边距和填充为零，包括 h1,...pre。 */ </answer> </body></html>

css css-selectors

回答 0 投票 0

css 相关问题

最新问题