CSS中如何依据元素的上下文关系来定义样式

小编给大家分享一下CSS中如何依据元素的上下文关系来定义样式，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

CSS id 选择器
    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
    id 选择器以 "#" 来定义。
    id 属性只能在每个 HTML 文档中出现一次。
实例

#red {color:red;}
#green {color:green;}

注释：上面的两个 id 选择器，第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注释：id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
提示：id 属性只能在每个 HTML 文档中出现一次，是唯一标示符（如：JS获取页面元素）。

id 选择器和派生选择器
    在现代布局中，id 选择器常常用于建立派生选择器。
    被标注为 sidebar 的元素只能在文档中出现一次，但这个 id 选择器作为派生选择器可以被多次使用。
实例

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
#sidebar h3 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

提示：id 是 sidebar 的元素内的 p 元素和 h3 元素都得到了特殊处理。

单独的选择器
id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

提示：id 为 sidebar 的元素将拥有 1px 的黑色点状边框和 10px 的内边距（padding，内部空白）。
注意：老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

看完了这篇文章，相信你对“CSS中如何依据元素的上下文关系来定义样式”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>