精华内容
下载资源
问答
  • 写这篇文章的起因来自与毅博客的《美化段落文本 2》,在这篇文章的最后振之谈到了关于:first-letter这样的伪类元素的特点.
  • :active — CSS :active 伪类,适用于一个元素被激活时的样式 语法: :active CSS版本:CSS1 说明: 适用于一个元素被激活时的样式,例如鼠标在此元素的区域内按下但还没有释放时 客户端(浏览器)可以根据用户与其...
  • 原生js获取css伪类元素并设置属性

    千次阅读 2019-09-28 15:38:53
    原生js获取css伪类元素并设置属性

    需要解决的代码片

    <style type="text/css">
    	*{padding: 0;margin: 0;}
    	body{
    		display: flex;
    		width: 100vw;
    		height: 100vh;
    		background: #636e72;
    		justify-content: center;
    		align-items: center;
    	}
    
    	button{
    		width: 100px;
    		height: 40px;
    	}
    
    	button::after{
    		content: '';
    		width: 3px;
    		height: 3px;
    		display: inline-block;
    	}
    
    	@keyframes load{
    		30%{
    			box-shadow: 3px 0 0 currentColor;
    		}
    		60%{
    			box-shadow: 3px 0 0 currentColor,9px 0 0 currentColor;
    		}
    		90%{
    			box-shadow: 3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
    		}
    	}
    </style>
    
    <button>提交</button>
    

    我们需要在点击提交的时候给button::after加上load动效,这时候该怎么做呢?

    解决需求(设置或更改伪类的属性)

    <script type="text/javascript">
    	function loading() {
    		document.styleSheets[0].addRule('button::after','animation-name:load;animation-duration: 3s;animation-iteration-count: infinite;')
    	}
    </script>
    

    ok,这时候设置的属性就可使用了。

    获取伪类元素并取值(如果你只是单纯的取值,请看这里)

    <script type="text/javascript">
    	var buttonObj = document.querySelector('button')
    	var buttonAfterStyle = getComputedStyle(buttonObj,':after')
    	//第一种方法
    	alert('buttonAfterStyle.getPropertyValue("width") result: ' + buttonAfterStyle.getPropertyValue('width'))
    	//第二种方法
    	alert('buttonAfterStyle.width result: ' + buttonAfterStyle.width)
    </script>
    

    在这里插入图片描述
    在这里插入图片描述

    本博客其他文章推荐

    模仿一个球落地效果,最终停在地面上(仿真效果,CSS实现)

    让一个小球无限的弹弹弹~(CSS实现球无限弹动)

    如果有一屏幕的爱心,你愿意送给谁?(简单实现原生js、css随机生成521个心)

    maven新手上路–创建webapp项目,引入jstl、el依赖及el不解析的问题解决(详细图文)

    springmvc5.1.9在控制器中一个方法可跳视图也可跳方法问题解决

    展开全文
  • $(’’).appendTo(‘body’);
    展开全文
  • 惭愧,学了这么多年CSS,今天才知道原来所有的伪类元素都无法添加点击事件,因为伪类元素不是dom元素 记录一下~

    惭愧,学了这么多年CSS,今天才知道原来所有的伪类元素都无法添加点击事件,因为伪类元素不是dom元素 记录一下~

    展开全文
  • vue动态style、动态伪类元素

    千次阅读 2020-08-07 14:20:53
    vue动态style和动态伪类元素 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    vue动态style、动态伪类元素

    1. 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        /* 定义一个全局css变量 */
        :root {
            --txtColor: pink;
        }
    
        .test {
            /* 读取定义的--txtColor变量 */
            color: var(--txtColor);
        }
    
        /* 局部css变量 */
        .test2 {
            --txtColor2: blue;
        }
    
        .test2 p {
            color: var(--txtColor2);
        }
    
        /* 不起作用 */
        .test3 {
            color: var(--txtColor2);
        }
    </style>
    
    <body>
        <div class="test">
            hello word!!!
        </div>
    
        <div class="test2">
            <p> hello word!!! </p>
        </div>
    
        <div class="test3">
            hello word!!!
        </div>
    </body>
    
    </html>
    
    1. 根据css中变量使用方法,可以结合vue动态绑定,给元素添加一个局部css变量,对元素样式和伪类元素进行动态样式绑定
    <template>
      <div>
        <span :style="{ '--width': widthVar }" class="span2">hello word!!!</span>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          widthVar: '100px'
        }
      }
    }
    </script>
    <style scoped>
    .span2 {
      text-align: center;
      position: relative;
      width: var(--width);
    }
    .span2::after {
      content: '';
      display: block;
      position: absolute;
      left: 100%;
      width: var(--width);
      height: var(--width);
      border-radius: 50%;
      border: 1px solid pink;
    }
    </style>
    
    展开全文
  • vue 控制伪类元素的显示

    千次阅读 2020-06-10 17:51:04
    <view :class='switchBox===true?'list_cen border':'list_cen'"></view> .list_cen { padding-top: 31/100rem; width: 100%; position: relative; &.border::after { ... ..
  • 取消一个元素的最后一个伪类元素 .listItem{ width: 200px; height: 130px; float: left; position: relative; margin: 20px auto; } .listItem:before{ display: block; content: “”; position: absolute; width:...
  • jquery操作伪类元素

    千次阅读 2019-05-13 20:43:08
    通过添加或删除class类名,达到动态操作css伪类的效果 $('.items').on('hover','li',function(){ const currentIndex = $(this).data("index"); $(this).addClass('item_2X'); $(this).siblings().removeClass('i...
  • 伪类after、before如何使用阿里的iconfont字体 按照官方文档直接写16进制的字体代码是不能生效的,在content中使用unicode的== & #x33; == 这样的字体编码也是不能生效的。 那问题来了怎么办呢? 其实解决方法很...
  • CSS中a标签的伪类元素的使用

    千次阅读 2018-05-14 17:57:41
    a:link 链接未被点击时的状态a:visited 链接点击过后的状态a:hover 鼠标移动到链接上时的状态a:active 点击链接时的状态
  • JavaScript伪类元素 来源博客:【Harryの心阁】 伪类元素 是行内元素,直接设置宽和高是没有反应的,使用相对定位absolute或者给伪类元素加display:block/inline-block 才能设置宽高 要注意content中如果设置图片...
  • css 伪类元素清除浮动

    2017-03-23 06:17:51
    ``` .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } .clearfloat{zoom:1} ``` 求解释一下,每行的意义。尤其是这三个display:block;...
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2259691
  • 其实不然,使用伪类元素,一方面可以减少页面中的节点元素,加速页面渲染速度,另一方面可以为设计动画提供很多新思维,本文先介绍一些简单的伪类元素以及hover效果的实现: 说到伪类与伪元素,区别有以下: 最...
  • CSS伪类与伪元素

    千次阅读 多人点赞 2019-03-11 16:47:00
    为什么要引入伪类与伪元素? css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标...
  • 顾名思义,before,after是往...此外要注意这两个家伙默认是内联元素(也称行内元素)简单描述 用法: 文字` &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;
  • /常规清除伪类的浮动高度对齐问题/ .clearFix:before,.clearFix:after{ content: “”; display: table; } .clearFix:after{ clear: both; } .clearFix{ *zoom:1; }
  • 标签的四个伪类元素

    千次阅读 2018-04-04 10:59:13
    关于伪类,大家最熟悉的还是a标签的4个伪类::link 有链接属性时:visited 链接地址已被访问过:active 被用户激活(在鼠标点击与释放之间发生的事件):hover 其鼠标悬停关于这四个伪类的排列次序,很多地方都能查到...
  • 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号。 input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-...
  • 这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。CSS Code  ...
  • 项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。 HTML ”red”>Hi, this is a plain-old, sad-...
  • 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于 状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态...
  • 本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素元素之前添加内容;after 伪元素元素之后添加内容;有需要了解的朋友可以参考一下
  • .item::before{ content:url(./2.jpg); top:30px; left:30px; } 设置位置好像不起作用,咋整?
  • html伪类样式&伪类元素使用记录

    千次阅读 2019-08-27 23:37:37
    伪类样式就是配置dom事件发生后的样式 :link 设置链接未被访问样式 :visited 设置链接已被访问样式 :active 设置链接点击时到鼠标松开时样式 :focus 设置链接焦点在上时样式 :hover 设置鼠标悬浮样式 <style...
  • 1)平时和访问过的链接都没有下划线并且显示为黑色字,设计样式上让每行的偶数链接显示绿色字并且没有下划线。 2)鼠标移动到链接上方时链接文字显示下划线和蓝色字,点击(按下)链接时链接文字显示下划线并且变为红色...
  • 本篇文章主要介绍了用js实现before和after伪类的样式修改的示例代码,具有一定的参考价值,有兴趣的可以了解一下
  • 伪类选择器和伪元素

    千次阅读 2018-07-04 15:02:16
    伪类选择器什么是伪类伪类就是与类一样能够定义样式,但...浏览器会在后台向这些伪类增加和删除元素。对于&lt;a&gt;元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态::link, :visit...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 131,208
精华内容 52,483
关键字:

伪类元素