css伪元素选择器（伪对象选择器）checked + 伪元素练习
伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上应该是：
：weilei ：：伪元素 而现在我们为了兼容旧的书写方式，用一个冒号引导伪类也是能被解析的。
伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的 状态或属性 ；
伪元素表示DOM外部的某种 文档结构 。
伪类更多的是定义元素的状态，而伪元素则是改变文档结构，在结构外另加一个没有实际存在的元素（伪元素）
常用伪元素：
1. E：before/E：：before
2. E：after/E：：after
1. E：before/E：：before
before 选择器在被选元素的“内容”前面插入内容，用来和content属性一起使用。
虽然E：before可转化为E::before，但是你写伪元素是要规范，用两个冒号。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:nth-child(2){font-size: 30px; color: orange;}
ul::before{content:"这是ul的伪元素"; color: blue;}
ul::after{content:"这是之后的伪元素";}
</style>
</head>
<body>
<ul>
<li>刘亦菲</li>
<li>范冰冰</li>
<li>杨幂</li>
<li>袁姗姗</li>
</ul>
</body>
</html>
显示为：
是显示在被选中标签内容之前和之后。
2. E：after/E：：after
after选择器在被选择元素的“内容”前面插入内容，用来和content属性一起使用
虽然E：before可转化为E：：before，但是你写伪元素时要规范，用两个冒号。
content属性与：：before及：：after伪元素配合使用，来插入生成内容。伪元素还可以添加图片。
checked + 伪元素练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:checked+span{background: red;}
input:checked+span::after{content: " 我被选中了";}
</style>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>点击你喜欢的明星</legend>
<ul>
<li>
<label>
<input type="radio" name="star" /><span>范冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>李冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>杨幂</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>以下是多选</legend>
<ul>
<li>
<label>
<input type="checkbox" name="多选" /><span>惊天魔盗团</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="多选" /><span>魔兽</span>
</label>
<li>
<label>
<input type="checkbox" name="多选" /><span>北京遇上西雅图</span>
</label>
</li>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
显示为：
此例用到了：
相邻选择符（E+F）
选择紧贴在E元素之后的F元素，用加号表示。选择相邻的第一个兄弟元素。
还有after
css伪元素选择器（伪对象选择器）checked + 伪元素练习的更多相关文章
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- 关于DOM中的model（将元素转成对象进行操作）
DOM document (html, xml) object 将文档中的HTML元素转成js的对象 通过ID找到文档的元素转成js对象 var obj = document.getElementBy ...
- CSS伪元素选择器和属性选择器
伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter 首字母(只能用于块元素) :first-line 第一行 1.为p元素中的第一个字符设置颜色为黄色, ...
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- css3 伪对象选择器添加几何图形文字的方法
伪对象选择器包含三种,分别为: E::selection E::after E::before 其中before和after必须与content结合使用,如果content想用几何图形要加 \ 进行转 ...
- 以css伪类为基础,引发的选择器讨论 [新手向]
作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久. 经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论. 伪类:伪类对元素进行分类是基于特征(characteri ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
随机推荐
- web前端编写注意点
1.在语义不明显,既可以用 <P> 也可以用 <div> 的地方,尽量用 <P> ,因为 <P> 默认情况下有上下间隔,去样式后的可读性更好,对兼容特殊 ...
- Zju1015 Fishing Net
弦图判定 代码 #include<cstdio> #include<queue> #define mp make_pair #define fi first #define s ...
- 理解NDCG
关于NDCG,wiki给点解释很详细,这里我谈谈我的理解. NDCG(Normalized discounted cumulative gain):是用来衡量排序质量的指标. 其中一种计算公式如下: ...
- 使用Log4Net完成异常日志处理
1.在MVC的Modal文件夹建一个异常处理过滤器 public class MyExceptionAttribute:HandleErrorAttribute { public static Que ...
- each(callback) 对于每个匹配的元素所要执行的函数
以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一 ...
- 使用Netty收发二进制报文问题记
1.java二进制编解码 byteBuffer.flip() byteBuffer.getInt() 与 byteBuf.getInt(11) 2.粘包拆包问题 LengthFieldBasedFra ...
- linux 循环处理文件夹下所有文件脚本
#!/bin/bashfunction ergodic(){ for file in ` ls $1 ` do if [ -d $1"/"$file ] then ergodic ...
- GZFramwork快速开发框架演练之会员系统(四)添加商品管理
1.1:创建表结构 新建三张商品关联的表,表模型如下: 创建SQL语句略 1.2:生成表Model(生成方法见上一节) 1.3:生成tb_ProductType的单结构界面然后添加到项目中 1.4:修 ...
- 8 个必备的PHP功能开发
做过PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PHP功能,个个都非常实用,希望各位PHP开发者能够掌握. ...
- Selenium Web 自动化 - 项目实战（三）
Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解 3.1 解析新增页面目录 3.2 解析新增测试用例目录 3. ...