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屋!