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

-1

我正在改变Wordpress中的样式表并根据自己的需要对其进行自定义。我这样做是通过浏览样式表并将边框更改为1以便我可以看到div的位置。有没有一种简单的方法在样式表中查看div的视觉效果，以便我可以知道哪些需要修改？有没有办法查看网页上所有div标签周围的边框？

来源

2016-07-26 Migpics

您可以使用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>

希望这将有助于。

来源

2016-07-26 13:32:08 Pirate

是..

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

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

只需div将星号更改为“div”。

来源

2016-07-26 13:32:16

也很棒。我喜欢两种解决方案。 – Migpics

@Migpics当你这样做的时候会引起精神崩溃的边缘，如果你不熟悉这个，它可能会让你安静困惑:) –

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

div { 
    outline: 1px solid red; 
}

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

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

更新：

可以显示仅通过CSS的所有div类名。

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

来源

2016-07-26 13:33:31 3rdthemagical

谢谢。这很棒。现在想出如何查看div标签的名称！ :) – Migpics

使用js显示类名称。 – 3rdthemagical

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

div { 
    border: 1px solid black; 
}

您可以考虑使用Javascript或JQuery来查看哪些元素可能会受到影响。给定一个选择 “分区〜跨度：第n个孩子（3）”，代码为：

的Javascript

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

JQuery的

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

希望帮助！

来源

2016-07-26 13:36:06

我通常使用箱阴影以避免扰乱collapsing margins和box-sizing

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

或

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

任何颜色或任何尺寸一样。

你可以从你的主ID或模板

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

同轮廓的DIV /节也选择它们，那里有没有影响

最后经过，如果你想看到的，标识和或类每一个名字，你可以使用一个伪：

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

来源

2016-07-26 13:39:14

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

回答

相关问题