伪类和伪元素的使用方法介绍

伪类和伪元素的使用方法介绍

css伪类伪元素

line-height (行高 官方定义:两行文字基线对齐 )

(视频教程推荐:css视频教程)

目标伪类

:link    (a:link 未访问的链接  浏览器有缓存!!所以刷新没用)a:active{color:   ;}:active (长按住):visited (已经访问的链接):hover (鼠标放上去):focus (获取用户焦点)

伪元素 (是行内元素 不能设置宽度和高度 )

::after  (在元素后面添加内容)::before  (在元素前面添加内容)display:...inline-block(能够设置高度,和行内元素并排显示)inlineblock(独占一行)none(隐藏

css特性

继承(一个元素如果没有设置某个属性的值,那么就会跟随父属性的值。如果设置了,就用自己的值)color ,font-size  line-height text-align层叠(后面的样式会覆盖前面的样式)当选择器相同时 后面的选择器会覆盖前面的当选择器不同时,根据选择器的权重设置

列表

ul(无序列表)ol   (有序列表)

表格

tabletr单元行td单元格boder 边框cellpadding   单元格内部的间距cellspacing 单元格之间的距离width 表格的宽度align 表格的水平对齐方式

css元素类型的划分(根据元素能不能在一行显示)

块级元素 (独占父元素的一行) 常用的块级元素 ●div●p●h1-h6●ul--li●table●from

行内级元素(可以和其他行内元素同一行显示)

●img●span●a●inupt

相关推荐:CSS教程

以上就是伪类和伪元素的使用方法介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615902.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:08:03
下一篇 2025年12月24日 05:08:14

相关推荐

  • css中伪类和伪元素有什么区别

    一、定义区别 (推荐教程:css快速入门) 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如 :visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:…

    2025年12月24日
    000
  • css中的伪元素有什么作用

    伪元素可以用来添加一些选择器的特殊效果。 (推荐教程:css快速入门) 语法: selector:pseudo-element {property:value;} 举例: 1、”first-line” 伪元素用于向文本的首行设置特殊样式。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日
    000
  • 伪元素“::after”和“::before”的作用分别是什么

    :before 和 :after 这两个伪元素,是在css2.1里新出现的。 (推荐教程:css快速入门) 起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,单冒号表示伪类,伪元素的语法被修改成使用双冒号,成为::before ::after。伪元素并不存在与dom中,只…

    2025年12月24日
    000
  • css3新增伪类有哪些

    css3新增伪类有:1、【p:first-of-type】;2、【p:last-of-type】;3、【p:only-of-type】;4、【p:only-child】;5、【p:nth-child(2)】。 (推荐教程:css快速入门) CSS3新增伪类有那些? p:first-of-type 选…

    2025年12月24日
    000
  • 10个 你可能不熟悉的 css伪类 及其用例介绍

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

    2025年12月24日 好文分享
    000
  • css如何使用伪元素清除浮动

    什么是bfc? 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。 先记住一个原则:  如果一个元素具有BFC,那么内部元…

    2025年12月24日
    000
  • 如何改变css伪元素的样式

    本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一、CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 selector…

    2025年12月24日
    000
  • css如何使用伪元素

    css伪元素是什么?css伪元素用来干啥?相信很多人都想听说过css伪元素,但是不知道是干什么的,下面我们来讲述一下css如何使用伪元素? css伪元素是什么? css中的伪元素就是对某个选择器的文字添加一些特殊的样式,伪元素并不是真正的元素,只是和其他元素没有什么太大的差别,也不存在文档中,例如代…

    2025年12月24日
    000
  • CSS中伪元素before和after怎么使用

    如何使用css中伪元素before和after?本篇文章就来给大家分享关于css中伪元素before和after的使用方法。 ::before和::after是什么? before和after的描述如下 元素::before {content:插入的内容;}元素::after {content:插入…

    2025年12月24日
    000
  • css3的:out-of-range和:in-range伪类有什么用?(代码示例)

    本篇文章给大家带来的内容是介绍css3的:out-of-range和:in-range伪类有什么用?(代码示例),让大家了解:out-of-range伪类和:in-range伪类的作用和使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 css3 :in-range伪类 :i…

    2025年12月24日
    000
  • css中伪类与伪元素如何使用

    伪类可以通过link,hover等方法给选择器添加特殊效果,伪元素通过:first-line添加首行样式,:first-letter添加首字母样,以下将详细介绍这两方面的内容 伪类 它是选择html文档的某些部分的方式,表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态,原则上不属于htm…

    2025年12月24日 好文分享
    000
  • ::before有什么作用?::before与:before的区别是什么?

    ::before是什么?有什么作用?本篇文章就给大家::before有什么用,让大家了解::before的简单使用,以及::before与:before的异同点。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 一、::before是什么?有什么作用? 在css中,::before …

    2025年12月24日
    000
  • ::before如何使用?使用::before绘制几何图形(代码示例)

    ::before如何使用?本篇文章就给大家详细介绍一下css伪元素::before的使用,通过示例代码让大家了解::before是如何绘制一个几何图形的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们要了解::before伪元素通常会和content属性一起使用,使用::…

    2025年12月24日
    000
  • css如何设置超链接样式?css设置超链接样式的方法(代码示例)

    在前端网站的开发中,超链接是一个重要的组成部分,而好看的超链接样式可以为前端页面加分。那么如何来设置超链接样式?本篇文章就给大家简单介绍一下css设置超链接样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看初始的超链接在浏览器上的样式: 是不是觉得不好看,字…

    2025年12月24日
    000
  • css中伪类和伪元素有什么区别?:before和::before的区别

    本篇文章给大家带来的内容是介绍css中伪类和伪元素有什么区别?:before和::before的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:acti…

    好文分享 2025年12月24日
    000
  • css如何实现首字下沉效果?伪元素+浮动实现效果(代码实例)

    在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少。那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素+浮动实现首字下沉效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在css中…

    2025年12月24日 好文分享
    000
  • css如何使用特定属性选择器lang?使用介绍(详解)

    css 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。本章就给大家介绍css特定属性选择器lang的使用方法(详解)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css :lang选择器定义用法介绍 lang 向带有指定 lang 属性开始的元素添加样式。…

    2025年12月24日
    000
  • css中什么是伪类选择器?伪类选择器的简要介绍

    本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍。让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。(相关推荐:《css教程》) 一、伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元…

    2025年12月24日
    000
  • 什么是浮动以及浮动的清除方法

    本章给大家介绍什么是浮动以及浮动的清除方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、浮动 说浮动就必须提及一下文档流,html当中的元素按照从左到右,从上到下的顺序进行排列称之为文档流,也就是正常排列。 而浮动是什么呢?浮动会让元素脱离文档流,假如A元素浮动了,原本排在该…

    2025年12月24日 好文分享
    000
  • css如何分辨伪类和伪元素?伪类和伪元素的各自的区别与用法(代码实例)

    在我们学习前端开发的时候,有时总会把css中的伪类和伪元素混淆在一起。那么,在css中什么是伪类?什么又是伪元素?它们有什么区别,又是怎么使用的?本章我们就给大家好好聊聊css中的伪类和伪元素,介绍css中的伪类和伪元素的区别和基本用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信