伪类选择器的使用方法总结以及伪类和伪元素的区分

  1. 伪类选择器
    ::before在元素前面插入内容
    ::after在元素内部后面插入内容
  2. 伪类选择器注意事项

(1)before 和 after 必须有 content 属性

(2)before 在内容前面,after 在内容后面

(3)before 和 after 创建的是一个元素,但是属于行内元素

(4)创建出来的元素在 Dom 中查找不到,所以称为伪元素

(5)伪元素和标签选择器一样,权重为 1

(6)用于添加添加字体图标
2. 在CSS3中,伪类用单冒号:表示;而伪元素用双冒号::表示。伪元素::写法在一些浏览器中不兼容,既可以使用:又可以写::。
3. CSS3中伪类和伪元素的语法不同,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。
4. 可以同时使用多个伪类,却只能同时使用一个伪元素。
5. 首先伪类是用单冒号表示:如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

然后伪元素用双冒号表示:如::first-letter, ::first-line, ::before, ::after

  1. 伪类元素: ”需要注意的是在CSS的定义中,同一个元素的:hover必须位于:link、:visited之后才能生效,:active必须位于:hover之后才能生效。
  2. 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特殊效果。
发布了53 篇原创文章 · 获赞 1 · 访问量 900

猜你喜欢

转载自blog.csdn.net/h_el_lo/article/details/105391124