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选择器的基础上新增了属 ...
随机推荐
- Java接口回调
public class A { private D d; private C c; public A (C c) { this.c = c; } public void setD (D d) { t ...
- PHP之十六个魔术方法详解
https://segmentfault.com/a/1190000007250604#articleHeader14
- 折纸问题java实现
/** * 折纸问题 这段代码写的太low了 本人水平有限 哎... 全是字符串了 * @param n * @return * @date 2016-10-7 * @author shaobn */ ...
- cmd运行sql server安装
cmd运行sql server安装 SQL2012非群集安装_更新到最新版本.bat setup.exe /UpdateSource=.\hotfix\Latest /ACTION="Ins ...
- 封装Js库从获取控件的value值开始
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- python脚本利用windows计划定时执行
- android消息处理机制之2handler与looper，MessageQueue：的关系
// Looper: 在UI主线程里面有默认有一个Looper对象来管理UI线程的各条消息,但是在自定义的实现Thread的消息循环和消息派发,缺省情况下Thread是没有这个消息循环的既没有Loop ...
- Codeforces 749D：Leaving Auction（set+二分）
http://codeforces.com/contest/749/problem/D 题意:有几个人在拍卖场竞价,一共有n次喊价,有q个询问,每一个询问有一个num,接下来num个人从这次拍卖中除去 ...
- C#写WPF程序，SQLSever2008 提示插入数据成功,却查询不到数据
1.提示存储成功,但是数据库中没有数据.今天在用C#写一个wpf程序时,要向数据库Sql server2008 中插入数据,程序提示成功,但打开数据库却没有值; 经过查询发现,数据存储到默认路径下的数 ...
- Spring中@Controller和@RestController之间的区别
1. Controller, RestController的共同点 都是用来表示Spring某个类的是否可以接收HTTP请求 2. Controller, RestController的不同点 @C ...