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. js学习、备忘

    字符串使用单引号’abc’.(双引号也行.推荐:html→双引号,js→单引号)===严格等于.!==严格不等于if(x)  当x为undefined.null和0的时候都为false:需注意当x为0 ...

  2. AndroidStudio、gradle、buildToolsVersion关系

    使用AndroidStudio 开发也已经2年了,每次gradle 或者studio 有推荐更新后,项目重新sync后都会报错,提示更新相应的其他版本,比如AndroidStudio.gradle.b ...

  3. JavaScript 使用 mediaDevices API 选择摄像头

    大多数智能手机都有前置和后置摄像头,当你在创建视频应用时你可能想要选择或者切换前置.后置摄像头. 如果你开发的是一款聊天应用,你很可能会想调用前置摄像头,但如果你开发的是一款拍照软件,那么你会更倾向于 ...

  4. mac安装navicat mysql破解版

    下载破解中文版http://m6.pc6.com/xuh6/navicat12027pre.zip 完成下载后无法正常进行安装,此时应该打开命令行执行 sudo spctl --master-disa ...

  5. react之异步请求数据,render先行渲染报错,未拿到数据

    import React from 'react' import {connect} from 'react-redux' import { Redirect} from 'react-router- ...

  6. 温故而知新--JavaScript书摘(二)

    前言 毕业到入职腾讯已经差不多一年的时光了,接触了很多项目,也积累了很多实践经验,在处理问题的方式方法上有很大的提升.随着时间的增加,愈加发现基础知识的重要性,很多开发过程中遇到的问题都是由最基础的知 ...

  7. Lavarel - 模块间复用代码

    代码复用在项目中早晚会遇到,这不在用 Laravel 给博客增加 Feed 订阅功能 就到了需要将生成网页 description 的函数提取出来,在文章显示与 Feed 生成的两个 Controll ...

  8. poj2464扫描线好题,回头再做

    扫描线+区间更新 题解 /* st[i],ol[i]表示y坐标大于y[i]和小于y[i]的点 两颗线段树建立在y轴上,区间[l,r]ol线选在[l,r]时st的分数 每次查询完成后再更新一次 遍历每条 ...

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

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

  10. kettle的下载、安装和初步使用(windows平台下)(图文详解)

    kettle的下载 žKettle可以在http://kettle.pentaho.org/网站下载                   http://sourceforge.net/projects ...