AI智能
改变未来

css相邻兄弟选择器和同辈选择器的区别

1.相邻兄弟选择器,定义+号后面那个选择器的属性。
选择器1+选择器2{声明1;声明2;…}
在HTML代码中,(引用)选择器1元素后面相邻着(引用)选择器2元素,则属性声明有效。
标准浏览器才支持。
提示:必须相邻才会有效。

<!doctype html><html><head><meta charset=\"utf-8\"><title></title><style>.br1 + .br2 {color: #f00;}</style></head><body><p class=\"br1\">我是p元素</p><p class=\"br2\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p></body></html>


2.同辈选择器,定义~号后面所有选择器的属性。
选择器1~选择器2{声明1;声明2;…}
在HTML代码中,(引用)选择器1元素后面所有(引用)选择器2元素,则属性声明有效。

<!doctype html><html><head><meta charset=\"utf-8\"><title></title><style>.br2 ~ .br1 {color: #f00;}</style></head><body><p class=\"br1\">我是p元素</p><p class=\"br2\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p><p class=\"br1\">我是p元素</p></body></html>

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css相邻兄弟选择器和同辈选择器的区别