html - 有没有办法在html中修改css div的属性

Question

我对来自 Actionscirpt 的 css 和 html 有点陌生。我想知道是否有更好的方法来做到这一点。

我用下面的 div 创建了一个外部 css。

 #myDiv{
position:absolute;
top:200px;
left:200px;  
width:200px;
height:200px;
}

在 html 中，我想对具有不同值/属性的 3 个不同事物使用相同的 div。

<div id="myDiv">The top and left needs to be 150px</div>
<div id="myDiv">The top and left needs to be 200px</div>
<div id="myDiv"> The top and left needs to be 300px</div>

有没有一种简单的方法可以不用在 css 中创建 3 个 div...

Answer 1

首先，ID 是唯一元素，每页只能有 1 个。

要将相同的样式应用于多个元素，您应该使用一个类。

<div class="name-of-my-common-style">

然后在 css 中，使用点 (.) 而不是 散列 (#) 来定义该类的样式。即

.name-of-my-common-style {
    position:absolute;
    top:200px;
    left:200px;  
    width:200px;
    height:200px;
}

要覆盖任何样式，您可以使用内联 CSS

<div class="name-of-my-common-style" style="width: 150px"> ... </div>

这将从 name-of-my-common-style 中获取原始样式，但由于 150px< 的内联 width 设置而覆盖宽度.

另一种方法是为每个宽度声明创建一个单独的类并将其应用于元素。 即

.name-of-my-common-style { ..default styles here..}
.width-150 {width: 150px;}
.width-200 {width: 200px;}

等等......

然后就可以这样使用了。

<div class="name-of-my-common-style width-150">I'm 150px wide</div>

希望这对您有所帮助。