浅谈css常用伪类用法

着重写一下after和before的用法：

css样式搞定：标签元素+伪类after

a.'class名':after{//我的样式名称是这个，可以写成你自己的样式名称
　　content: '已打包';
　　display: inline-block;
　　min-width: 10px;
　　padding: 3px 7px;
　　margin-left: 2px;
　　font-size: 12px;
　　font-weight: bold;
　　color: #fff;
　　line-height: 1;
　　vertical-align: middle;
　　white-space: nowrap;
　　text-align: center;
　　background-color: #009bdb;
　　border-radius: 10px;
}

有时可以用来和checkbox绑定，如果我们想做勾选了复选框有什么变化就可以用

css3兄弟选择器：input:checked+label:after{css样式}，只要被选中，label标签就会有相应的样式变化;

before是放在元素的前面，用法与after相似

转载于:https://www.cnblogs.com/shixy1617/p/9023303.html

浅谈css常用伪类用法相关推荐

CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等细节优 ...
浅谈CSS常用属性（2）-z-index属性
目录 1. z-index的作用 2. 使用要求 3. z-index:auto 与 z-index:0 的异同 4. z-index 相同的层叠关系(处于同一平面的定位元素) 1. z-index的 ...
css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式怪异模式盒模型今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从什么是CSS ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
浅谈String和StringBuffer类:
浅谈String和StringBuffer类: 如果有错误的地方,请多多提出! 内存分配: String(固定字符串): String类对象一旦创建,内容无法修改. String a="3& ...

浅谈css常用伪类用法

浅谈css常用伪类用法相关推荐

最新文章

热门文章