首页 > 其他分享 >CSS 学习第三天 (伪·类选择器)

CSS 学习第三天 (伪·类选择器)

时间:2024-04-01 18:33:58浏览次数:26  
标签:伪类 元素 第三天 选中 child type 选择器 CSS

#   概念

什么是伪类?  —— 很像类,但不是类,是元素的特殊状态的一种描述


# 动态伪类

 # 常用的伪类选择器:

  1.  :link   超链接 未被访问 的状态
  2.  :visited  超链接 访问过 的状态
  3.  :hover  鼠标 悬停 在元素上的状态
  4.  :active  元素 激活 (按住左键不松开)的状态
  5.  :focus  获取焦点 的元素

注意:

  1. 遵循 LVHA 的顺序:link 、visited、hover、active
  2. 表单类元素才能使用 focus 伪类 。点击、触摸或通过键盘等方式选择元素,就是获取焦点。


 # 结构伪类

  1.   :first-child  所用兄弟元素中的第一个。
  2.   :last-child  所有兄弟元素中的最后一个。
  3.   :nth-child(n)  所有兄弟元素中的第n个。
  4.   :first-of-type  所有同类型兄弟元素中的第一个。
  5.   :last-of-type  所有同类型兄弟元素中的最后一个。
  6.   :nth-of-type(n)  所有同类型兄弟元素中的第n个。

关于n的值:

  1.   0或不写(什么都不选中)
  2.   n(选中所有子元素)
  3.   1~正无穷的整数(选中对应序号的子元素)
  4.    2n 或 even  (选中序号为偶数的子元素)
  5.   2n+1 或 odd  (选中序号为奇数的子元素)
  6.   -n+b  (选中的是前b个)

# 否定伪类

: not (选择器)   :排除(选择器)内的元素,其他全选


# UI伪类

  1.  : checked        被选中的复选框或单选按钮
  2.  : enable           可用的表单元素
  3.  : disabled         不可用的表单元素


#目标伪类

: target          选中锚点指向的元素

标签:伪类,元素,第三天,选中,child,type,选择器,CSS
From: https://blog.csdn.net/qq_43300604/article/details/136765526

相关文章

  • CSS3制作图片样式
    问题:如果在img上直接使用CSS3的border-radius和box-shadow应用在图片,浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法,就是把图片作为背景图片,这样我们就可以应用任何样式来修饰图片,而且此时浏览器也会完美的呈现出来。解决方法:要让浏览器能正常渲......
  • CSS 如何实现羽化效果
    羽化是photoshop术语,羽化原理是令选区内外衔接部分虚化,起到渐变的作用从而达到自然衔接的效果,是ps及其其它版本中的处理图片的重要工具。一、羽化的原理羽化其实就是将边缘变得模糊,在CSS中其实就是创建一个边缘模糊的遮罩(mask),也就是需要一种半透明的渐变。关于遮罩,这里简单介......
  • css样式重置
    @charset"utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,......
  • 前端学习<二>CSS基础——15-Sass入门
    Sass简介大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量、不可以引用等等。面对这些问题,我们现在来引入Sass,简单的说,他是css的升级版,可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的Sass。Sas......
  • 前端学习<二>CSS基础——14-CSS3属性详解:Web字体
    前言开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。支持程度比较好,甚至IE低版本的浏览器也能支持。字体的常见格式不同浏览器所支持的字体格式是不一样的,我......
  • CSS继承性-行高的继承性
    CSS中行高的继承性是CSS继承特性中的一个具体表现。简单来说,如果一个元素(父元素)设置了行高(line-height),那么它的子元素会继承这个行高值,除非子元素本身也设置了行高。行高的继承性有助于保持文本在父子元素之间的一致性和可读性。例如,如果父元素的行高设置为1.5(这通常是相对于......
  • Cursor:你的前端“超能力”助手,一句话搞定HTML、CSS、JS!
    一、简介Cursor,不仅仅是一个开发工具,更是你前端路上的“超级英雄”!它融合了GPT-4的AI智慧,能听懂你的“心声”,一键将你的创意转化为神奇的HTML、CSS和JavaScript代码。告别繁琐的编码工作,让Cursor成为你创意的翅膀,带你飞翔在前端的世界!链接:Cursor官网二、功能亮点1、一......
  • (1)基础项目之二选一选择器
    这个项目是b站视频第三个视频,是一个非常基础的项目,主要学习vivado以及开发板的使用。vivado创建工程不再赘述,值得注意的是板子的型号选择xc7a35tfgg484-2,其中2为速度等级,如下图所示:  FPGA的开发流程如下: VIVADOIDE的各个部分的功能如下:  下面......
  • 一些超级好用的CSS 属性
    1、fit-content盒子大小自适应内容案例:比如有时候我们需要根据给定的文本来调整盒子的宽度,这时候使用固定的宽度就很难调整,CSS提供的width:fit-content;2、透明色透明色的RGB值是(0,0,0,0),其中第四个参数表示透明度,取值范围是0到1。透明度为0表示完全透明,透明度为1表......
  • 18day-19day-2.2.CSS实战与提高
    2.2.CSS实战与提高练习11:制作开心餐厅页面CSS/*层次选择器*/p{font-size:14px;}/*body后代h2字体16px*/bodyh2{font-size:16px;}/*第一个h2颜色变为红色*/.firstH2{color:red;}/*第一个h2后面的通用兄弟元素h2变为蓝色*/.firstH2~h2{......