02. 隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识

文章预览

隐藏空元素 隐藏没有内容的元素。 使用 :empty 伪类选择没有内容的元素。 < p > 这是一段示例文本。 < button > button > p > :empty  {    display : none; } 这个技巧利用了 CSS :empty 伪类选择器来隐藏没有内容的元素。 :empty 选择器匹配没有子元素或文本内容的任何元素。 在这个例子中, 元素包含一些文本和一个 元素。 元素没有任何内容,所以它将被隐藏。 这个技巧在处理动态生成的内容时特别有用,在这种情况下,某些元素可能为空。通过使用这个选择器,你可以确保这些空元素不会占用页面上的空间或影响布局。 然而,使用这个技巧时需要小心。在某些情况下,空元素可能是有意而为之的,并且对布局或功能很重要。例如,一个空的 可能被用作一个占位符或一个将被 JavaScript 填充内容的容器。 另一件需要考虑的事情是, :empty 选择器只会检查元素的直接内 ………………………………