Html 是否有办法查看网页上所有div标记周围的边框？

我正在更改Wordpress的样式表，并根据自己的需要进行定制。 我通过查看样式表并将边框更改为1来实现这一点，这样我可以看到div的位置。

---

有没有一种简单的方法可以在样式表中直观地看到div，这样我就可以知道哪些需要修改了？

您可以使用css边框来实现这一点

*{
    border:solid 2px red;
 }

*{ 边框：实心2px红色； } bordersh2>

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

注：仅限财产。

是的

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

---

对于纯div，请将星号更改为div。

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

div {
    outline: 1px solid red;
}

要显示所有div的类名，请写入控制台

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

更新：

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

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

---

使用纯CSS，没有太多的可能性可以直观地标记选择器的所有元素，它们也可能被隐藏。例如，您可以简单地添加规则：

div {
    border: 1px solid black;
}

可以考虑使用JavaScript或jQuery来查看哪些元素会受到影响。给定选择器div~span:nth-child3，代码为：

Javascript

JQuery

---

希望有帮助

我通常使用方框阴影来避免干扰和

或

任何颜色或大小都可以

您也可以从主ID或模板的div/section中选择它们

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 */

和大纲一样，没有后遗症

最后，如果您想查看每个的id和/或类名，可以使用伪代码：

你好{ 边缘：1米； } 嗨{ 填充：1em； } .浮动{ 浮动：对； } .nofloat{ 颜色：灰色； 填充：3em； } div{ 位置：相对位置； 盒影：02px； } 部门：以前{ 内容：attrid“”attrclass； 位置：绝对位置； 排名：0； 左：0； 保证金：-4px； 边框：1px纯红； 背景：rgba255255,0,0.5； 字号：0.6em； 字体系列：信使； } 你好 你好

---

我是驾驶室的谢谢。这真是太棒了。现在要了解如何查看div标记的名称！：工作也很好。我喜欢这两种解决方案。@Migpics不介意在这样做时崩溃边距，如果您不熟悉这一点，可能会让您感到困惑：

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

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

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

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

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 */