黑马程序员技术交流社区

标题: 【上海校区】伪类与伪元素的区别 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-6-28 08:54
标题: 【上海校区】伪类与伪元素的区别
W3C关于伪类伪元素的定义

• 伪类：用于向某些选择器添加特殊的效果。

• 伪元素：将特殊的效果添加到某些选择器上。

  明确两点：
  1 都与选择器相关
  2 特殊效果，这两者描述了其他css无法描述的东西
  
  

  
  

种类

• 伪类：
  :active、:focus、:hover、:link、:visited、:first-child（将特殊的样式添加到元素的第一个子元素）、:lang（允许创作者来定义指定的元素中使用的语言）

  这里注意：a标签相关的伪类的顺序：:link，:visited，:hover，:active（可以用 love hate 来记忆）

• 伪元素：
  :first-letter（将特殊的样式添加到文本的首字母）、:first-line（将特殊的样式添加到文本的首行）、:before（使用content属性在某元素之前插入某些内容）、:after（在某元素之后插入某些内容）

  注意：
  对于:before和:after必须配合content属性使用，添加的内容不会改变文档结构，不可复制，仅仅是在CSS渲染层加入，display默认值为inline（尽量用来显示一些修饰性的内容，如图标，也可以用:after清除浮动）
  
  

  伪类和伪元素的区别

  以伪类中的:first-child和伪元素中的:first-letter为例：
  :first-child：用于选取属于其父元素的首个子元素的指定选择器。
  :first-letter：用于选取指定选择器的首字母。

  
  

<p>        <i>First</i>        <i>Second </i>    </p>
p>i:first-child{            color: red;        }

效果：

如何模拟上述效果? 添加类

<p>        <i class="first-child">First</i>        <i>Second </i>    </p>
.first-child{            color: red;        }

再看伪元素的效果及模拟：

<p>        Hello world    </p>
p:first-letter{           color: coral;       }

效果：

如何模拟上述效果?添加元素

<p>        <span>H</span>ello world    </p>
span{  color:red;}

• 这也是为什么叫做伪类，为什么叫做为元素的原因。
  

伪元素与元素的区别

• 伪元素无法通过JS获取其DOM
• 伪元素无法通过浏览器开发者工具直接查看
• 伪元素默认是 inline
  

使用伪元素的注意事项

• 使用伪元素before,after必须设置content
• 使用伪元素before,after显示背景图，一定要使用display设置为块元素
• 使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle
  

总结

为了区分伪类和伪元素，CSS3明确规定伪类用一个单引号表示，伪元素用一个双引号表示。
由于兼容性问题，单引号表示伪元素仍然可以使用。

---

作者: 不二晨    时间: 2018-7-12 17:49
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2