CSS伪元素及元素的显示与隐藏的学习

2024-05-09 06:31:10

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪元素在超链接中的应用

1. link 未被访问过的链接样式

a:link{

color: red;

}

2. visited 访问过后的样式

a:visited{

color: skyblue;

3. hover 鼠标悬停时的标签

a:hover{

background-color: yellow;

margin-top: 10px;

}

4. active 鼠标点击时候的样式，不松开

a:active{

color: white;

}

小提示：设置超链接样式的时候，必须按照以上的顺序

focus(聚焦，常用于input 文本框)

input:focus {

background-color: green;

color: white;

}

元素的显示与隐藏

display属性

display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。

display隐藏元素后，不占有原有位置

visibility 属性

visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。

visibility隐藏元素后，保留原有位置

overflow 属性

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

实列代码如下：

<style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center;}.tudou:hover .mask{display: block;}
</style>

CSS伪元素及元素的显示与隐藏的学习相关推荐

jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
jQuery控制元素的显示与隐藏（三种方式对比）
hide和show hide:是$(".类名")或$("#标签名")或$("标签名").hide() show:是$(".类名&q ...
css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
2天驾驭div+css_老婆竟然只知道几个css伪类，不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用.我也拗不过她,而且其实我也挺佩服的.所以就教她了.最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类 ...
HTML有displaynone无法隐藏,display：none显示和隐藏
显示和隐藏问题 #a{ width: 500px; height: 300px; background-color: red; /*display:none;*/ visibility:hidden; ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
CSS伪类和伪元素以及选择器的权重
首先,在书写上: 伪元素既可以使用::,也可以使用:.但是伪类呢,只能使用一个冒号 :. 权重伪类选择器的权重大于伪元素选择器.伪类选择器的权重和class,属性选择器相同,伪元素选择器的权重和标签 ...
css中什么是伪元素,CSS伪元素是什么？
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...

最新文章

热门文章