[分享]css3层次

CSS3层次是CSS3新增的一种样式表层叠方式，它可以控制元素之间的层次关系，让网页更加美观、易读。/ 语法格式 / 选择器{ 属性1: 值1; 属性2: 值2; ... 属性n: 值n; } CSS...

CSS3层次是CSS3新增的一种样式表层叠方式，它可以控制元素之间的层次关系，让网页更加美观、易读。

/* 语法格式 */
选择器{
    属性1: 值1;
    属性2: 值2;
    ...
    属性n: 值n;
} 

CSS3层次中选择器的语法格式与普通CSS相同，但是在定位元素时优势明显。其常用的选择器有：

/* 子元素选择器 */
父元素 > 子元素{
    属性: 值;
}

/* 后代选择器 */
祖先元素 子孙元素{
    属性: 值;
}

/* 相邻兄弟选择器 */
元素1 + 元素2{
    属性: 值;
}

/* 通用兄弟选择器 */
元素1 ~ 元素2{
    属性: 值;
} 

子元素选择器使用"父元素 > 子元素"的格式，只对特定的子元素进行样式修改，可以用来控制导航栏、列表等元素。后代选择器使用"祖先元素 子孙元素"的格式，可以控制所有子孙元素的样式修改。相邻兄弟选择器使用"元素1 + 元素2"的格式，可以控制元素1后面第一个相邻的元素2的样式修改。通用兄弟选择器使用"元素1 ~ 元素2"的格式，可以控制元素1后面所有相邻的元素2的样式修改。

CSS3层次的选择器可以让我们更加方便地控制网页布局，使得网页更加美观、实用，是网页设计师必备的技能之一。