CSS3 之选择器

news2024/10/6 18:28:34

文章目录

      • 1、关系性选择器:E+FE~F
      • 2、属性选择器
      • 3、伪元素选择器
      • 4、伪类选择器(被选中的元素的一个种状态)
      • calc

1、关系性选择器:E+FE~F

在这里插入图片描述

2、属性选择器

E[attr~=“val”]E[attr|=“val”]E[attr^=“val”]E[attr$=“val”]E[attr*=“val”]

在这里插入图片描述

3、伪元素选择器

E::placeholderE::selection
Div:nth-of-type(1)::selection{只能写三个属性color/background-color/text-shadow}

4、伪类选择器(被选中的元素的一个种状态)

在这里插入图片描述

eg:li:not(:last-of-type){
eg:li:not(:last-of-type){
 order-bottom:1pxsolidblack;
}
E:root===html

在这里插入图片描述

  • E:target

在这里插入图片描述

//eg:
<ahref="#box1"></a>
<ahref="#box2"></a>
<divclass="box1"></div>
<divclass="box2"></div>

css:div:target{
	border:1pxsolidblack;
}

  • E:first-childE:last-child

在这里插入图片描述

  • E:only-child
    E:nth-child(n)/even:偶数odd:奇数/
    /*n--->n是自然数,从0开始查数css从1开始查数*/

在这里插入图片描述

  • E:nth-last-child(n)

在这里插入图片描述

  • E:first-of-type

在这里插入图片描述

  • E:last-of-type

在这里插入图片描述

  • E:only-of-type
    在这里插入图片描述

  • E:nth-of-type(n)
    在这里插入图片描述

  • E:nth-of-last-type(n)

在这里插入图片描述

  • E:empty

在这里插入图片描述

  • E:checked
    在这里插入图片描述
E:enabled		Input:enabled{}  //示能用的样式
E:disabled		Input:disabled{}		//表示不能用的样式
E:read-only    //表示只能选中,不改
E:read-write        //可读可写

calc

条件

1. Position:absolute;

2.  减号两边要有空格

水平居中:left:calc(50%-50px)
垂直居中:top:calc(50%-50px)

div{
width:100px;
height:100px;
border:1pxsolidgray;
position:absolute;
left:calc(50%-50px);
top:calc(50%-50px); 
border-radius:10px20px30px40px;                                                2
}

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

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

相关文章

CesiumLab对BIM模型的输入格式要求 CesiumaLab系列教程

BIM 模型和手工模型最大的区别在于几点&#xff1a; 1.建模目标不同&#xff0c;手工模型的目的是为了可视化&#xff0c;就是为了看的见&#xff0c;看不见的东西能省则省。BIM 完全是按照一些工程标准去创建的&#xff0c;比如路面可能有多个层代表了不同的物理层。手工模型…

windows编译Paraview源码

目录一. 环境准备二. 编译1. CMake2. Visual Studio一. 环境准备 下载基本所需&#xff1a; paraview官方给了编译文档&#xff1a;https://github.com/Kitware/ParaView/blob/master/Documentation/dev/build.md 所需要的基础有&#xff1a; 如图&#xff1a;&#xff08;进入…

2022我的年度总结-- AI遮天之路

我是一个普普通通的大学生&#xff0c;我的博客记录了我学习编程以来共计1年多的水平&#xff0c;我希望能把自己大学的经历、选择、困惑等与同样身处大学&#xff0c;选择AI方向不知如何发展的人进行分享&#xff0c;因此写了这篇年终总结。另外&#xff0c;对于一些刚刚开始写…

重磅!华为更新职业认证架构刷新和重认证规则

尊敬的各位朋友&#xff0c;感谢您一直以来对华为认证的支持&#xff01; 为匹配华为公司未来长期战略&#xff0c;紧随ICT技术演进趋势&#xff0c;自2023年1月1日起&#xff0c;华为职业认证将启用全新的架构体系和重认证规则&#xff0c;请您关注。 华为职业认证架构刷新 …

新年新希望--爱摸鱼的美工(12)

年近了&#xff0c;上班途中依然匆忙 看女孩子们渐渐开始倒腾 做了新发型&#xff0c;做了美美的指甲 换上了新衣服&#xff0c;买了新包 电话里讨论着 去哪里过年&#xff0c;买什么年货 好像以前的我也这样 今年挣得少了&#xff0c;不想添新衣&#xff08;不能&#xff09; …

【条理清晰】在 Windows 上安装 MySQL

下载 MySQL 安装程序安装 MySQL 数据库安装示例数据库下载 MySQL 安装程序 在本教程中&#xff0c;我们展示如何在 Windows 平台上下载和安装 MySQL 的详细步骤。 在 Windows 平台上安装 MySQL 很简单&#xff0c;并不需要太复杂的步骤。按照本文的步骤操练起来就可以了。 我…

一体化Ethercat通信伺服电机在汇川H5U PLC上的应用案例介绍(下)

内容介绍了一体化低压伺服Ethercat通信的电机在汇川H5UPLC上的使用&#xff0c;一体化Ethercat通信伺服电机在汇川H5U PLC上的应用案例介绍(上)主要讲解环境的搭建以及使用AutoShop软件的在线调试功能&#xff0c;简单控制电机位置、速度模式运行。那么本篇我们就来讲解下使用汇…

【Kotlin】空安全 ② ( 手动空安全管理 | 空安全调用操作符 ? | let 函数结合空安全调用操作符使用 )

文章目录一、手动空安全管理二、空安全调用操作符 ?三、let 函数结合空安全调用操作符使用一、手动空安全管理 Kotlin 语言中 , 变量类型 分为 可空类型 和 非空类型 , 默认状态 下 , 变量是 非空类型 的 , 如果使用 类型? 将变量声明为 可空类型 , 那么就需要使用 手动安…

【C语言进阶】动态内存管理

1. 为什么存在动态内存分配我们已经掌握的内存开辟方式有&#xff1a;int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟10个字节的连续空间但是上述的开辟空间的方式有两个特点&#xff1a;1. 空间开辟大小是固定的。2. 数组在申明的时候&#xff0c;…

JavaWeb复习

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

【迅为iMX6Q】开发板 u-boot 2022.04 SD卡 启动

相关参考 【迅为iMX6Q】开发板 u-boot 2015.04 SD卡 启动 【迅为iMX6Q】开发板 u-boot 2020.04 SD卡 启动 开发环境 win10 64位VMware Workstation Pro 16ubuntu 22.04【迅为imx6q】开发板&#xff0c; 2G DDR uboot-imx 下载 使用 NXP 官方提供的 uboot-imx&#xff0c;代…

TreeList-关闭默认显示的右击菜单

需要给控件添加自定义的右击菜单&#xff0c;所以就造成了冲突&#xff0c;导致右击时只弹出控件自带的菜单而没弹出我自定义的菜单&#xff0c;现在把关闭默认菜单的方法记录一下

数据库,计算机网络、操作系统刷题笔记27

数据库&#xff0c;计算机网络、操作系统刷题笔记27 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle…

解决在Win10上安装VMware Workstation虚拟机不可用

一、说明 这是近几年安装虚拟机存在的问题&#xff0c;这里首先说明&#xff0c;以下信息纯粹来自VMware的参考文档&#xff0c;本人的实现不太成功&#xff0c;期望得到更好的WMware软件进行尝试。 二、错误提示 在 Windows 10 主机上&#xff0c;VMware Workstation 中显示“…

2023/1/7 Vue学习笔记-3-组件的理解

1 对组件的理解 模块与组件、模块化与组件化&#xff1a; 1.模块&#xff1a; &#xff08;1&#xff09;理解&#xff1a;向外提供特定功能的js程序&#xff0c;一般就是一个js文件 &#xff08;2&#xff09;为什么&#xff1a;js文件很多很复杂 &#xff08;3&#xff09;作…

【Linux工具】-vim介绍

Vim使用一&#xff0c;Vim的四种模式二&#xff0c;命令模式1,复制&#xff0c;剪切&#xff0c;粘贴2&#xff0c;撤销操作3&#xff0c;光标的移动4&#xff0c;替换&#xff0c;选中&#xff0c;删除5&#xff0c;h j k l键的使用6&#xff0c;多行注释&#xff0c;去多行注…

2023-01-07:hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中,yaml如何写?

2023-01-07&#xff1a;hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中&#xff0c;yaml如何写&#xff1f; 答案2023-01-07&#xff1a; yaml如下&#xff1a; apiVersion: apps/v1 kind: Deployment metadata:labels:app: docker-registry-webna…

实验二十五 VRRP配置

实验二十五 VRRP配置虚拟路由冗余协议VRRP(Virtual Router R edundancy Protocol)通过把几台路由设备联合组成一 台虚拟的路由设备&#xff0c;将虚拟路由设备的IP 地址作为用户的默认网关实现与外部网络通信。当网关设 备发生故障时&#xff0c;VRRP机制能够选举新的网关设备承…

HTML与CSS基础(三)—— CSS基础之基础选择器、字体文本相关样式

一、基础认知目标&#xff1a;理解 CSS 的作用&#xff0c;了解 CSS 语法规则&#xff0c;知道 CSS 的引入方式及其区别1. CSS的介绍CSS&#xff1a;层叠样式表&#xff08;Cascading style sheets&#xff09; CSS作用&#xff1a;• 给页面中的HTML标签设置样式结构&#xff…

Chrome浏览器读取蓝牙设备数据

蓝牙协议已经发展到5.3版本了&#xff0c;应用蓝牙的设备也越来越多&#xff0c;特别是随着传感器和智能硬件时代的到来&#xff0c;现在除了常见的蓝牙耳机还有一大批设备应用蓝牙进行通信&#xff0c;例如手环、手表、温度计、体重秤。蓝牙协议的数据读写我一直很头疼&#x…