1.常用伪元素有 after、before,使用方法,如下

  a:after{

    display:block;

    content:'';

  }

2. content: "/\00a0";//表示斜杆

3. a标签的四个伪类:

link /* 未被访问的链接 */

visited  /* 已被访问的链接 */

hover /* 鼠标指针移动到链接上 */

active /* 正在被点击的链接 */----------------------可用于其他标签

4.伪元素有六个,分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。

二. 获取伪元素的属性值:

获取伪元素的属性值可以使用 window.getComputedStyle() 方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

语法:window.getComputedStyle(element,[ pseudoElement])

参数如下:

element(Object):伪元素的所在的DOM元素;

pseudoElement(String):伪元素类型。可选值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;

demo:

var beforeStyle = window.getComputedStyle(myIdElement, ":before");

常用伪元素及content属性值的使用的更多相关文章

  1. CSS魔法堂:一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  2. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  3. 使用js获取伪元素的content

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...

  4. Selenium_获取元素文本、属性值、尺寸(8)

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...

  5. CSS伪元素选择器和属性选择器

    伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter  首字母(只能用于块元素) :first-line  第一行 1.为p元素中的第一个字符设置颜色为黄色, ...

  6. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  7. html中的meta元素及viewport属性值

    <meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-sca ...

  8. jquery 获取被点击元素的id属性值

    有时候可能需要获取被点击元素的一些信息,此处就以id属性为例子,进行演示一下. $(document).click(function (e){ var v_id=e.target.id; consol ...

  9. image元素的src属性值与getAttribute('src')值

    采集的时候,当采集到一些不可用的照片就将其剔除掉 我的解决思路是new一个img对象, 然后将采集过来的图片赋值给这个img, 然后分别处理img的onerror和 onload, 当在onerror ...

随机推荐

  1. ajax异步请求302

    我们知道,只有请求成功ajax才会进行回调处理,具体状态码为 status >= 200 && status < 300 || status === 304; 这一点通过查 ...

  2. uoj#188. 【UR #13】Sanrd(Min_25筛)

    题面 传送门 题解 这是一道语文题 不难看出,题目所求即为\(l\)到\(r\)中每个数的次大质因子 我们考虑\(Min\_25\)筛的过程,设 \[S(n,j)=\sum_{i=1}^nsec_p( ...

  3. rabbitmq 源码安装

    官网地址:rabbitmqhttp://www.rabbitmq.com/releases/rabbitmq-server/官网地址:erlanghttp://erlang.org/download/ ...

  4. Android:ZoomControls控件

    ZoomControls控件 //_ZoomControls.java public class _ZoomControls extends Activity{ @Override protected ...

  5. MySQL 数据类型(转)

    MySQL 数据类型 在 MySQL 中,有三种主要的类型:文本.数字和日期/时间类型. Text 类型: 数据类型 描述 备注 CHAR(size) 保存固定长度的字符串(可包含字母.数字以及特殊字 ...

  6. SPLAY,LCT学习笔记(六)

    这应该暂时是个终结篇了... 最后在这里讨论LCT的一个常用操作:维护虚子树信息 这也是一个常用操作 下面我们看一下如何来维护 以下内容转自https://blog.csdn.net/neither_ ...

  7. python 全栈开发,Day128(创建二维码,扫码,创建玩具的基本属性)

    昨日内容回顾 1.app播放音乐 plus.audio.createPlayer(文件路径/URL) player.play() 播放音乐 player.pause() 暂停播放 player.res ...

  8. python 全栈开发,Day121(DButils,websocket)

    昨日内容回顾 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user") 3.m ...

  9. MVC开发中的常见错误-03-System.Data.Entity.Validation.DbEntityValidationException: 对一个或多个实体的验证失败。有关详细信息,请参见“EntityValidationErrors”属性。

    return Db.SaveChanges()>0; return CurrentDBSession.SaveChanges(); RoleInfoService.EditEntity(role ...

  10. 《转》 java.lang.OutOfMemoryError - 关于java的内存溢出

    java.lang.OutOfMemoryError: PermGen space PermGen space的全称是Permanent Generation space 是指内存的永久保存区域, 该 ...