CSS伪选取器的运用-遁地龙卷风

分为伪元素接纳器和伪类拔取器二种,前者五个冒号,后者一个冒号,但是浏览器都看作一个冒号

结缘::before实现自定义列表

1.a.::first-line

body
{
  counter-reset:dnf;
}
div::before
{
  content:counter(dnf) “.”;
  counter-increment:dnf;
}
<body>
  <div>dnf</div>
  <div>dnf</div>
  <div>dnf</div>
  <div>dnf</div>
</body>
(1)
counter-reset:dnf会在条分缕析到对应元素执行,body只有一个,所以只举行两回
重置、定义dnf计数器,默认0,能够指定默认值
counter-reset:dnf 10;
可以定义两个计数器
counter-reset:dnf 10 lol;

逐层匹配,直到有文件元素且停止改行结束

(2)

设置css属性word-break:break-all、文本长度超越元素的例证就不说了

content:counter(dnf) “.”;//1
counter-increment:dnf; //2
不论是2语句在1前方仍旧在1背后都会事先执行,默认每趟增长1,可自己指定
counter-increment:dnf 2;
1语句默认显示数字,仍可以是任何list-style-type属性补助的任意值
content:counter(dnf,lower-alpha) “.”;
小写英文字母a,b,c,d

body::first-line
{
color:red;
}

(1)
<body>
  <p id=”lol”>
    <span><i>123</i><br/><i>123</i></span><br/>
  </p>

</body>
率先个i标签变红

(2)
<body>
  <p id=”lol”>
    123<br/><!–变红–>
    <span><i>123</i><br/><i>123</i></span><br/>
  </p>
</body>

未完待续!

迎接指正!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website