CSS3方法定义特定网站内容/部分 [英] CSS3 method for defining specific site contents/sections

问题描述

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

What's the best and correct way to identify specific sections or contents inside a CSS3 stylesheet.

例如，如果我为所有图像定义了一个图像语法：

For example, if I have an image syntax defined like this for all images:

/* Image */

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

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

And now I want to define different settings for the images inside a specific section, for example here:

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

正确的方法是什么？在CSS语法中使用部分ID 或类？ （请通知我应该使用的正确语法）。

What's the correct way to do it? Using the Section ID or the Class in the CSS syntax? (please inform the correct syntax I should use).

推荐答案

如果您有许多部分具有相同的类，在特定的一个，使用id

If you have many sections with same class but want to target an image in a specific one, use id

#one .image { ... }

如果您要定位具有给定类的部分中的图片，请使用类

If you want to target an image within a section with a given class, use class

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

或

.wrapper .image { ... }

或

.major-pad .image { ... }

---

根据评论更新，示例

---

Updated based on a comment, showing a simple sample

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

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

这篇关于CSS3方法定义特定网站内容/部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！