HTML兄弟选择器分为哪两种,CSS的兄弟选择器 + 和 ~ 的区别

CSS的兄弟选择器 + 和 ~ 的区别

发布时间:2018-01-19 14:30:59

这是个ul同父元素的第一个p

• 这是第一个li。
• 这是第二个li。
• 这是第三个li。
• 这是第四个li。

这是个ul同父元素的第二个p

这是个ul同父元素的第三个p

效果图：

1.+

(1)同一个父元素的不同元素兄弟，+只会影响后面对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)

ul + p{

color:green;

}

效果图：

(2)同一个父元素的相同元素兄弟，+会循环依次影响对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)

li + li{

color:red;

}

效果图：

2.~

(1)同一个父元素的不同元素兄弟，~会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)

ul ~ p{

color:green;

}

效果图：

(2)同一个父元素的相同元素兄弟，~只会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)

li ~ li{

color:red;

}

效果图：

3.综上

(1)+和~都不会影响元素前面的兄弟节点的样式

(2)+只会影响对应的后面第一个(相邻的)兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式。

标签：区别,标签,元素,li,兄弟,选择器,节点,CSS,ul

来源： https://blog.youkuaiyun.com/jarisMA/article/details/100105595