首页 > 其他分享 >css伪类和伪元素

css伪类和伪元素

时间:2023-10-12 10:36:10浏览次数:48  
标签:元素 伪类 after content 选择器 css before

一、伪类说明

  定义:伪类⽤于向某些选择器添加特殊的效果

  超链接(a标签)伪类:a标签我们在日常工作和学习中用的很多,我们只知道默认状态下为蓝色,但是a标签其实有四种状态。

    1、未访问前为蓝色(如果a标签使用不是蓝色而是紫色,那么近期访问过该网站,需要去浏览器删除近期记录)   a:link 

    2、鼠标按着不松手时为红色  a:active

    3、访问后为紫色          a:visited

    4、鼠标移入变化      a:hover

二、元素获取

  定义:伪元素不是真正的元素,不存在与⽂档之中,所以 js ⽆法对它进行操作。为什么叫他“元素”?因为我们可以对其进⾏跟元素⼏乎⽆差别的操作

  语法:    选择器:nth-child(){}

  

三、伪元素

  定义:CSS伪元素是⽤来添加⼀些选择器的特殊效果。最好使⽤双冒号,防⽌与伪类混淆

  1、fist-letter 首字母设置样式

  

  2、其他伪元素选择器:

    ::first-line 首行

    ::first-letter 首字母

    ::before 元素前插入

    ::after 元素后插入

  3、before 和 after

    根据英文单词的理解,before在什么什么之前、after在什么什么之后

    before定位的基准是其主元素的右上⻆,after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作,属性为行内元素,若需要设置⾼宽度等属性需要首先设置为块元素

    content是伪元素必需的属性。若伪元素没有内容,需赋值为空格:content:' ';before与after的主要⽤途是对元素默认样式的的美化:美化时需要结合定位于内容。⼀般讲主元素设置为position:relative,伪元素设置为position:absolute,以⽅便对伪元素定位

<style>
        p::after{
            content: '456';
            color: red;
            font-size: 30px;
        }
        p::before{
            content: '123';
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
     <p>韩罪非后非没俭罪用就罪的活后憾孔派不,几说才设次德韩奔词韦联穿家词答中小,魂新雷听自的之是韩而。</p>
</body>

    

     

 

标签:元素,伪类,after,content,选择器,css,before
From: https://www.cnblogs.com/ljygzyblog/p/weilei.html

相关文章

  • 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素
    704.二分查找链接:https://leetcode.cn/problems/binary-search/description/思路:关键是定义清楚区间边界,想清楚middle在计算中是否可能取到左边界or右边界。若采用闭区间,则middle可能等于左/右边界值。27.移除元素链接:https://leetcode.cn/problems/remove-element/思路:暴......
  • 代码随想录算法训练营第一天(python) | 704. 二分查找、27. 移除元素。
    Leetcode704二分查找题目链接:704二分查找关键点思路:1、是否要进入到while部分的代码是left<=right还是left<right,看[left,right]是否是合法区间.例如[1,1]是合法区间,取<=;[1,1)非合法区间,取<。2、缩小区间时,考虑边界是否已经比较过。左闭右闭区......
  • 使用HTML和CSS做出心形图案
    今天我们要做一个心形图案,闲来无事可以尝试做一些其他图案。也可以用来逗心爱的女孩开心。例如:先看步骤先给正方形上方和右方两侧做两个圆圆的做法就是border-radius:50%,就是圆形了最后给他们翻转45°下面是整体代码,大家想尝试直接复制到自己代码中<!DOCTYPEhtml><htmllang="en......
  • python列表中的元素按照自身某个索引的元素排序
    title:aliases:-python列表按元素排序tags:-Python/数据处理category:stars:url:creation-time:2023-07-3115:26modification-time:#!/usr/bin/python#-*-coding:UTF-8-*-#获取列表的第二个元素deftakeSecond(elem):returnelem[1]#列表r......
  • 记录--纯CSS实现骚气红丝带
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在本文中,我们将探讨如何使用CSS以最少的代码创造出精美的CSS丝带形状,并最终实现下面这个效果:下面我们使用html和css来实现这个效果。我们使用内容自适应方式布局,不用担心里面的文字长度。本文介绍两种丝带:左......
  • 开局就集成tailwindcss(一)
    1.使用cli创建项目npmcreatevite@latest项目名--templatereact-ts 2.因为css功底偏弱,所以必须也是完全有必要的,在这里必须集成一下tailwindcss,npminstalltailwindcssautoprefixerpostcss-cli#额外的安装2个配套的插件#autoprefixer自动添加样式的前缀,很......
  • CSS 多行文本超链接下划线动效
    先看效果乍一看,是不是感觉很简单,仔细一瞅发现事情好像没有那么简单。如果十分钟还没想出怎么实现,那就把简历上的“精通css”改成“了解css”……......
  • 父元素flex:1 子元素height:100%
    <style>.box{display:flex;flex-direction:column;overflow:hidden;//只要不是auto}.parent{flex:1;min-height:0;//orheight:0}.children{......
  • 为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?
    为什么CSSflex布局中没有justify-items和justify-self?为什么在CSSflex布局中存在align-items和align-self,却没有justify-items和justify-self呢?要解答这个问题,首先需要理解主轴(mainaxis)和交叉轴(crossaxis)之间的差异。1.主轴和交叉轴的区别在没有折行的情况......
  • 使用jquery的html()判断Table元素为空时的bug
    在使用jquery的html()函数判断接点为空时从服务器端取数据,不为空时则不再取数据,这样减少与服务器的交互。使用元素<divid="test"></div>使用if(!$("#test").html())判断没有问题使用<tableid="test"></table>时出现问题,判断时总不为空,用alert($("#t......