Question

使用下面的css代码，可以为两个不同的段落赋予两种不同的颜色。

.paraStyle1{
 color: rgb(100,100,100);
}

.paraStyle2{
 color: rgb(200,200,200);
}

现在，在html代码中我可以指定

<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>

上面的CSS代码可以修改为如下所示，所以应该使用哪一个，考虑最佳编码技术（设计）。

p.paraStyle1{
 color: rgb(100,100,100);
}

p.paraStyle2{
 color: rgb(200,200,200);
}

Answer 1

可以复制类，这意味着p标记和div标记可以具有相同的类。

但是如果你只想设置p标签的样式，那么你应该遵循第二种风格。如果您没有在p标签以外的任何地方使用您的课程，则可以使用第一种风格。

Answer 2

.paraStyle1{
 color: rgb(100,100,100);
}

.paraStyle2{
 color: rgb(200,200,200);
}

不仅限于p代码....它可以分配给任何包含paraStyle1或paraStyle2类的代码，它可以是a，{ {1}}甚至是div ... see demo here

专门用于具有类p.paraStyle1{ color: rgb(100,100,100); } p.paraStyle2{ color: rgb(200,200,200); }或p的{{1}}标记....没有其他html标记可以使用除paraStyle1标记之外的这些类的样式。 .. see demo here !!

Answer 3

第二种语法（p.paraStyle1）仅将包含的css应用于带有paraStyle1类的p标记。如果您计划为不同的标记重用具有不同样式的类名，则应使用此语法。

Answer 4

当您将CSS选择器指定为p.<class>时，这意味着您只需要对该类的 p标记进行样式设置。但是，如果您需要将同样的样式应用于其他标记（例如<div>标记），则使用第一种方法。

段落样式选择器CSS的不同方式 - 设计考虑

4 个答案: