[武汉|荣耀师兄]PM-程一凡|2018年11月13日的日报-技能树.IT修真院

发表于： 2018-11-13 20:21:19

1 771

今天完成的事情：

::before和::after伪元素的用法，

1、介绍

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

.plane::before {

     content: "";     
     display: block;
   /* ::before必须配合着content来使用，就这个坑了一下午0.0 还需要转换成块元素*/

}

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

2、content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline（行内元素，行内元素设置width，height属性无效），可以通过设置display:block（块级元素，独占一行,默认情况下，其宽度自动填满其父元素宽度）来改变其显示。

二、自定义单选框input[type="radio"]的样式

对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。

如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。

很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

如果要增加紧接在元素后增加效果，可以这样写：