如何使用css删除或修改div标签，当div标签没有关联任何类或id

Question

嗨，我有以下html代码，这是html

的一部分

<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;"><div>
<div id="MainContent" class="msg" style="display: none;">  
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex"> 
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>

标题行和MainDocContent之间有更多的空间。当我在空白区域使用inspect时，inspect元素会高亮显示在

标签下方

<div style="height:100px;"><div>

我尝试了下面的css来调整css文件中的高度，但高度没有得到修改

#dPopupBG+div{height:80px} 

我正在努力寻找解决方案，并在这个过程中学习。

Answer 1

在CSS中你只可以覆盖一个内联属性通过添加!important

#example+div{
height:80px;
background-color:orange!important;
}

<div id="example"></div>
<div style="background-color:black;"><div>

Answer 2

通过使用来覆盖内联样式!importantkeyword使用CSS规则。

#dPopupBG + div
{
height:80px!important;
background:red;
}

<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;"><div>
<div id="MainContent" class="msg" style="display: none;">  
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex"> 
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>

Answer 3

一个选项如下，在代码中有解释性注释:

/* a simple set of rules to remove default margin and padding
from elements, and to size elements with an algorithm that
includes padding and border sizes in the defined width: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
/* to visualise the HTML structure: */ 
border: 1px solid #000;
/* to center the elements in the inline axis: */
margin-inline: auto;
/* to apply some spacing around the contents/descendants
of an element: */
padding: 0.5em;
/* to show the parent-child hierarchy for visualisation: */
width: 90%;
}
/* selects all <div> elements with a class attribue,
and styles the ::before pseudo-element: */
div[class]::before {
/* shows the contents of that attribute in the
::before pseuedo element; again for visualisation: */
content: attr(class);
}
/* this selects all <div> elements with a "style" attribute
with an attribute-value that includes the string 
"height:100px", or "height: 100px" (note the white-space):*/
div[style*="height:100px"],
div[style*="height: 100px"]{
/* purely to visualise the element if it's not successfully
hidden: */
background-color: red;
/* "hiding" the element by setting its display to "none";
this avoids having to use "!important" to override the
height (which may have other consequences), but is fragile
as it's based on a predetermined/known "height" property-value: */
display: none;
}

<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;">
<div>
<div id="MainContent" class="msg" style="display: none;">
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex">
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

JS Fiddle demo.

引用:

• attr().
• 属性选择器。
• border.
• ::before.
• content.
• margin-inline.