[分享]css三种层次选择器

CSS层次选择器是指选择元素时，根据元素的父级、子级或兄弟级之间的关系来选取的一种选择器，一共有三种：父子选择器 父子选择器用于选取某个元素的子元素，选择器为“父元素 子元素”，中间用空格隔开。例如：...

CSS层次选择器是指选择元素时，根据元素的父级、子级或兄弟级之间的关系来选取的一种选择器，一共有三种：

父子选择器 

父子选择器用于选取某个元素的子元素，选择器为“父元素 子元素”，中间用空格隔开。例如：

ul li {
  color: red;
} 

上面的代码将会选择所有ul元素下的li元素，并将文字颜色设置为红色。

相邻兄弟选择器 

相邻兄弟选择器用于选取紧跟在另一个元素后面的元素，选择器为“元素1 + 元素2”，中间用加号隔开，例如：

h1 + p {
  color: blue;
} 

上面的代码将会选择紧跟在h1元素后面的第一个p元素，并将文字颜色设置为蓝色。

通用兄弟选择器 

通用兄弟选择器用于选取在另一个元素后面的所有元素，选择器为“元素1 ~ 元素2”，中间用波浪线隔开。例如：

h2 ~ p {
  color: green;
} 

上面的代码将会选择所有紧跟在h2元素后面的p元素，并将文字颜色设置为绿色。