CSS——组合选择器

1、后代选择器(包括儿子和孙子)

.c1 .c2{
            color: red;
        }

  

2、子代选择器(只选择儿子)

.c3 > .c5{
            color: red;
        }

  

3、与选择器

选择p标签下面的.c1的标签:

p.c1{
            color: red;
        }

 

4、或选择器(同时选择)

 p.c1,#i1{
            color: red;
        }

  

5、兄弟选择器

(1)相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+,加号两边为相邻的两个元素,选择器会匹配加号后面的元素。

h1 + p {
    color: blue;
    font-size: 18px;
}

  

(2)通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似,但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素,但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面的元素。

h1 ∼ p {
    color: blue;
    font-size: 18px;
}

  

 

上一篇:cf1607 D. Blue-Red Permutation(思维)


下一篇:纯css制作三角形