CSS选择器之伪类选择器(伪元素)
selection |
[CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。(IE8及以下不支持)(火狐-moz-selection) |
first-line |
选择每个 <p> 元素的首行,并为其设置样式。 |
first-letter |
选择每个 <p> 元素的首字母,并为其设置样式。 |
before |
在每个 <p> 元素的内容之前插入新内容。(IE7及以下不支持) |
after |
在每个 <p> 元素的内容之后插入新内容。(IE7及以下不支持) |
cue |
匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。 |
backdrop |
参见MDN相关介绍(nDos翻译)(兼容性很差不推荐使用) |
placeholder |
(兼容性很差不推荐使用) |
marker |
::marker伪元素 选择列表的前置标记,一般包含着重符号或数字。任何设置 display: list-item属性的元素或伪元素都能使用::marker 比如 <li> 和<summary> 元素。(兼容性很差不推荐使用) |
spelling-error |
表示浏览器标记为不正确拼写的文本段。(目前没有浏览器实现) |
grammar-error |
应用于浏览器标识为语法错误的文本段。(目前没有浏览器实现) |
与伪类一样, 伪元素添加到选择器,但不是描述特殊状态,它们允许您为元素的某些部分设置样式。有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:). 这是CSS3的一部分,并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。
若页面只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。
所有伪元素能实现的,真实子元素都可以做到。只不过有时候单纯是为了样式和布局就改变html结构,这样的做法不干净,不值得提倡,所以才有了伪元素的市场。我用伪元素绘制过打印机,拆开一半的信封等,也用它实现过非规整图片轮廓。不过这些真实子元素同样可以做到,只不过没有做到内容结构与样式分离而已。
注意:没法通过DOM操作直接操作伪元素。
1.1 各伪元素功能
first-line
::first-line CSS pseudo-element (CSS伪元素)在某 block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。
和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的html元素。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中,::first-line 是不起作用的。
只有部分CSS属性可以用于::first-line选择器:字体设置,背景设置,color,word-spacing, letter-spacing, text-decoration, text-transform, and line-height, text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align。
该伪元素不再举例说明。
first-lette
::first-letter会选中某 block-level element(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格) 。
元素首字符并不总是很容易识别:
1、首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号(Punctuation)包括在开(Ps),闭(Pe),初始引用(Pi),结束引用(Pf)当中定义的任何Unicode字符以及其他种类的标点符号(Po)。
2、另外还会有一些以大写双字母组合命名的语言,比如荷兰的 IJ。在这种罕见情况下,两个大写字母都理应被::first-letter 伪元素匹配到。(但是浏览器对此支持得很糟糕,可以用浏览器兼容性进行核实)。
3、::before伪元素和content属性结合起来有可能会在元素前面注入一些文本。如此::first-letter 将会匹配到content文本的首字母。
首行只在block-container box内部才有意义,因此::first-letter伪元素 只在display属性值为block,inline-block,table-cell,list-item或者table-caption的元素上才起作用。其他情况下,::first-letter则不起作用。
只有部分CSS可以在包含使用了::first-letter 伪元素选择器的CSS规则集声明块内运用:
所有的字体、背景、外边距、内边距和边框属性,color,text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (使用恰当的话), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align 注意此刻必须没有浮动) 等属性。
该伪元素不再举例说明。
before/after
::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。::after类似。
注意: 由::before 和::after 生成的伪元素 包含在元素格式框内, 因此能应用在可替换元素上, 比如<img>或<br> 元素。使用::before 和::after生成的伪元素的content不能够被选择。
参见下面这个示例:
HTML部分
<ul> <li>Buy milk</li> <li>Take the dog for a walk</li> <li>Exercise</li> <li>Write code</li> <li>Play music</li> <li>Relax</li> </ul> |
CSS部分
li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #CCFF99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } |
javascript部分
var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if( ev.target.tagName === 'LI') { ev.target.classList.toggle('done'); } }, false); |
下面展示的是最终得到的结果。请注意我们没有使用任何图标,对勾标识实际上是使用 CSS 定义了样式的 ::before 伪元素。接下来建立几个待办事项来完成它们吧。
selection
selection伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。
只有一小部分CSS属性可以用于::selection 选择器: color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是,background-image 会如同其他属性一样被忽略。
注意:::selection中的text-shadow属性仅有Chrome, Safari 和 Firefox 17+支持。::selection CSS伪元素选择器是CSS第3级选择器的草案,但是在被推荐使用前就被废弃。它现在在第4级伪元素选择器草案中。
如下列所示:
<!DOCTYPE html> <html lang="en"> <head> <style> ::-moz-selection { color: gold; background: red; } ::selection { color: gold; background: red; } p::-moz-selection { color: white; background: black; } p::selection { color: white; background: black; } </style> </head> <body> <div class="textarea" contenteditable="true"><br /></div> <div>提供::selection 伪元素选择器测试的文本</div> <p>也尝试选中在这个p标签中的文本</p> </body> </html> |
在页面中选择p和div标签的文本时,选中的文本将分别应用style中设置的样式。
placeholder
::placeholder可以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。
input { line-height: 2em; } ::placeholder { color: red; font-size: 1.5em; } <input placeholder="nDos"> |
该伪元素兼容性很差,不推荐使用。
CSS选择器之伪类选择器(伪元素)的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
随机推荐
- 初识PHP之php运行流程及原理(一)
初识PHP一.用脚本命令行运行php(1)打开cmd.exe(winkey+R)(2)找到php.exe(拖进cmd即可)(3)输入命令php.exe -f "文件实际路径"注:运 ...
- 转的很好的前端html 内容
HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...
- iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】
以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...
- CPU 分支预测
去年在安宁庄的时候, 有个同事阐述了一个观点:php中的if else 在执行时考虑到效率的原因,不会按我们的代码的顺序一条一条去试,而是随机找出一个分支,执行,如果不对,再随机找到一个分支 当时由 ...
- Ubuntu软件更新时出错问题解决
apt-get instal update 提示:错误,无法解析域名等等之类的 网上解决办法一大堆,先别急着用网上的方法,来检查检查系统是否有网络连接 网络图标显示网络连接,等等,别被表面迷惑了,命令 ...
- JavaScript函数理解
本文参考自简书javaScript之函数详解 这里从函数的构造函数开始. 在js中,函数都是对象,它们都是Function构造函数的实例.因此,类似Java中的对象,函数名可以理解为指向该Functi ...
- zabbix 调用python脚本监控 磁盘剩余空间(创建模版,创建监控项,创建触发器)
主要 记录一下 使用zabbix 自己创建模版.监控项.触发器,并调用python脚本. 需求: 监控备份机磁盘剩余空间(windows系统) 一.安装zabbix_agent 比较简单 修改配置文 ...
- celery在Django中的应用
这里不解释celery,如果不清楚可以参考下面链接: http://docs.celeryproject.org/en/latest/getting-started/introduction.html ...
- Sklearn-RandomForest
在scikit-learn中,RandomForest的分类类是RandomForestClassifier,回归类是RandomForestRegressor,需要调参的参数包括两部分,第一部分是B ...
- Centos 添加用户和用户组
groupadd cheat useradd -g cheat cheat passwd cheat 密码设置jsb_6041