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选择器的基础上新增了属 ...
随机推荐
- JSP-10-JSTL标准标签库
JSTL (jsp 标准标签库) 包含用于编写和开发JSP页面的一组标准标签,它可为用户提供一个无脚本的环境. JSTL 提供了4个主要的标签库: 核心标签库.国际化(I18N)与格式化标签库.XML ...
- 开源.net 混淆器ConfuserEx介绍
今天给大家介绍一个开源.net混淆器——ConfuserEx http://yck1509.github.io/ConfuserEx/ 由于项目中要用到.net 混淆器,网上搜寻了很多款,比如Dotf ...
- Proteus 8 画原理图仿真 1602 LCD显示字符
以下是源程序: #include <reg52.h> #include<intrins.h> /** * P2 上接的是 D1 ~ D7 */ sbit RS = P3 ^ ; ...
- (6) 深入理解Java Class文件格式(五)
前情回顾 本专栏的前几篇博文, 对class文件中的常量池进行了详细的解释. 前文讲解了常量池中的7种数据项, 它们分别是: CONSTANT_Utf8_info CONSTANT_NameAndTy ...
- [SDN] mininet walkthrough
本次学习使用的是mininet的VM-image,所以安装过程就先忽略掉了,主要学习使用方法. 同时完成了在虚拟机上配置minient和Wireshark, 可以直接在虚拟机上操作. 1. Every ...
- 使用BigDecimal进行精确计算工具类
package com.develop.util; import java.math.BigDecimal; import java.math.RoundingMode; public class M ...
- URLClassLoader类
URLClassLoader类 1.URLClassLoader类也是ClassLoader类的实现类,它的功能非常强大,他可以从本地文件系统中获取二进制文本来加载类,也可以从远程主机获取二进制文件来 ...
- 用HttpSessionListener与HttpSessionBindingListener实现在线人数统计
在线人数统计方面的实现,最初我的想法是,管理session,如果session销毁了就减少,如果登陆用户了就新增一个,但是如果是用户非法退出,如:未注销,关闭浏览器等,这个用户的session是管理不 ...
- hibernate中设置BigDeCimal的精度
@Column(precision = 12, scale = 2) 在MySQL数据库中的精度为:
- 单据状态BE构建
这节主要罗列出单据状态BE构建步骤1.创建单据状态BE实体项目,修改命名空间 2.如下图所示,分别设置实体枚举状态值 3.修改单据基本属性 构造后,至此单据状态BE构建完毕