美文网首页
伪类和伪元素

伪类和伪元素

作者: lucky_果果 | 来源:发表于2019-11-30 02:11 被阅读0次

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

伪元素:CSS 伪元素用于向某些选择器设置特殊效果。

1、伪类:

(1)锚伪类::link  \  :visited\  :hover\  :active

a:link{color: #FF0000}/* 未访问的链接 */

a:visited{color: #00FF00}/* 已访问的链接 */

a:hover{color: #FF00FF}/* 鼠标移动到链接上 */

a:active{color: #0000FF}

(2)伪类与css类

<a class="red" link="">  => a.red: visited {color: #FF0000}

(3)  :first-child 伪类

例如:

1》匹配第一个p标签和第一个li标签

p:first-child {font-weight: bold;}

li:first-child {text-transform:uppercase;}

2》匹配所有 <p> 元素中的第一个 <i> 元素

p>i:first-child

3》匹配第一个p标签中的所有i标签

p:first-child i {  }

(3):lang伪类

匹配lang为no的标签,添加引号

2、伪元素

(1)为首行添加样式=》:first-line 伪元素

(2)向文本的首字母艺添加样式:  :first-letter 伪元素

(3)伪元素和 CSS 类 :      p.article:first-letter{ color: #FF0000; }   上面的例子会使所有 class 为 article 的段落的首字母变为红色

(4)多重伪元素   首行+首字母

(5):before 伪元素  ":before" 伪元素可以在元素的内容前面插入新内容。

(6):after 伪元素    ":after" 伪元素可以在元素的内容之后插入新内容

相关文章

  • 细说CSS伪类和伪元素

    原文 博客原文 大纲 1、伪元素2、伪类元素3、伪元素和伪类元素的区别4、伪类和伪元素的使用 1、伪元素 伪元素在...

  • CSS伪类和伪元素

    1. 什么是伪类和伪元素1.1. 伪类1.2. 伪元素1.3. 伪类与伪元素的区别 2. 使用 1. 什么是伪类和...

  • 伪元素和伪类

    本文将介绍伪元素和伪类选择器的一些知识,以及在VUE中伪元素的动态数据更新; 伪元素和伪类: 伪元素:在内容元素的...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类: css引入伪类和伪元素概念是为了格式化文...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类:css引入伪类和伪元素概念是为了格式化文档...

  • CSS伪类和伪元素

    这篇文章比较详细的说明有哪些伪类和伪元素:总结伪类和伪元素 这句话说清楚伪类和伪元素的区别说的挺好的:(出处:重新...

  • 伪元素初解

    一、伪元素与伪类 1. 常见的伪类 2. 伪元素 二、伪元素(这里只说::before和::after) 1. 了...

  • 第十二章 高级选择器

    伪类和伪元素区别 伪类一个冒号,伪元素两个冒号 一,伪类选择器 伪类性质: 伪类性质:加冒号不会对页面产生布局结...

  • 伪类和伪元素初探

    Css3为了区分伪类和伪元素,伪类使用单冒号:,伪元素使用双冒号:: 常见伪类有 :hover,:link,:ac...

  • Css3Two

    文本溢出样式设置 文本超出容器以后: 换行显示 超出容器部分也显示 伪类和伪元素 伪类和伪元素 都是css中的伪类...

网友评论

      本文标题:伪类和伪元素

      本文链接:https://www.haomeiwen.com/subject/klbnwctx.html