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

查看:142
本文介绍了CSS3方法定义特定网站内容/部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆