html - 用于定义特定站点内容/部分的 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>