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

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

    展开全文
  • TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...
  • CSS伪类伪元素

    万次阅读 多人点赞 2019-03-11 16:47:00
    css引入伪伪元素概念是为了格式化文档树以外的信息。也就是说,伪伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的...

    为什么要引入伪类与伪元素?

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。

    什么是伪类,伪元素?

    • 伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
    • 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。实际上,伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的,但它本身是基于元素的抽象,并不存在于文档结构中。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。

    伪类的分类:状态伪类和结构性伪类

    • 状态伪类:是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。

           常见的状态伪类主要包括:

    1.   :link 应用于未被访问过的链接;    
    2.   :hover 应用于鼠标悬停到的元素;
    3.   :active 应用于被激活的元素;
    4.   :visited 应用于被访问过的链接,与:link互斥。
    5.   :focus 应用于拥有键盘输入焦点的元素。
    • 结构性伪类:是css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。

           常见的结构性伪类包括:

    1.   :first-child 选择某个元素的第一个子元素;  
    2.   :last-child 选择某个元素的最后一个子元素;
    3.   :nth-child() 选择某个元素的一个或多个特定的子元素;
    4.   :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
    5.   :nth-of-type() 选择指定的元素;
    6.   :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
    7.   :first-of-type 选择一个上级元素下的第一个同类子元素;
    8.   :last-of-type 选择一个上级元素的最后一个同类子元素;
    9.   :only-child 选择的元素是它的父元素的唯一一个子元素;
    10.   :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
    11.   :empty 选择的元素里面没有任何内容。
    12.   :checked匹配被选中的input元素,这个input元素包括radio和checkbox。
    13.   :default匹配默认选中的元素,例如:提交按钮总是表单的默认按钮。
    14.   :disabled匹配禁用的表单元素。
    15.   :enabled匹配没有设置disabled属性的表单元素。
    16.   :valid匹配条件验证正确的表单元素。

    常见的伪元素选择器:

    1.   ::first-letter 选择元素文本的第一个字(母)。
    2.   ::first-line 选择元素文本的第一行。
    3.   ::before 在元素内容的最前面添加新内容。
    4.   ::after 在元素内容的最后面添加新内容。
    5.   ::selection匹配用户被用户选中或者处于高亮状态的部分
    6.   ::placeholder匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效

    注意:你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。

    所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

    伪元素的应用:

    • 清除浮动:如果父元素的所有子元素都是浮动的,父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度,因为after就是其最后一个子元素。

        代码如下:

    .clear::after {
        content: '';
        display: block;
        clear: both;
    }
    • 画分割线:画一条如下的分割线

      

       代码如下:

    <style>
        * {
          padding: 0;
          margin: 0;
        }
        .spliter::before, .spliter::after {
          content: '';
          display: inline-block;
          border-top: 1px solid black;
          width: 200px;
          margin: 5px;
        }
      </style>
    </head>
    <body>
      <p class="spliter">分割线</p>
    </body>
    • 计数器:使用CSS实现计数器,用到的属性有
    1.  counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0。
    2.  counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
    3.  content: 插入生成内容。

         代码如下:

    <style>
        .chooses {
          counter-reset: letters;
        }
        .chooses input:checked {
          counter-increment: letters;
        }
    
        .choose span::after {
          content: counter(letters);
        }
      </style>
    </head>
    <body>
      <div class="chooses">
        <input type="checkbox">a
        <input type="checkbox">b
        <input type="checkbox">c
        <input type="checkbox">d
        <input type="checkbox">e
        <input type="checkbox">f
        <input type="checkbox">g
        <input type="checkbox">h
        <input type="checkbox">i
        <input type="checkbox">j
      </div>
      <p class="choose">我选择了<span></span>个字母</p>
    </body>

      效果如下:

      

     

     

     

    展开全文
  • 原生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在控制器中一个方法可跳视图也可跳方法问题解决

    展开全文
  • :active — CSS :active 伪类,适用于一个元素被激活时的样式 语法: :active CSS版本:CSS1 说明: 适用于一个元素被激活时的样式,例如鼠标在此元素的区域内按下但还没有释放时 客户端(浏览器)可以根据用户与其...
  • 无论是伪还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。
  • 下面小编就为大家带来一篇利用CSS伪元素创建带三角形的提示框的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css伪元素实现下划线

    2021-03-18 15:02:29
    css伪元素实现下划线效果,用一个border-bottom+伪元素实现双重下划线效果 效果图: 实现代码: .titleT{ position: relative; font-size: 28px; width: 112px; height: 44px; line-height: 40px; text...

    前言:

           css伪元素实现下划线效果,用一个border-bottom+伪元素实现双重下划线效果

    效果图:

    实现代码:

    .titleT{
          position: relative;
          font-size: 28px;
          width: 112px;
          height: 44px;
          line-height: 40px;
          text-align: center;
          border-bottom:2px solid #5A8BFF; //第一层下划线
          margin:63px auto 40px;
        }
        .titleT:after {//伪元素实现第二层
          content: " ";
          position: absolute;
          left: 0;
          bottom: -9px;
          width: 100%;
          height: 1px;
          border-top: 1px solid #5A8BFF;
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }

     

    展开全文
  • 之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素; .cactive:after{ content: " "; ...
  • 本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素在元素之前添加内容;after 伪元素在元素之后添加内容;有需要了解的朋友可以参考一下
  • JavaScript伪类元素 来源博客:【Harryの心阁】 伪类元素 是行内元素,直接设置宽和高是没有反应的,使用相对定位absolute或者给伪类元素加display:block/inline-block 才能设置宽高 要注意content中如果设置图片...
  • 有很多人会有疑问?为什么要用伪元素,再...说到伪伪元素,区别有以下: 最根本的区别是是否有有新的元素生成,伪元素创建了新的元素,而伪并没有生成新的元素;可以为同一个元素添加不同的伪效果,但一次
  • CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变。 使用伪元素去控制(以:hover为例),...
  • css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 就是 操作class 样式 利用伪元素清除浮动 ps 利用伪 元素插入的dom 在dom结构中是看不到的 不过可以在css 中看到 .clearfix::after { ...
  • 关于两者的区别,其实是很古老的问题.这里着重写的是为什么这两者不同,以及一些平时容易错过的细节,需要的朋友可以参考下
  • 浅谈CSS伪类伪元素

    2021-01-19 20:56:09
    伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素,如被点击的链接、...
  • css 伪类元素清除浮动

    2017-03-23 06:17:51
    ``` .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } .clearfloat{zoom:1} ``` 求解释一下,每行的意义。尤其是这三个display:block;...
  • CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪种类 伪元素种类 区别 这里用伪...
  • CSS伪类伪元素选择器,如超链接的a:link、a:visited、a:hover等等,本文整理了一些,喜欢的朋友可以收藏下
  • CSS伪类实现的鼠标滑动链接,是一个图片导航,在早期的DW中有专一制作本效果的插件,不过随着大家CSS水平的提高,现在做出这种效果好像得心应手了,因为这种果大家应该都挺喜欢的。
  • 给链接定义样式 ...a:visited 表示已经访问的链接 a:hover 表示鼠标划入的链接 ...注意上面这四个链接的伪在使用的时候要有一定的顺序,即上面列举的顺序,...更多伪伪元素 :before 可以在指定元素的前面添加内容。比
  • css伪元素实现下划线0.5px

    千次阅读 2020-05-29 11:54:09
    <div class="example">...css .example:after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-top: 1px solid #e1e1e1; -web
  • CSS伪类

    2020-12-09 02:55:49
    W3C:“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义(CSS1 还是 CSS2)。 伪类 作用 IE F N W3C :active 将样式添加到被激活的元素 4 1 8 1 :focus 将样式添加到被选中的元素 – – – 2 :hover 当...
  • 在网页的制作过程中,经常会遇到需要给元素添加边框的情况,比如在ul中,如图所示 此时假如要给
  • :before 选择器在被选元素的内容前面插入内容。 其中的属性: content属性来指定要插入的内容。 W3School示例: p:before { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,869
精华内容 38,347
关键字:

css伪类元素