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选择器之伪类选择器(伪元素)的更多相关文章

  1. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  3. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  4. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  5. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  6. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  7. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  8. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  9. CSS属性、伪类选择器,CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  10. js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

随机推荐

  1. RPC理解

    RPC,英文名称Remote Procedure Call Protocol,即远程过程通讯协议. 可以设想一种情况,有一个人,叫A,A想要翻开一本书,非常简单,让大脑控制自己两只手,轻易就可以看到书 ...

  2. Opencv --- 图像像素遍历的各种方法

    #include <opencv2/core.hpp> #include <opencv2/imgcodecs.hpp> #include <opencv2/highgu ...

  3. 贪吃蛇小游戏-----C语言实现

    1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...

  4. 54.Storm环境搭建

    集群环境搭建 关闭防火墙,修改/etc/hosts配置(3台机器的ip可以相互通信) 下载安装jdk7(1.6以上),配置JAVA_HOME, CLASSPATH 搭建Zookeeper集群(保证3台 ...

  5. Centos7下CPU内存等资源监控

    1.查看内存使用情况: [root@takeout web-takeout]# free -m total used free shared buff/cache available Mem: 378 ...

  6. spark 中如何查看单个RDD分区的内容(创建分区,查看分区数)

    spark 创建分区 val scores = Array(("Fred", 88), ("Fred", 95), ("Fred", 91) ...

  7. Android 开发工具类 28_sendGETRequest

    以 GET 方式上传数据,小于 2K,且安全性要求不高的情况下. package com.wangjialin.internet.userInformation.service; import jav ...

  8. 安装微软dynamics AX2012R3-AOS(含域服务器的安装)

    安装之前首先要确保硬盘可用量>60G,内存要在7G及以上,我是在Mac里装的虚拟机,分配了7G内存(我的电脑总共才8G),编译CIL内存占用到了98% 一.Server 2016新建域控服务器 ...

  9. Jfinal本地eclipse+tomcat运行项目时候遇到错误Exception starting filter

    今天想在本地eclipse上启动tomcat让项目在本地运行,但是老是报错类找不到异常. 也可能报其它错误,大概都是classNotFoundException. 九月 19, 2018 5:42:2 ...

  10. python hbase util

    from traceback import format_exc import phoenixdb as pb class Utils(object): def get_db_conn(self, u ...