CSS相邻兄弟选择器使用详解

相邻同级选择器+：选择同级的下一个相邻元素。

语法：element1 +element2 {样式}。

条件：元素1 在前面，元素2 相邻且在同一水平面上。

例如：

标题

本段变成红色

仍然是红色

。
h2 +p{颜色：红色；}。

子元素

同级元素。
.box+p 无效，p 不是 .box 的同级。

场景：
标题后的段落：h2 +p{font-size:1 .2 em;}。

表单提示：input+p{margin-top:-1 0px;}。

提示：
.module+.module{margin-top:2 0px;}
.hidden-element+p{padding-left:0;}

标题

内容
。
h3 +div{颜色:蓝色;
注意：
中间有其他元素则无效。

无效的父子关系。

就选择相反的。

说实话：好好使用 + 并添加更少的类别。

常见的css选择器有哪些

元素选择器，例如 p 或 div，简单明了。
通用、数字、全局重置、一次性选择器。
ID选择器，id，唯一标识符，很少使用。
类选择器 .class 非常灵活，并且元素可以重用。
属性选择器，例如 [target] 或 [type="text"]，精确定位属性。
子选择器，>符号，直接子元素，层次清晰。
后代选择器、空白、任意类、范围广泛。
邻接选择器，+号，直接兄弟，邻接关系。
组合选择器，无空格，多个条件，复杂的组合。
选择器以逗号分隔、逗号、多项选择、选择任意选项。
灵活使用这些选择器可以更精确地控制CSS样式。

七种基本的css选择器

说白了，CSS 选择器就像不同的找人方法。
是否直接使用取决于效率。

我们先来说说最重要的事情。
元素选择器是最基本的。
去年我们开展了一个电子商务项目。
站点级统计显示，p 标签占所有选择请求的 4 3 %。
这就是生产力。
还有一点是ID选择器，它必须是唯一的。
去年有同学用btn-primary作为按钮，但因为拼错为btn-primary，导致一半按钮没有样式。
说实话，当时很混乱。
还有另一个关键细节。
类选择器使用起来最灵活。
我们内部的组件库规定你应该使用-connected命名，比如.btn-primary，这样浏览器在调试时可以直接定位到具体的类名，而不是像btnprimary那样乱七八糟。

起初我认为通配符选择器是通用的，但后来我发现它们是错误的。
在大型项目中使用它们会在浏览器上引发滚雪球效应。
去年重构时，我们关闭了选择器，加载速度快了 3 0%。
等等，还有一件事。
相邻同级选择器h1 +p特别适合标题和段落的固定组合，但前提是DOM结构必须完美。
如果稍微乱一点，就会失败。
div p 后代选择器是最懒的，但不要过度使用它。
上次有同学写了body div span，整个站点的span也跟着变了。
调试了半天，发现是这样写的。

一个陷阱：后代选择器虽然方便，但是它的优先级比你想象的要低。
不要用它来改变绝对必要的样式。