css伪元素

Isabella

1、定义和特性

定义:

伪元素,顾名思义,就是虚假的元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。

特性:
1、可以减少dom元素;
2、必须配合content属性一起使用,否则不会生效,且伪元素默认是inline,但可以用display属性来调整;
3、结构无法审查,不方便调试;
4、js无法操作,增加、删除等。

2、分不清:还是::?

在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。
在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类伪元素的尝试。
为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。

3、CSS 伪元素

选择器例子例子描述
::afterp::after在每个
元素之后插入内容。
::beforep::before在每个
元素之前插入内容。
::first-letterp::first-letter选择每个
元素的首字母。
::first-linep::first-line选择每个
元素的首行。
::selectionp::selection选择用户选择的元素部分。

3、使用场景

1、content:'',如果没有内容也要写空串。
示例:清除浮动

<div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
</div>
.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
}

2、content:attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值
示例:词汇提示工具

<p>
    我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
            <span data-descr="small popups which also hide again">提示</span>。<br />
            把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>
span[data-descr] {
    position: relative;
    text-decoration: underline;
    color: #00F;
    cursor: help;
}

span[data-descr]:hover::after {
    content: attr(data-descr);
    position: absolute;
    left: 0;
    top: 24px;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 1;
}

3、content:url()/uri(), 插入一个外部资源文件,可以是图像,音频,视频文件或浏览器所支持的其他任何资源。

<div class="insert">12</div>
.insert {
   line-height: 20px;
}
.insert::before {
    content: url(../images/headset.png);
    width: 24px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

效果:
image

4、content:counter(name)调用计数器,可以不使用列表元素实现序号功能
先来了解一下counter-reset、counter-increment和counter属性。

counter-reset:计数器名称 初始值;创建或重置一个或多个计数器,初始值默认为0。
counter-increment:计数器名称 增量值;设置某个选取器每次出现的计数器增量。增量值默认为1。
counter(计数器名称,style);必须和content一起使用,给元素插入计数器的值。
style参数是用来定义计数器的风格,默认为数字,还可以是lower-roman、lower-alpha、lower-greek罗马、英文、希腊等字符。
<div class="container">
    <h2>part</h2>
    <h2>part</h2>
</div>
.container {counter-reset:section;}
h2:before { 
    counter-increment: section; 
    content: "Chapter"  counter(section) ".";
} 
</style>

效果:
image

4、兼容性

image
image
总体来说大部分浏览器的支持性还是很好的,所以放心大胆的用吧~

5、和伪类的区别

1、写法不同,伪类只能用单冒号,而伪元素单冒号跟双冒号都可;
2、一个本质上是元素,另一个本质上是类;
2、伪类是用于向某些选择器添加特殊的效果,首先这个元素得是存在的,而伪元素是添加一个新的dom元素,顺便带着一些样式。

参考文档
https://www.cnblogs.com/wonyu...
https://blog.csdn.net/csdn372...
https://www.zhangxinxu.com/wo...

阅读 92

越努力越幸运

19 声望
3 粉丝
0 条评论
你知道吗?

越努力越幸运

19 声望
3 粉丝
宣传栏