浅谈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相似
浅谈css常用伪类用法的更多相关文章
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
- css常用伪类记录
1.超链接使用css伪类设置颜色 a:link {color: #000000} /* 未访问的链接 */a:visited {color: #d90a81} /* 已访问的链接 */a:hover ...
- CSS常用伪类
css伪类 :after 在元素后面插入内容 :hover 鼠标移入时进行 :before 在元素前面插入内容 :link 未选中的链接 :active 点击后产生什么变化 :nth-child 匹配 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
随机推荐
- Linux环境下使用dosemu写汇编
本章学习内容是汇编语言,现在直接写汇编的机会不多了,但一定要能读懂,信息安全的核心思维方式“逆向”在这有很好很直接的体现,反汇编就是直接的逆向工程. 所以我在前几天的学习中在Ubuntu环境下安装了可 ...
- rbx1包里机器人仿真程序的实践
git clone https://github.com/pirobot/rbx1.git 1.打开一个终端 cd ~/catkin_ws/ catkin_make source ./devel/s ...
- IP服务-计算机网络
如需转载请联系:fengxw6@mail2.sysu.edu.cn 未经许可,禁止转载,私人笔记,码字不易,望理解. ---Sun Yat-sen University 冯兴伟 本节主要就讲网络层的各 ...
- 分享知识-快乐自己:SpringMvc中的四种数据源及相关配置(整合快速集成开发)
数据库连接: jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://39.105.105.186:3306/SpringMybatis?us ...
- ES设置字段搜索权重——Query-Time Boosting
Query-Time Boosting In Prioritizing Clauses, we explained how you could use the boost parameter at s ...
- deep QA 基于生成的chatbot系统
deep QA: https://github.com/Conchylicultor/DeepQA 基于论文:https://arxiv.org/pdf/1506.05869.pdf 基于生成的c ...
- android自定义控件(一) 官方文档的翻译
构建自定义组件 Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button).文本框(TextView),可编辑文本框(EditText),列表框(ListView) ...
- Python实现排序算法之快速排序
Python实现排序算法:快速排序.冒泡排序.插入排序.选择排序.堆排序.归并排序和希尔排序 Python实现快速排序 原理 首先选取任意一个数据(通常选取数组的第一个数)作为关键数据,然后将所有比它 ...
- 相对路径转绝对路径C++实现
#include<iostream> #include<string> #include<vector> using namespace std; //相对路径转绝 ...
- 百度地图API的第一次接触——标注和信息窗的使用
1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...