写了这么多年代码,对CSS中的伪类和伪元素竟然没有细致的进行过学习总结,由此可见在实际代码开发中,用的也确实不多,也就用过一些:first-child,:hover之类的吧,其它的连before什么的都没用过,于是迫切需要大于伪元素与伪类进行一个系统整体的学习。
伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。
伪元素:::before、::after、::first-letter、::first-line、::selection、::placeholder
在被选中元素的之前和之后插入内容,其中content属性指定要加入的内容,content必须有值(空值也可以),其默认伪inline,可以通过display:block改变. content属性:空值、字符串、url、attr、counter。
.clearFix::after{
clear:both,
display:block;
content:'',
height:0;
overflow:hidden
}
<body>
<h1>Good Coder</h1>
<h2>Liu</h2>
<h2>Zhou</h2>
<h1>Bad Coder</h1>
<h2>Lazy</h2>
<h2>Not Attentioin</h2>
body{
counter-reset:section
}
h1{
counter-reset:subsection
}
h1::before{
counter-increment:section;
content:counter(section)'\';
}
h2::before{
counter-increment:subsection;
content:counter(section)'.'counter(subsection);
}
</body>