首页 > 其他分享 >伪类&伪元素

伪类&伪元素

时间:2023-07-26 17:34:33浏览次数:77  
标签:伪类 元素 选择 nth child input

伪类

同一个标签,根据用户的某种状态不同,有不同的样式。这就叫做“伪类,伪类分为UI伪类和结构化伪类。

UI伪类

CSS中已经定义好的选择器,不能随便取名

**:link ** 表示, 用户没有点击过这个链接的样式。 是英语“链接”的意思。
**:visited ** 表示, 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
**:hover ** 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示, 用户用鼠标点击这个链接,但是不松手,此刻的样式。 是英语“激活”的意思。

在css中,这四种状态必须按照固定的顺序写
a:link 、a:visited 、a:hover 、a:active

参考链接:
伪类 - Ren小白 - 博客园

结构化伪类

结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式

p:nth-child(n){background:red}  /*表示E父元素中的第n个字节点   第一个子元素的下标是1*/
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*其中n是从0开始计算*/

** 经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。**

所有 CSS 伪类

选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 input 元素。
:disabled input:disabled 选择每个被禁用的 input 元素。
:empty p:empty 选择没有子元素的每个

元素。

:enabled input:enabled 选择每个已启用的 input 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个

元素。

:first-of-type p:first-of-type 选择作为其父的首个

元素的每个

元素。

:focus input:focus 选择获得焦点的 input 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 input 元素。
:invalid input:invalid 选择所有具有无效值的 input 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 p 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 p 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 p 元素的每个 p 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 p 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 p 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个p元素,从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个p元素的每个p元素,从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 p 元素的每个 p 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 p 元素的每个 p 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 p 元素。
:optional input:optional 选择不带 "required" 属性的 input 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 input 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 input 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 input 元素。
:required input:required 选择指定了 "required" 属性的 input 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:valid input:valid 选择所有具有有效值的 input 元素。
:visited a:visited 选择所有已访问的链接。

伪元素

最常用的是::before和::after
::before或::after都必须和content属性结合使用,content不能没有,内容至少为空;伪元素的display默认为inline
它们负责在元素的前或后添加一些样式

标签:伪类,元素,选择,nth,child,input
From: https://www.cnblogs.com/wz0130/p/17583086.html

相关文章

  • css 伪元素
    CSS伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的JavaScript代码。 虽然许多开发人员都熟悉常用的伪元素,如::before和::after,但还有一些其他元素经常被忽视或未得到充分利用。 在本文中,我们将分享9个鲜为人知的CSS伪元素,它们可以增强您的......
  • css案例-after伪类元素的例子
    下位三角例子<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</tit......
  • python字典遍历时删除元素
    Python字典遍历时删除元素在Python编程中,字典(dictionary)是一种非常有用的数据类型。它以键值对(key-valuepair)的形式存储数据,其中每个键(key)都是唯一的。字典可以用于存储大量数据,并且可以根据键快速查找对应的值。然而,在对字典进行遍历的过程中,我们需要注意一些问题,尤其是在删除元......
  • 数组元素和与数字和的绝对差
    给你一个正整数数组nums。元素和是nums中的所有元素相加求和。数字和是 nums中每一个元素的每一数位(重复数位需多次求和)相加求和。返回元素和与数字和的绝对差。注意:两个整数x和y的绝对差定义为|x-y|。示例1:输入:nums=[1,15,6,3]输出:9解释:nums的......
  • 输出数组内每个元素的类型python
    输出数组内每个元素的类型PythonPython是一种简单而强大的编程语言,广泛用于数据处理和科学计算。在Python中,数组是一种重要的数据结构,它可以存储多个元素,并允许我们对这些元素进行操作。在本文中,我们将探讨如何输出数组内每个元素的类型,并提供相应的代码示例。什么是数组?在计算......
  • 翻转 实现数组元素倒序的方法
     在Java编程开发中,经常会遇到需要对数组进行操作的情况。其中一个常见的需求就是实现数组元素的倒序。本文将介绍一种简洁高效的方法来实现这个功能。在开始之前,我们需要先了解一下数组的基本概念。数组是一种容器,可以存储多个相同类型的数据。数组的元素可以通过索引来访问,索......
  • css3之:target伪类
    CSS3target伪类    -------用来匹配URI某一个标志符的目标元素。一般url中包含"#"字符,后面带有一个标志符号,如:"#top" 1、浏览器支持情况:      除了IE6-8,其他浏览器都支持。     http://caniuse.com/#search=%3Atarget  2、使用方式:   //类似于hov......
  • RPA界面元素定位与操控技术详解-达观数据
    RPA入门介绍什么是RPA?RPA是机器人流程自动化RoboticProcessAutomation的简写。在《智能RPA实战》中,我们这样定义:通过特定的、可模拟人类在计算机界面上进行操作的技术,按照规则自动执行相应的流程任务,代替或辅助人类完成相关的计算机操作。一句话总结就是:用软件机器人自动化......
  • selenium之get_attribute获取元素属性
    get_attribute获取元素属性的一些细节如:test1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>获取属性</title></head><body><inputtype="text"name="......
  • Angular: 点击一次按钮,增加一个元素
    解决方案思路在组件的typesscript文件中,创建一个数组来存储每个按钮的信息在模板中使用*ngFor指令来循环渲染按钮列表在按钮事件的处理函数中,每次点击按钮时向按钮数组添加一个新的按钮信息实例在组件的typescript代码中import{Component,OnInit}from'@angular/c......