.accordion li.files > a:before 什么意思！在css中！>代表什么意思

html-css010

.accordion li.files > a:before 什么意思！在css中！>代表什么意思,第1张

>是一个表达式符号，代表 " 直接下属 " 例子︰<div> <span id="1"></span> <p><span id="2"></span></p></div>div >span 指向的就是只有 id="1" 的那个 <span>，因为 " 直接下属 " 不包括 " 子孙属性 "这样明白吗？而 a:before 是一个新世代的 CSS 语法，IE 是不支持的意思是 <a>的前面 (虚拟的)例子︰<div><a class="files" href="#">档案 </a></div>而 a:before 就是在画面上你看到 "档案" 两只字的左边全部区域，通常用作放背景图或者放列表图示才会用

:before 选择器在被选元素的内容前面插入内容。

定义中提到，是在被选元素的 内容 前面插入内容，如下图，div 是一个容器，div 中的内容是 testDiv元素 ，css 中的 :before 和 after 都显示在 div 内部，二者分别位于 testDiv元素 内容的前后。

所以可以看到，伪元素也是被选元素的内容，只是会插入到被选元素原本内容的前后。

插入的伪元素默认是 display 属性，如果想要为伪元素设置宽高等，需要修改伪元素的 display 属性为 inline-block 或者 block 。

伪元素插入的位置是被选元素的 内容 的前或者后，因此本质上伪元素也是被选元素的子元素。所以定位时，被选元素就是伪元素的父元素。

如图，被选元素 test-div 设置了 position: relative ，外部元素 test-wrapper 也设置了 position: relative ，然后对被选元素的伪元素 :after 设置定位，可以看到，伪元素的位置是根据 test-div 来定位的，因此，可以验证 被选元素就是伪元素的父元素 这句话。

可以这样：

:before{content:''color:red}

为什么你可以想到

.divcss{color:red}

这样的写法（即不指定元素的），但是就想不到

:before{content:''color:red}

这样的呢？