使用CSS选择所有块级元素 [英] Select all block level elements with css

问题描述

有没有一种简便的方法可以使用CSS选择所有块级元素?

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

我想在网站主要内容区域的所有块级元素之间留出1.5 em的空白

I want to put am 1.5 em margin between all block level elements in the main content area of my site

现在我有这样的代码:

#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;}

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

Which is a royal pain in the rear to read or maintain...

我想用类似的东西代替它:

I would like to replace it with something like:

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

这可能吗?

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

I can't use * + * because that will also catch inline elements, table cells, etc, and I don't want random margins being applied in the middle of paragraphs. I also can't use #wrapper .content > * because then it won't get nested div etc.

推荐答案

使用CSS不可能做到这一点；您不能基于其CSS属性之一选择元素.您需要使用JavaScript选择getComputedStyle之类的所有元素，然后根据找到的内容运行一些脚本逻辑.

This is not possible with CSS; you can't select an element based on one of its CSS properties. You'll need to use JavaScript to select all elements with something like getComputedStyle or something similar, and then run some script logic based on what that finds.

您可以在CSS中找到的最接近的内容是选择HTML 属性； href或title之类的东西.

The closest thing you can get to in CSS is selecting HTML attributes; things like href or title.

这篇关于使用CSS选择所有块级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！