这是我参与「第五届青训营 」伴学笔记创作活动的第七天
伪类
- 伪类存在的意义是为了通过选择器找到那些 ①不存在于DOM树中的信息 以及 ②不能被常规CSS选择器获取到的信息
- 伪类由一个冒号 : 开头，冒号后面是伪类的名称和包含在圆括号的可选参数。
- 任何常规选择器都可以在任何位置使用伪类。
- 一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
常用伪类
| 伪类 | 中文释义 | 用法 |
|---|---|---|
| a:link{} | 链接 | 在超链接点击之前 |
| a:visited{} | 访问过的 | 在超链接点击之后 |
| a:hover{} | 悬停 | 鼠标放到超链接上的时候 |
| a:active{} | 活跃 | 鼠标点击超链接且不松手的时候 |
<p>
<a href="#" class="active">链接</a>
</p>
.active:link{ /* 点击前 */
color: orange;
}
.active:visited{ /* 点击后 */
color: purple;
}
.active:hover{ /* 悬停时 */
color: red;
}
.active:active{
color: teal; /* 点击不松开时 */
}
:nth-child()，nth-of-type()·
`两者用法类似`，均表示第几个该元素
伪元素
::after 和 ::before
- ::before和::after是什么?
::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。
- content属性
- ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
- ::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空
- 这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容
- content取值
- string（使用引号包一段字符串，将会向元素内容中添加字符串）
p::before{
content: "《";
color: #000000;
}
p::after{
content: "》";
color:#000000;
}
- attr() ------通过attr()调用当前元素的属性，比如图片alt提示文字或者链接的href地址显示
- url()/uri() ----------用于引用媒体文件。比如：“百度”前面给出一张图片，后面给出href属性。
\
- content注意事项
- URL不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
- content属性，直接使用图片，即使写width,height也无法改变图片大小;
解决方案：如果要解决这个问题，可以把content:''写成空，使用background:url()来添加图片
/*伪元素添加图片：*/
.wrap:after{
/*内容置为空*/
content:"";
/*设置背景图，并拉伸*/
background:url("img/06.png") no-repeat center;
/*必须设置此伪元素display*/
display:inline-block;
/*必须设置此伪元素大小（不会被图片撑开）*/
background-size:100%;
width:100px;
height:100px;
}
- 苹果端伪元素不生效,img、input和其他的单标签是没有:after和:before伪元素的（在部分浏览器中没有，如:苹果端会发现无效），因为单标签本身不能有子元素。 解决方案：给img包一个div可以解决
