标签云

微信群

扫码加入我们

WeChat QR Code

css默认的边框颜色

Let we have the following html markup:

<div id="parent" class="parent">
    <div id="child" class="child">
    </div>
</div>

and corresponding css styles:

.parent{
    border-style: solid;
    border-color: green;
    border-bottom: solid 10px;
    background:grey;
    width: 300px;
    height: 300px;
    padding: 10px;
}
.child{
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

.parent {
  border-style: solid;
  border-color: green;
  border-bottom: solid 10px;
  background: grey;
  width: 300px;
  height: 300px;
  padding: 10px;
}
.child {
  border: 20px solid;
  background: aqua;
  height: 50px;
  margin: 10px;
}
<div id="parent" class="parent">
  <div id="child" class="child">
  </div>
</div>

We can see that child's border color is black, but i dont define this color explicitly.

How I can change this default color to green?


use *{border-color:green;}

2018年05月23日05分57秒

Pranavc — No, that doesn't work: jsfiddle.net/G3PQm

2018年05月24日05分57秒

As per logic it might be wise to match certain object-types when the page is done loading. For example with JavaScript/jQuery target anything that is display block and give it borders. Matching anything will not give the correct result. It will literally give anything borders, which will hardly ever work.

2018年05月24日05分57秒

That won't work. border: 20px solid; will reset the border-color: jsfiddle.net/G3PQm

2018年05月24日05分57秒

Then use * { border-color: green !important; } which is not encouraged from a style perspective

2018年05月24日05分57秒