兄弟选择器和相邻选择器

1、        ~        兄弟选择器

        兄弟选择器：找到指定的元素后面的所有满足条件的兄弟元素

 

运行结果截图：

 

                        图1

 2、        +        相邻选择器

相邻选择器：选择紧接在某个元素后的元素，并且二者具有相同的父级元素

 

运行结果为：

 

                        图2

3、兄弟选择器和相邻选择器的注意事项

        兄弟选择器 ‘~’ 只会选择后面满足条件的元素，不会影响前面的元素，如图1，第一个p标签的样式就不会发生改变，兄弟选择器选择的满足条件的 所有 元素；

        相邻选择器 ‘+’ 只会选择满足条件的第一个元素，是紧挨着元素的兄弟元素，如图2，只有h1标签后面的第一个p标签的样式会发生改变，后面的元素不会被影响，相邻选择器选择的是单个 元素。