用于定义特定站点内容/部分的CSS3方法

Question

识别CSS3样式表中特定部分或内容的最佳和正确方法是什么。

例如，如果我为所有图像定义了这样的图像语法：

/* Image */

    .image {
        border: 0;
        display: inline-block;
        position: relative;
    }

现在我想为特定部分内的图像定义不同的设置，例如：

<!-- One -->
        <section id="one" class="wrapper major-pad">

这样做的正确方法是什么？在CSS语法中使用 Section ID 或 Class ？ （请告知我应该使用的正确语法。）

Answer 1

如果您有许多具有相同类但但想要定位特定图像的部分，请使用id

#one .image { ... }

如果要在具有给定类的节中定位图像，请使用类

.wrapper.major-pad .image { ... }

或

.wrapper .image { ... }

或

.major-pad .image { ... }

根据评论更新，显示简单的示例

.wrapper .image {
  border: 5px dotted red;
}

<section id="one" class="wrapper major-pad">
  <img class="image" src="http://placehold.it/300x100/"> 
</section>