Rumah  >  Artikel  >  hujung hadapan web  >  浅谈对css伪类和伪元素的理解

浅谈对css伪类和伪元素的理解

零下一度
零下一度asal
2017-06-29 15:06:221868semak imbas

前言

今天主要谈谈css的伪类和伪元素。其实,关于伪类和伪元素,我在小工具CSS 选择器演示 中,写了不少伪类和伪元素,大家可以去看一下!

伪类和伪元素的理解

官方解释

伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

我自己的理解:

伪类,类,class是一个类,就类似class这样,表示一些元素的状态的,但是无须标识的分类。

伪元素,就是一个元素,类似p标签元素,等等,逻辑上存在,但是实际并不存在在文档树中。

另外一个简单的理解和区分就是:

伪类前面是一个冒号,为元素前面是两个冒号。E:first-child 伪类,E::first-line为元素。

特殊情况::before 和 ::after 伪元素

before 和after是在元素前面和后面添加一些元素,因此是伪元素,CSS3选择器中已经将其前面变为两个冒号了。请看:w3cselect

问题来了,那么为什么我们平时用before和after前面就一个冒号?

当你看了css2选择器就知道了,老的规范中,伪类和伪元素都用一个冒号,新规范为了区分,伪元素统一用两个“::”,所以,大家注意了,往后在写css3的时候,为元素要用两个冒号,伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果,讲了一些。

像伪元素

::-webkit-scrollbar::selection::-webkit-input-placeholder 
::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果!

html
<a href="#">haorooms</a>
css
a {    position: relative;    
display: inline-block;    outline: none;    
text-decoration: none;    color: #000;    font-size: 32px;    
padding: 5px 10px;}a:hover::before, 
a:hover::after { position: absolute; }
a:hover::before 
{ content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }

其中content中可以用attr也可以用url

例如:

a::after { content:"(" attr(href) ")"; } h1::before { content: url(logo.png); }

伪类中用的最多的要数:nth-child()选择器了,关于nth-child(),我之前有篇文章介绍过。

Atas ialah kandungan terperinci 浅谈对css伪类和伪元素的理解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:HTML的介绍和使用方法Artikel seterusnya:div+css命名规范大全