Html 如何简化这个css

我是CSS新手
我创建了4个类来更改每个角的样式。 正如您在运行代码段中看到的，它正在工作，但我重复了很多代码

这是唯一不同的路线

边框宽度：0 16px 16px 0

我想修改css，这样我就可以创建

<div id="infoPopup" class="note topRight">

我已经有工作了

.noteTopRight{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
.注右：之前{
内容：“；
位置：绝对位置；
排名：0；
右：0；
边框宽度：0 16px 16px 0；
边框样式：实心；
边框颜色：#658E15#fff；
}
.左上角{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
.注左：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
边框宽度：0 0 16px 16px；
边框样式：实心；
边框颜色：#658E15#fff；
}
.对{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
.右：之前{
内容：“；
位置：绝对位置；
底部：0；
右：0；
边框宽度：16px 16px 0；
边框样式：实心；
边框颜色：#658E15#fff；
}
.左下角{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
.左下角：之前{
内容：“；
位置：绝对位置；
底部：0；
左：0；
边框宽度：16px 0 0 16px；
边框样式：实心；
边框颜色：#658E15#fff；
}

Hola
世界
你好
世界
你好
世界
你好。
世界

你几乎做对了

这样做：

.note { /*common style*/}
.note:before { /*common style*/ }
.note-topLeft:before {border-width: 0 16px 16px 0;}
.note-topRight:before {border-width: 0 0 16px 16px;}
.note-bottomLeft:before {border-width: 16px 16px 0 0;}
.note-bottomRight:before {border-width: 16px 0 0 16px;}

然后：

<div id="infoPopup" class="note note-topLeft"><div id="thing">Hola<br> World</div></div>
<div id="infoPopup1" class="note note-topRight"><div>Hola<br> World</div></div>
<div id="infoPopup2" class="note note-bottomLeft"><div>Hola<br> World</div></div>
<div id="infoPopup3" class="note note-bottomRight"><div>Hola<br> World</div></div>

Hola
世界
你好
世界
你好
世界
你好
世界

---

1,2,3

不要使用相同的

id

两次。

每个id的位置不同（不仅仅是边框宽度）

。注意{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
。注：在{
内容：“；
位置：绝对位置；
边框样式：实心；
边框颜色：#658E15#fff；
}
.注右：之前{
排名：0；
右：0；
边框宽度：0 16px 16px 0；
}
.注左：之前{
排名：0；
左：0；
边框宽度：0 0 16px 16px；
}
.右：之前{
底部：0；
右：0；
边框宽度：16px 16px 0；
}
.左下角：之前{
底部：0；
左：0；
边框宽度：16px 0 0 16px；
}

Hola
世界
霍拉
世界
霍拉
世界
Hola
World

根据我上面的评论，我将其简化如下：

.note { /*common style*/}
.note:before { /*common style*/ }
.note-topLeft:before {border-width: 0 16px 16px 0;}
.note-topRight:before {border-width: 0 0 16px 16px;}
.note-bottomLeft:before {border-width: 16px 16px 0 0;}
.note-bottomRight:before {border-width: 16px 0 0 16px;}

。注意{
位置：相对位置；
宽度：30%；
填充物：1em 1.5em；
利润率：2米自动；
颜色：#fff；
背景：#97C02F；
}
。注：在{
内容：“；
位置：绝对位置；
边框样式：实心；
边框颜色：#658E15#fff；
}
.注左：之前{
边框宽度：0 0 16px 16px；
排名：0；
左：0；
}
.注右：之前{
边框宽度：0 16px 16px 0；
排名：0；
右：0；
}
.右：之前{
边框宽度：16px 16px 0；
底部：0；
右：0；
}
.左下角：之前{
边框宽度：16px 0 0 16px；
底部：0；
左：0；
}

Hola
世界
你好
世界
你好
世界
Hola
World

第一件事：id应该是唯一的，所以您需要解决这个问题。然后，您可以组合类，这样所有的

div

都可以是基类

。注意

，然后每个div都有一个辅助类（如

。注意右上

或

。注意左上

）-将公共属性移动到

。注意

类，并将不同的值移动到其他四个类。如果你需要更多的话，告诉我details@ochi你可以看到我尝试了类似子类的东西。但是

：before

把我弄糊涂了。我应该从子类中删除该部分吗？对于ID很抱歉，这只是复制/粘贴以查看每个类是否正常工作：）使用

.note{}.note:before{}

没有任何好处。在使用子选择器之前，您不必“初始化”选择器。也有一些很好的理由不改变您现在拥有的选择器。使用

.noteTopRight

比使用

.note.topRight

更好，因为后者将样式引入两个非常通用的类，而前者将所有样式保留在一个特定的类中。这就是为什么Bootstrap（例如）使用类

.btn lg

而不是

.btn.large

。最好将您正在“污染”的类限制在几个特定的类，而不是许多将来会发生冲突的通用类。再加上@leo所说的：如果所有最初标记为

id=“infoPopup”

的类都具有共享的“infoPopup”样式，请将infoPopup更改为类，然后编写

class=“infoPopup note…”

（样式为

.infoPopup{}

）。如果所有的“infoPopup”也是

.note

，请完全删除“infoPopup”，并将其样式放入

。注意

（退一步：如果您已经知道这一点，请不要冒犯，但不需要指定id）是的，我知道id是一个错误。在那个阶段，我只是做了一个复制/粘贴来测试我的每个风格。我将只使用一个id并更改类。