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. tomcat参数调优

    在做java开发时尤其是大型软件开发时经常会遇到内存溢出的问题,比如说OutOfMemoryError等.这是个让开发人员很痛苦.也很纠结的问题,因为我们有时不知道什么样的操作导致了这种问题的发生.所 ...

  2. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  3. 请手动释放你的资源(Please release resources manually)

    作者: Laruence(   ) 本文地址: http://www.laruence.com/2012/07/25/2662.html 转载请注明出处 我从来不认为这个问题是个问题, 直到昨天. 昨 ...

  4. android-----带你一步一步优化ListView(一)

    ListView作为android中最常使用的控件,可以以条目的形式显示大量的数据,经常被用于显示最近联系人列表,对于每一个 Item,均要求adapter的getView方法返回一个View,因此L ...

  5. 【5分钟一个知识点】JS一文搞懂new操作符

    关于new操作符,看了两本书<Javascript高级程序设计3>和<你不知道的JS上>,以及其他文档后,终于豁然开朗. 现总结如下,希望同样懵逼的你,彻底理解它. 如果有不同 ...

  6. 升级 php composer 版本

    在执行 composer update 时,报错 You made a reference to a non-existent script @php artisan package:discover ...

  7. php中常用的正则表达式函数

    php中常用的正则表达式函数 * preg_match() * preg_match_all() * preg_replace() * preg_filter() * preg_grep() * pr ...

  8. pytest一:pytest 框架介绍

    pytest 是 python 的一种单元测试框架,与python 自带的 unittest测试框架类似,但是比 unittest 框架使用起来更简洁,效率更高.根据pytest 的官方网站介绍,它具 ...

  9. poj 1511 正向 反向 构两个图

    有向图 源点为1 求源点到其他各点的最短距离之和 再在其他点到源点的最短距离之和 再加起来 多源点一终点 只要反向构图就行了 Sample Input 2 //T2 2 //结点数 边数1 2 13 ...

  10. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...