资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/谈谈css伪类与伪元素

谈谈css伪类与伪元素

hedzr / 873人阅读

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。

css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能够让我们的html结构更清晰合理，也能在一定程度上减少js对dom的操作！

定义

伪类包含两种：状态伪类和结构性伪类。

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 选择某个元素的一个或多个特定的子元素；

:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：

:first-letter 选择元素文本的第一个字（母）。

:first-line 选择元素文本的第一行。

:before 在元素内容的最前面添加新内容。

:after 在元素内容的最后面添加新内容。

注意事项

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

伪元素的应用

（1） 清除浮动

如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。

</>复制代码 
  1. .clear:after {
  2.     content: "";
  3.     display: block;
  4.     clear: both;
  5. }

(2) 画分割线

画一条如下的分割线：

</>复制代码 
  2.   
    分割线

（3）计数器

用js做个计数器是比较常见的，但我css也能实现！用到的属性有：

1> counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0。

2> counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

3> content: 插入生成内容。

代码如下：

</>复制代码 
  2.   
  3.     a
  4.     b
  5.     c
  6.     d
  7.     e
  8.     f
  9.     g
  10.     h
  11.     i
  12.     j
  13.   
  14.   
    我选择了个字母

（4）形变

通过伪元素实现如下透视形变：


代码如下：

</>复制代码 
  1. .transform{
  2.       position: absolute;
  3.       top:50%;
  4.       left: 50%;
  5.       transform:translate(-50%,-50%);
  6.       width: 160px;
  7.       padding: 60px;
  8.       text-align: center;
  9.       color: white;
  10.       font-size: 200%;
  11.     }
  12.     .transform::before{
  13.       content:"";
  14.       position: absolute;
  15.       top: 0; right: 0; bottom: 0; left: 0;
  16.       transform:perspective(40px) scaleY(1.3) rotateX(5deg);
  17.       transform-origin: bottom;
  18.       background:rgb(255, 145, 20);
  19.       z-index:-1;
  20.     }

</>复制代码 
  1. .rhombus{
  2.       position: absolute;
  3.       top:50%;left: 50%;
  4.       transform:translate(-50%,-50%);
  5.       width: 200px;line-height:200px;
  6.       text-align: center;
  7.       color: white;
  8.       font-size: 200%;
  9.     }
  10.     .rhombus:before{
  11.       content: "";
  12.       position: absolute;
  13.       top: 0; right: 0; bottom: 0; left: 0;
  14.       background-color:rgb(20, 255, 255);
  15.       z-index:-1;
  16.       transform: rotateZ(45deg);
  17.     }

(5) 增大点击热区

</>复制代码 
  1. .btn::before {
  2.       content:"";
  3.       position:absolute;
  4.       top:-10px;
  5.       right:-10px;
  6.       bottom:-10px;
  7.       left:-10px;
  8.     }
总结

伪元素的本质是在不增加dom结构的基础上添加的一个元素，在用法上跟真正的dom无本质区别。普通元素能实现的效果，伪元素都可以。有些用伪元素效果更好，代码更精简。

云服务器 GPU云服务器 css元素 谈谈 谈谈域名 来谈谈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112778.html

相关文章

  • 谈谈css伪类与伪元素

    摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

    Berwin 评论0 收藏0

  • 伪类与伪元素

    摘要：一伪类伪类包含两种状态伪类伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的。二伪元素伪元素是对元素中的特定内容进行操作，而不是描述状态。 一、伪类 伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。 在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样...

    ChanceWong 评论0 收藏0

  • 伪类与伪元素

    摘要：介绍伪类和伪元素是中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类伪类类似于，用于对已有元素增加特殊状态，比如等。伪元素伪元素包括。 介绍 伪类和伪元素是css中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类（pseudo-...

    kamushin233 评论0 收藏0

  • 总结常用伪类与伪元素

    摘要：总结常用伪类与伪元素伪类和伪元素是为了格式化树以外的信息而被引入的。伪类一个伪类是以一个冒号作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。 总结常用伪类与伪元素 伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。 伪类 一个 CSS 伪类是以一个冒号(:)作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式...

    anRui 评论0 收藏0

发表评论

登陆后可评论

0条评论

hedzr

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<