Select 所有具有 css 的块级元素

Question

是否有一种简单的方法来 select 所有具有 CSS 的块级元素？

我想在我网站的主要内容区域中的所有块级元素之间放置 1.5 em 的边距

现在我有这样的代码：

#wrapper .content p, #wrapper .content ul, #wrapper .content div, #wrapper .content ol, #wrapper .content blockquote, #wrapper .content table {margin-top: 1.5em;}

#wrapper .content p:first-child, #wrapper .content ul:first-child, #wrapper .content div:first-child, #wrapper .content ol:first-child, #wrapper .content blockquote:first-child, #wrapper .content table:first-child {margin-top: 1.5em;}

阅读或维护后方的皇家痛苦...

我想用类似的东西替换它：

#wrapper .content *:block + *:block {margin-top: 1.5em;}

这可能吗？

我不能使用 * + *，因为它也会捕获行内元素、table 单元格等，而且我不希望在段落中间应用随机边距。我也不能使用 #wrapper .content > * 因为那样它就不会嵌套 div 等

Answer 1

CSS 这是不可能的；您不能 select 基于其 CSS 属性之一的元素。您需要使用 JavaScript 到 select 所有具有 getComputedStyle 或类似内容的元素，然后运行一些基于所发现内容的脚本逻辑。

您在 CSS 中最接近的是 selecting HTML attributes； href 或 title 之类的东西。

Answer 2

@tylerh 的回答是正确的，不可能以您要求的方式在纯 css 中激活。

使用 css 的一个可能的解决方法是创建一个通用的 css class 来处理您的块级元素，例如 .block-element

然后使用

应用边距样式

#wrapper .content .block-element { margin-top: 1.5em; }

Answer 3

Is there an easy way to select all block level elements with CSS?

默认情况下，非块元素会忽略边距。所以你回答了你的问题。

Answer 4

:not(a):not(b):not(label):not(form):not(abbr):not(legend):not(address):not(link):not(area):not(mark):not(audio):not(meter):not(b):not(nav):not(cite):not(optgroup):not(code):not(option):not(del):not(q):not(details):not(small):not(dfn):not(select):not(command):not(source):not(datalist):not(span):not(em):not(strong):not(font):not(sub):not(i):not(summary):not(iframe):not(sup):not(img):not(tbody):not(input):not(td):not(ins):not(time):not(kbd):not(var) {border:1px solid red;}

不确定我是否遗漏了一个元素，但你明白了。我认为这应该有效。

Select 所有具有 css 的块级元素

Select all block level elements with css

css

css-selectors