CSS样式详解之伪类元素及CSS3选择器

目录

  • 一、伪类元素
  • 二、CSS3选择器
    • 1. 相邻选择器(+)
    • 2. 兄弟选择器(~)
    • 3. 指定选择器(nth-of-type(n))
    • 4. 子元素指定选择器(子元素匹配选择器)
    • 5. 属性选择器
      • ① [ 属性名 ]
      • ② [ 属性名=属性值 ]
      • ③ [ 属性名~=属性值 ]
      • ④ [ 属性名^=属性值 ]
      • ⑤ [ 属性名$=属性值 ]
      • ⑥ [ 属性名*=属性值 ]
    • 6.高亮选择(::selection)
    • 7. 非内容选择器
    • 8. 启禁用选择器(enabled disabled)
    • 9. Query选择器

一、伪类元素

emsp;emsp;在CSS中,hoveractive等是CSS中最常用也是最基础的伪类操作,除伪类操作之外,还有伪类元素(before,after),当我们使用伪类元素的时候,需要同时在CSS样式中使用contentcontent中的内容是一个行内元素(文本状态),不支持设置宽高,当我们对带伪类元素的进行操作的时候,可以通过对该样式添加一个float:left,就可以对该样式的宽高进行操作了。

.fs{width:200px;height:200px;background:red;margin-top:200px;margin-left:200px;position:relative;
}
.fs:before{width:100px;height:100px;background:green;float:left;position:absolute;left:0%;
}

emsp;emsp;当我们对带有伪类元素的样式添加position的时候,如果对其left等进行操作,此时该样式的父级是body,所以当我们对带有伪类元素的样式进行操作的时候,需要对他的父级元素添加position:relative;
emsp;emsp;带after和带before两个伪类元素的样式使用基本上是一致的,只不过一个在前一个在后。带伪类元素的样式不是一个真的元素,只是对主元素的一个附属。

二、CSS3选择器

1. 相邻选择器(+)

emsp;emsp;在CSS3中,相邻选择器是一个“+”,当我们需要使用的时候,只需要将已知的元素后面加上“+”以及元素名称即可。相邻选择器只会选择同级元素的后面的第一个元素。

//ex:
style{.fs{color:red;}  .fs+li{color:blue;}}
body{    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>}

emsp;emsp;相邻选择器只能向后选择,不能向前选择。但是相邻选择器可以叠加使用

.fs+li+li+li{color:green;
}
.fs+li+.sky>span{color:white;}

2. 兄弟选择器(~)

emsp;emsp; 兄弟选择器使用和相邻选择器类似,都只会选择其同级的后面元素,只不过兄弟选择器会选择其后面的所有元素。
emsp;emsp; 兄弟选择器用“~”来进行表示。

.fs{color:red;}
.fs~li{color:blue;}
.fs~div{color:green;}

3. 指定选择器(nth-of-type(n))

emsp;emsp; 指定选择器通过用nth-of-type()来选择父元素下面的第几个子元素,第一个子元素为1而不是0。
emsp;emsp; n也可以是odd(单数)和even(双数)。
emsp;emsp; 同时我们还可以自己定义规则,如3n,此时是3倍数的子元素会被选中。后面的符号只支持加减。

特殊:nth-last-of-type(n)
emsp;emsp;nth-last-of-type(n)是从后往前进行寻找。方法和nth-of-type()相同。

4. 子元素指定选择器(子元素匹配选择器)

emsp;emsp;子元素指定选择器使用nth-child(n)来进行表示,第一个元素用1表示,而不是0。
emsp;emsp;原理:根据我们所选元素去寻找它的父级,然后再在这个父级的子元素中寻找我们需要的第几个元素。
当有其他类型元素是我们所选定的数值位置的元素,则不起作用。
emsp;emsp;兄弟用法:nth-last-child。

5. 属性选择器

① [ 属性名 ]

emsp;emsp;当使用这种方法的时候,只要包含这个属性名的元素都会被选中。

<style>
div[fs]{color:red;
}
</style>

② [ 属性名=属性值 ]

emsp;emsp;当使用这种方法的时候,必须属性名和属性值完全一致才会被选中。

③ [ 属性名~=属性值 ]

emsp;emsp;当使用这个方法的时候,只要属性名中包含这个属性值即可被选中。

④ [ 属性名^=属性值 ]

emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于第一位,则会被选中。

⑤ [ 属性名$=属性值 ]

emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于最后一位,则会被选中。

⑥ [ 属性名*=属性值 ]

emsp;emsp;当使用这种方法的时候,只要属性名中包含的属性值中,包含该属性,哪怕是在其他属性值内,都会被选中,但是如果之间有空格则不行。

6.高亮选择(::selection)

emsp;emsp;高亮选择是制作个性化页面中常用的操作,用::selection表示。
emsp;emsp;可以设定四个样式:背景、字体颜色、鼠标选中状态、轮廓属性。

.fs::selection{background:red;color:green;cursor:pointer;outline:#00FF00 dotted thick;
}

7. 非内容选择器

emsp;emsp;该选择器用于删除已经选择到的元素。
使用方法:
emsp;emsp;元素名称:not(属性值,属性值)
注:如果是自定义属性需要使用 [ 属性名=属性值 ]这种方法选择。

div:not(.sky,.busy,[blue='1111]);

8. 启禁用选择器(enabled disabled)

emsp;emsp;启禁用选择器用enabled和disabled进行表示,一个元素默认为enabled,当我们对元素设定为disabled的时候,则不能选择。

   fs:enabled{   }fs:disabled{   }//可以通过这种方式找到对应的元素   只对表单等有作用

9. Query选择器

emsp;emsp; Query选择器分为唯一选择器和群组选择器。
唯一选择器:
父级.querySelector(‘选择器名称’)

document.querySelector('div[blue='kkk]');
document.querySelector('div').innerHtml='abcd;

群组选择器:
父级.querySelectorAll(’ 选择器名称 ');

document.querySelectorAll('div,input,span');
document.querySelector('div')[0].innerHtml='abcd;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581863.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是MLOps?

人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;应用激动人心的发展浪潮也许会让人相信&#xff0c;企业交付ML产品的能力也在迅速提高。但现实情况是&#xff0c;ML内部流程很难跟上行业的整体发展……但若以MLOps的形式则有希望解决此问题&#xff…

面试复盘5——后端开发——一面

前言 本文主要用于个人复盘学习&#xff0c;因此为保障公平&#xff0c;所以本文不指出公司名&#xff0c;题目编号只是为了自己区别而已。对待面经&#xff0c;望读者还是更多从其中学习总结&#xff0c;而不是去碰原题。 面试岗位信息 后端开发秋招&#xff0c;上海某大中…

08.Kubernetes node 节点部署

Kubernetes node节点部署比较繁琐,需要配置一堆的配置文件和证书,手动配置特别容易出错。 这就体现出用脚本部署的优势,将繁琐的操作批量自动化 一是极大的提升效率(尤其是节点比较多的时候)二是确保所有节点配置的统一性(配置统一很重要,因为正常情况下,如果某个节点出…

一文让你读懂Python中的Response对象

目录 引言 一、Response对象简介 二、Response对象的组成 三、Response对象的创建 1、使用内置的http.client模块&#xff1a; 2、使用requests库&#xff1a; 3、使用Django框架&#xff1a; 四、Response对象的处理 1、发送给客户端&#xff1a; 2、设置响应头&…

centos 编译安装 libxml-2.0

centos 编译安装 libxml-2.0 下载地址 我下载的 libxml2-2.9.12.tar.gz 版本 下载后解压&#xff0c;进入解压后的目录 执行&#xff1a; ./configure make && make install安装过程中出现 <Pyghon.h> 找不到的问题&#xff0c;指定了路径之后还是找不到&…

来看看这个技术,这才是UPS监控的最好方式!

在现代社会中&#xff0c;信息技术的持续发展使得机房UPS监控变得至关重要。机房是企业信息系统的核心&#xff0c;UPS监控系统能够确保在电力故障或其他问题发生时&#xff0c;机房设备能够持续稳定运行&#xff0c;从而保障数据的安全性和可用性。 客户案例 金融机构 河北某…

2660. 保龄球游戏的获胜者 --力扣 --JAVA

题目 给你两个下标从 0 开始的整数数组 player1 和 player2 &#xff0c;分别表示玩家 1 和玩家 2 击中的瓶数。 保龄球比赛由 n 轮组成&#xff0c;每轮的瓶数恰好为 10 。 假设玩家在第 i 轮中击中 xi 个瓶子。玩家第 i 轮的价值为&#xff1a; 如果玩家在该轮的前两轮的任何…

fork函数详解【Linux】

fork函数详解【Linux】 fork函数的概念fork调用后的底层细节解释fork学习中的一些笔记和问题fork的写实拷贝深拷贝的策略 fork调用失败的原因 fork函数的概念 调用fork函数可以在已存在的进程中创建一个子进程&#xff0c;此时&#xff0c;新进程叫做子进程&#xff0c;原进程叫…

SpringBoot当中的Singleton和Prototype详解

在Spring Boot中&#xff0c;Singleton和Prototype是两种Bean的作用域。这两种作用域决定了Spring容器如何创建和管理Bean的实例。 Singleton&#xff08;单例&#xff09;&#xff1a; 当一个Bean被配置为Singleton作用域时&#xff0c;Spring容器在启动时只会创建该Bean的一个…

Spring Boot 入参校验及全局异常处理

版本依赖 JDK 17 Spring Boot 3.2.0 源码地址&#xff1a;Gitee Spring Boot validation spring-boot-starter-validation是基于hibernate-validator的实现&#xff0c;在Spring Boot项目中直接导入spring-boot-starter-validation即可。 Valid 和 Validated 的区别 适用范围…

《对话品牌》——活到老“养”到老

本期节目《对话品牌》栏目组邀请到了深圳壹常青健康管理有限公司董事长邬锡娣女士参加栏目录制&#xff0c;分享其企业故事&#xff0c;树立品牌形象&#xff0c;提升品牌价值&#xff01; 节目嘉宾&#xff1a;邬锡娣女士 节目主持人&#xff1a;董倩 节目播出平台&#xf…

在线教育系统源码解读:定制化企业培训APP的开发策略

当下&#xff0c;企业培训正经历着一场数字化的迭代&#xff0c;定制化企业培训APP应运而生&#xff0c;成为提升员工技能、推动企业发展的重要工具。下文小编将与大家一同深入了解在线教育系统的源码&#xff0c;探讨开发定制化企业培训APP的策略&#xff0c;以满足不同企业的…

C#获取windows系统资源使用情况

1.前言 之前有一篇博客介绍如何获取Linux服务器上的资源使用情况《Java 获取服务器资源&#xff08;内存、负载、磁盘容量&#xff09;》&#xff0c;这里介绍如何通过C#获取Window系统的资源使用。 2.获取服务器资源 2.1.内存 [DllImport("kernel32.dll")][retu…

jenkins解决工具找不到的问题

--------------------------插件选择版本最好能跟服务器对上

香橙派5plus从ssd启动Ubuntu

官方接口图 我实际会用到的就几个接口&#xff0c;背面的话就一个M.2固态的位置&#xff1a; 其中WIFI模块的接口应该也可以插2230的固态&#xff0c;不过是pcie2.0的速度&#xff0c;背面的接口则是pcie3.0*4的速度&#xff0c;差距还是挺大的。 开始安装系统 准备工作 一张…

常用入门算法

一&#xff1a;快慢指针 适合原地调换一个数组的元素们的位置&#xff0c;使用for循环&#xff0c;声明两个下标&#xff0c;一个移的快&#xff0c;一个移的慢。 快的指针用来往前走&#xff0c;慢的用来停在目标数据上。典型的案例&#xff1a;283. 移动零 1、给定一个数组…

C语言中关于switch语句的理解

首先我们来看一下switch的定义 switch&#xff08;整型表达式&#xff09; { case 整型常量表达式: 语句&#xff1b; } 我们在书写时要注意一下&#xff0c;无论是在switch还是case&#xff0c;后面跟着的都一定要是整型&#xff0c;而且case这一行写完时&#xff0c;最后要用…

图片放大后变模糊了怎么办?这个方法惊艳你

我们需要了解为什么图片放大会模糊。在照片放大时&#xff0c;像素也会随之增加。如果图片的像素不足&#xff0c;那么放大后每个像素的大小也会增加&#xff0c;从而导致细节模糊。 那么&#xff0c;面对这个问题&#xff0c;我们该如何解决呢&#xff1f;别急&#xff0c;让…

MySQL 数据页损坏处理思路

文章目录 前言1. 备份恢复2. 强制 InnoDB 恢复2.1 损坏数据页2.2 观察错误日志2.3 设置参数2.4 定位表信息2.5 分析处理2.6 恢复数据 总结 前言 研发自己搭建了一套 MySQL 没有设置双一参数&#xff0c;机房异常断电&#xff0c;导致数据页出现损坏&#xff0c;本篇文章介绍此…

狗笼,预计2028年将以 6.2%的复合年增长率增长

对于想要为爱犬提供安全舒适空间的宠物主人来说&#xff0c;狗笼是必不可少的宠物配件。由于宠物主人的数量不断增加以及人们对宠物安全和福祉的意识不断增强&#xff0c;狗笼市场一直在稳步增长。 全球市场分析&#xff1a;全球狗笼市场预计从 2021 年到 2028 年将以 6.2% 的复…