老师，咨询两个问题

第一个问题，伪元素，我在百度的菜鸟教程上看得是单冒号，老师代码里是双冒号，比如:before和::before啥区别，啥时候用单冒号，啥时候用双冒号？

第二个问题，如下代码，

.filter .group .condition{

color: #4c4948;

display: inline-block;

position: relative;

margin: 6px 24px 6px 0px;

padding: 0 5px;

}

.filter .group .caption .condition{

position: absolute;

right: 0;

top: -6px;

}

.filter .group .caption .condition::before,

.filter .group .condition::after{

content: ' ';

display:block;

width: 1px;

height: 18px;

background-color: #dcdddd;

top: 0;

right: -12px;

position: absolute;

}

.filter .group .condition元素包含.filter .group .caption .condition元素，不能说是其父元素，但是.filter .group .condition，position:relative了，.filter .group .caption .condition，position:absolute了，这个如何理解，.filter .group .condition它相对于谁定位？

慕盖茨9092533 2019-06-18

源自：实战：挂号平台首页 6-3 按医院查找-多条件查询原理、分页原理

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-06-19 12:53:33

同学你好，你整体的理解的是对的，这里确实有点绕，不好理解，不过同学参照下面两条原则，也是可以慢慢理解的，

1、绝对定位参照离它最近的有定位属性（static除外）的先辈元素进行定位

2、 CSS样式中，选择器权重高设置的属性会覆盖前面的设置样式，

如下图所示， caption下的condition选择器权重更高，会覆盖前面设置的绝对定位，所以group>caption>condition是绝对定位。 group下与caption同级的condition是相对定位

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

好帮手慕慕子 2019-06-18 16:44:06

同学你好，

1、单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）;
:before/:after 的兼容性要比::before/::after好。如果需要考虑兼容IE浏览器，可以使用单冒号，如果不要考虑兼容IE, 推荐使用双冒号

2. 如下图所示，绝对定位参照离它最近的有定位属性（static除外）的先辈元素进行定位，与caption同级的 .filter .group .condition参照group进行定位，在caption下的condition参照caption进行定位

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者慕盖茨9092533 #1

老师,"与group同级的 .filter .group .condition参照group进行定位",这句话是说与caption同级的.filter .group .condition吧，然后它是相对定位，不是相对于其正常位置定位的嘛，然后.filter .group .condition包含.filter .group .caption .condition，其相对定位，相当于.filter .group .caption .condition设置相对定位了，然后它又设置了绝对定位，设置了两次定位，好难理解

2019-06-19 12:27:04