Question

我正在从Wordpress更改样式表并根据自己的需要进行自定义。我通过样式表并将边框更改为1来执行此操作，以便我可以看到div的位置。有没有一种简单的方法可以在样式表中直观地看到div，这样我就可以知道哪些需要修改？

Answer 1

使用轮廓代替边框。边界可以打破标记。

div {
    outline: 1px solid red;
}

显示所有div的类名写入控制台。

$('div').each(function() {
  console.log($(this).attr('class'));
})

<强>更新

您只能通过css显示所有div类名。

div:after {
    content: attr(class);
    position: absolute;
}

Answer 2

是..

* {
border:1px solid red !important;
}

这将为页面上的每个元素添加1px红色边框。

仅对于div，将星号更改为“div”。

Answer 3

您可以使用css边框。

*{
    border:solid 2px red;
 }

<html>
<head>
<style>
*{
border:solid 2px red;
}

</style>
</head>
<body>

<h2>bordersh2>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> property  alone.
</p>

</body>
</html>

希望它会有所帮助。

Answer 4

使用纯CSS，没有多少可能会在视觉上标记选择器的所有元素（它们也可能被隐藏）。例如，您只需添加规则：

div {
    border: 1px solid black;
}

您可以考虑使用Javascript或JQuery来查看哪些元素可能会受到影响。给定一个选择器＆＃34; div~span：nth-child（3）＆＃34;，代码为：

<强>的Javascript

console.log(document.querySelectorAll("div ~ span:nth-child(3)"));

<强> JQuery的

console.log($("div ~ span:nth-child(3)"));

希望有所帮助！

Answer 5

我通常使用box-shadow来避免干扰collapsing margins和box-sizing

div {
box-shadow:0 0 0 2px red;
}

或

div {
box-shadow:inset 0 0 0 2px red;
}

任何颜色或任何尺寸都可以。

您也可以从主要IDS或模板的div /部分中选择它们

aside div { box-shadow:0 0 0 2px purple}
section div {box-shadow:0 0 0 2px green}
#container div {box-shadow:0 0 0 2px tomato}
/* ... and so on */

与大纲相同，theres is no after effects

最后，如果你想看，每个你的ID和/或类名你可以使用伪：

#hello {
  margin:1em;
  }
#hi {
  padding:1em;
  }
.float {
  float:right;
  }
.nofloat {
  color:gray;
  padding:3em;
  }
div {
  position:relative;
  box-shadow:0 0 0 2px;
}
div:before {
  content:attr(id)' ' attr(class);
  position:absolute;
  top:0;
  left:0;
  margin:-4px;
  border:1px solid red;
  background:rgba(255,255,0,0.5);
  font-size:0.6em;
  font-family:courier;
  }

<div id="hello"> hello</div>
<div id="hi" class="float"> hi !</div>
<div class="nofloat"> i'm a div box</div>

有没有办法在网页上看到所有div标签周围的边框？

5 个答案: