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

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

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

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

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

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

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

#sidebarp{font-style:italic;text-align:right;margin-top:0.5em;}#sidebarh3{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:1pxdotted#000;padding:10px;}

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

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

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