ウェブページ上のすべてのdivタグの周囲に罫線を表示する方法はありますか？

-1

私はWordpressからスタイルシートを変更し、自分のニーズに合わせてカスタマイズしています。これは、スタイルシートを見て、境界線を1に変更することで、divがどこにあるかを見ることができます。 divを視覚的にスタイルシートに表示する簡単な方法はありますか？どのようなものを変更する必要があるのか分かりますか？ウェブページ上のすべてのdivタグの周囲に罫線を表示する方法はありますか？

出典

2016-07-26 Migpics

これにはcss borderを使用できます。

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

*{ 
    border:solid 2px red; 
}

はそれに役立つことを願っています。

出典

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

視覚的に（彼らは同様に隠すことができpotentialy）あなたのセレクタのすべての要素をマークするために、その多くのpossibilitesがない、純粋なCSSを使用しました。たとえば、あなたは、単にルールを追加することができます。

div { 
    border: 1px solid black; 
}

あなたが影響を受ける可能性がある要素を参照するためにはJavaScriptやjQueryのを使用することを検討してください可能性があります。 "〜スパンDIV：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と

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

box-sizingまたは

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

任意の色を乱さないためにボックスシャドウを使用するか、いずれかのサイズがありません。あなたが見る、ID及びまたはクラスたい場合は、あなたのメインの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のです

#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タグの周囲に罫線を表示する方法はありますか？

答えて

関連する問題