Question

我对这个网站/编码很新，我有一个关于CSS的问题。如果这个问题出现在其他地方我很抱歉。

让我们说你已经创建了一个div（称之为div1）并且你用CSS设置了它。如果你想复制这个div 10次，但是对每个div进行非常小的修改，你可以将div保持为.class吗？如果是这样，我该如何对每个div进行微小的更改？

Answer 1

是的，你可以给他们一个类名，并以同样的方式设置该类的每个元素。对于较小的更改，您可以使用id属性（甚至是inline-CSS）。

例如：

<强> HTML：

<div class = "box" id = "first">
  ...
</div>
<div class = "box" id = "second">
  ...
</div>
<div class = "box" id = "third">
  ...
</div>

<强> CSS：

.box {
    background-color: red;
    color: blue;
}

#first {
    color: yellow;
}

#second {
    color: green;
}

#third {
    color: white;
}

但是，请注意，最好使用描述您的布局的标记，而不是调用所有内容<div>并为其提供类（即<section>，<article>，{{1} }，<aside>，<footer>，<header>，<main>）。

Answer 2

好的，假设你有一个default

类的div

<div class="default">Default Div</div>

现在您可以使用css对其进行样式设置，如下所示：

.default {
     font:16px;
     padding:5px;
}

现在假设您有一个与默认div类似的新div，但您想要更多填充或想要将文本颜色更改为红色。然后，您可以为新div添加名为red或extra-padding的类。这样，您就可以在.default类样式下的css中创建另一个样式规则。重要的是除了您定义的新类之外，默认类也将应用于那些新的div。例如：

HTML：

<div class="default red">Default style plus green styles</div>
<div class="default extra-padding">Default style plus green styles</div>

CSS：

.red {
   color:red;
}

.extra-padding {
   padding:10px;
}

请注意，在.red类中，只会定义其他样式或必需的修改，因为.default类中定义了剩余样式。

希望这有帮助。

Answer 3

最简单的方法可能就是为每个div添加两个类：一个是所有div共享的，另一个是每个div独有的类，并保存不同的样式信息。请参阅：this

<div class="common format-1">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="common format-2">
  <p>Ea animi error distinctio enim.</p>
</div>
<div class="common format-3">
  <p>Laborum aut, dicta sit quasi.</p>
</div>
<div class="common format-4">
  <p>Est laborum magnam nemo, cupiditate.</p>
</div>
<div class="common format-5">
  <p>Dolorum, eveniet reiciendis quidem iure!</p>
</div>

.common {
  background-color: yellow;
  padding: 1.5em;
  margin-bottom: 1em;
}

.format-1 {
  font-size: 2em;
}

.format-2 {
  color: blue;
}

.format-3 {
  text-decoration: underline;
}

.format-4 {
  background-color: black;
  color: white;
}

.format-5 {
  border: 2px solid #000;
}

您可以将所有常见样式放在<div>上，但使用常用和独特样式的类会使代码变得更容易。

Answer 4

您可以通过以下两种方式之一完成此操作。

为每个div提供一个ID，并使用css定位每个ID以进行微小更改恩。

.class{
  height: 2em;
  width: 100%;
  color: white;
  font-weight: bold;
  }

#id1{
  background: rgb(125,0,125);
  }
#id2{
  background: rgb(255,0,0);
  }
#id3{
  background: rgb(0,255,0);
  }
#id4{
  background: rgb(0,0,255);
  }
#id5{
  background: rgb(255,255,0);
  }
#id6{
  background: rgb(0,255,255);
  }
#id7{
  background: rgb(255,0,255);
  }
#id8{
  background: rgb(255,255,125);
  }
#id9{
  background: rgb(255,125,0);
  }
#id10{
  background: rgb(125,0,255);
  }

<body>
  <div id="id1" class="class">This is div1</div> 
  <div id="id2" class="class">This is div2</div> 
  <div id="id3" class="class">This is div3</div> 
  <div id="id4" class="class">This is div4</div> 
  <div id="id5" class="class">This is div5</div> 
  <div id="id6" class="class">This is div6</div> 
  <div id="id7" class="class">This is div7</div> 
  <div id="id8" class="class">This is div8</div> 
  <div id="id9" class="class">This is div9</div> 
  <div id="id10" class="class">This is div10</div>  
</body>

如果样式也可以重用于其他元素，则可以向元素添加多个类。离。

.class{
  height: 2em;
  width: 100%;
  color: white;
  font-weight: bold;
  }

.c1{
  background: rgb(125,0,125);
  }
.c2{
  background: rgb(255,0,0);
  }
.c3{
  background: rgb(0,255,0);
  }
.c4{
  background: rgb(0,0,255);
  }
.c5{
  background: rgb(255,255,0);
  }
.c6{
  background: rgb(0,255,255);
  }
.c7{
  background: rgb(255,0,255);
  }
.c8{
  background: rgb(255,255,125);
  }
.c9{
  background: rgb(255,125,0);
  }
.c10{
  background: rgb(125,0,255);
  }

<body>
  <div class="class c1">This is div1</div> 
  <div class="class c2">This is div2</div> 
  <div class="class c3">This is div3</div> 
  <div class="class c4">This is div4</div> 
  <div class="class c5">This is div5</div> 
  <div class="class c6">This is div6</div> 
  <div class="class c7">This is div7</div> 
  <div class="class c8">This is div8</div> 
  <div class="class c9">This is div9</div> 
  <div class="class c10">This is div10</div>  
</body>

Answer 5

如果您想避免重复并希望提供更清晰的CSS代码，我建议使用SASS。

例如，它提供了一个名为＆＃34; extend＆＃34;的功能，它允许这样的结构。

.myClass
  padding: 10px
  margin: 15px
  background: black
  font-size: 2rem
  ...


.myClassAbitDifferent
  @extend myClass
  background: white

但在深入了解SASS之前，我建议你掌握CSS的基本概念。这是一个很好的教程！

https://www.youtube.com/watch?v=s7ONvIgOWdM&list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy

快乐的编码！：）

Answer 6

您可以为每个具有不同规格的div创建一个#id，或者如果它们具有可重复的代码，则附加新类。

示例：

<div id="myA" class="box"></div>
<div id="myB" class="box"></div>
<div id="myC" class="box"></div>

其中a是背景颜色等于蓝色，b等于红色等。或者

<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

fiddle

Answer 7

请提供代码示例。它使它更容易。我认为你想要的是nth-child()或nth-of-type()。您也可以为它们提供不同的类名，但所有相同的ID。

<div id="same" class="different">
</div>
<div id="same" class="moreDifferent">
</div>

Here is an example

避免CSS中的Repition

7 个答案: