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选择器的基础上新增了属 ...
随机推荐
- Fitnesse在eclipse中的调试
需要在Fitnesse的wik中添加: '''此句话专门用来Debug'''!define COMMAND_PATTERN {java -Xdebug -Xrunjdwp:transport=dt_s ...
- BJFU 1015
描述 数字具有神奇的魔力,神奇到ben想把所有数字全部保存起来.于是他设想了如下的保存方法.假设有一张无限大的纸板,将所有自然数(不包括0)按如下顺序排列书写在纸板上保存:1 2 6 7 15 1 ...
- SQL内联多个表
SQL多个表组合成一个表: strSql.Append(@"Select N.NotificationOptionId, S.FullName, No.Title, N.SortCode, ...
- Stylish: http://bbs.csdn.net/topics/
[id^=google_ads_], [id^=bd_ad_], #cpro_u2392825, [id^=BAIDU_SSP_], .bbs_top_ad, .csdn-toolbar, #topi ...
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
- 学习Linux系列--安装Ubuntu
最近学习Linux,使用虚拟机太不方便,于是购买了阿里云最便宜的云主机作为学习设备. 本系列文章记录了个人学习过程的点点滴滴. 学习Linux系列--安装Ubuntu 学习Linux系列--安装软件环 ...
- DOM，BOM
1.DOM:文档对象模型(Document Object Model) 1)子节点:只是这一代的后代,不会计算后代的后代 1.childNodes:获取子节点, --IE6-8:获取的是元素节 ...
- 备用帖子1Shell（Shell R语言）
shell========================== echo 1 > /proc/sys/vm/drop_caches 清理内存 free -m du -h --max-depth= ...
- PHP-----二维数组和二分查找
二维数组由行和列组成.由arr[$i][$j]表示,先后表示行和列,类似于坐标点. 打印二维数组-----通过两次遍历,第一次遍历每一行,第二次遍历每一行的具体元素,并且通过使用count($arr[ ...
- 从零开始CSS（一 2016/9/21）
1.基础语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通 ...