伪元素和伪类
现在在做前端工作,但是在css的使用方面显然还是皮毛,很多东西都不是很了解,导致每次想要实现某种效果的时候就是各种百度,百度了之后又是什么都没记住,下次遇到问题的时候还是百度,这样是永远学不到东西的,所以就打算将自己需要加强学习的东西都记录下来,作为记录方便以后查阅和深入理解,理解初期可能会有一些问题,以后会慢慢更正,如有问题,请多指教!
今天先来记录伪类和伪元素,之前就遇到过这类的问题,觉得伪类和伪元素是一种很强大的东西,可以做出很多意想不到的效果
,所以按照以下思路进行记录。
1. 什么是伪类和伪元素?
2. 伪类和伪元素的区别和联系?
3. :before和:after的实例
一、什么是伪类和伪元素
伪类和伪元素其实是两个概念,之前一直搞混,或者说就是把他们当作一个东西了,后来才发现两者是不一样的。
1、伪类
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited
,:active
;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child
,:first-of-type
,:target
;伪类存在的意义是为了通过选择器找到那些不存在与DOM树种的信息以及不能被常规css选择器获取到的信息,任何常规选择器可以在任何位置使用伪类,伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。
语法:
selector : pseudo-class {property: value}
伪类表:
Selector | Meaning | CSS |
---|---|---|
:active | 选择正在被激活的元素 | 1 |
:hover | 选择被鼠标悬浮着元素 | 1 |
:link | 选择未被访问的元素 | 1 |
:visited | 选择已被访问的元素 | 1 |
:focus | 选择拥有键盘输入焦点的元素 | 2 |
:first-child | 选择满足是其父元素的第一个子元素的元素 | 2 |
:only-child | 选择满足是其父元素的唯一一个子元素的元素 | 3 |
:last-child | 选择满足是其父元素的最后一个元素的元素 | 3 |
:nth-child(n) | 选择满足是其父元素的第n个子元素的元素 | 3 |
:nth-last-child(n) | 选择满足是其父元素的倒数第n个子元素的元素 | 3 |
:first-of-type | 选择满足是其父元素的第一个某类型子元素的元素 | 3 |
:last-of-type | 选择满足是其父元素的最后一个某类型子元素的元素 | 3 |
:only-of-type | 选择满足是其父元素的唯一一个某类型子元素的元素 | 3 |
:nth-of-type(n) | 选择满足是其父元素的第n个某类型子元素的元素 | 3 |
:nth-last-of-type(n) | 选择满足是其父元素的倒数第n个某类型的元素 | 3 |
:target | 选择当前的锚点元素 | 3 |
:lang | 选择带有指定 lang 属性的元素 | 2 |
:enable | 选择每个已启动的元素 | 3 |
:disable | 选择每个已禁止的元素 | 3 |
:checked | 选择每个被选中的元素 | 3 |
:empty | 选择满足没有子元素的元素 | 3 |
:in-range | 选择满足值在指定范围内的元素 | 3 |
:out-of-range | 选择值不在指定范围内的元素 | 3 |
:invalid | 选择满足值为无效值的元素 | 3 |
:valid | 选择满足值为有效值的元素 | 3 |
:not(selector) | 选择不满足selector的元素 | 3 |
:optional | 选择为可选项的表单元素,即没有“required”属性 | 3 |
:read-only | 选择有"readonly"的表单元素 | 3 |
:read-write | 选择没有"readonly"的表单元素 | 3 |
:root | 选择根元素 | 3 |
其中:first-child
系列的选择在之前是理解有误的,p:first-child
表示选择的元素既要是p标签,同时要是其父元素的第一个子元素,不要错误认为是表示p元素的第一个子元素。
2、伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before
表示选择元素内容的之前内容,也就是"";::selection
表示选择元素被选中的内容。伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。
语法:
selector : : pseudo-element {property: value}
但是伪元素用:
并不会报错,但是用::
较为规范。
伪元素表:
Selector | Meaning | CSS |
---|---|---|
::active | 在指定元素的内容前面插入内容 | 2 |
::before | 在指定元素的内容后面插入内容 | 2 |
::selection | 选择指定元素中被用户选中的内容 | 3 |
::first-letter | 选择指定元素的第一个单词 | 1 |
::first-line | 选择指定元素的第一行 | 1 |
二、伪类和伪元素的本质区别
伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;伪元素其实创造了一个虚拟的容器;而且最明显的就是两者的语法是不同的根据最新的css3伪类使用的是:
,伪元素使用的是::
,虽然因为兼容的问题伪元素使用:
并不会报错,但是还是使用::
较为规范;元素可以同时使用多个伪类,如:table tr:nth-child(2n+1):nth-child(5n) td
,而只能同时使用一个伪元素。
三、伪类和伪元素的使用实例
以下是一些实例,会不断更新。
1、伪类实例
因为在我们生活中使用的比较多的就是 <a>
标签的 :active
、:hover
、:visited
、:link
,也相对比较简单就不做实例了。
:target
选中的是当前锚点的元素,可以更改当前锚点元素的属性和状态。
html代码:
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>
css代码:
.tab_content {
height: 800px;
background: red;
margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
background:blue;
}
1、伪类实例
:before&:after
(1)插图效果
中间空出的部分可以添加图片,展示插图的效果。
html代码:
<!--第一个文字环绕效果-->
<div id="demo1">
<p>We all stood there under the awning and We all stood there under the awning and just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.</p>
<p>She had been shopping We all stood there under the awning and just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.with her Mom in Wal-Mart. She must have been 6 years old, this beautiful brown haired, freckle-faced image of innocence. It was pouring outside. The kind of rain that gushes over the top of rain gutters, so much in a hurry to hit the Earth, it has no time to flow down the spout.</p>
</div>
css代码:
#demo1 {
width: 100%;
height: 500px;
background-color: skyblue;
}
#demo1 p {
width: 300px;
height:400px;
background-color: #000;
margin: 5px;
color: aliceblue;
overflow: hidden;
float: left;
}
p:first-child::before {
content: '';
width: 150px;
height: 200px;
float: right;
}
p:last-child::before {
content: '';
width: 150px;
height: 200px;
float: left;
}
(2)各种图标