关于HTML中常用选择器

news2024/11/18 15:30:16

        一.五种基本选择器:

                1)*:匹配HTML中所有元素,一般用于除去内边距和外边距,其性能较差,不推荐使用;

                2)标签名(在JavaScript中也称节点):标签选择器。注意在用标签修改样式时,所有具有该标签名的内容都会被修饰;

                3)ID选择器:注意ID有且只有一个,在标签内#+名称;

                4)类选择器:用来选择class名的选择器,可有多个;

                5)派生选择器:根据上下文来确定标签,A选择器+空格+B选择器

                 *让多个选择器具有相同样式:A选择器+‘,’+B选择器+‘,’+C选择器

        二.其它特殊选择器:

                一)元素选择器:

                        1.空格:后代选择器(div标签中包含p标签,则div p选中的就是div下的p标签);

                        2.>:只选择子元素,孙子元素不选择(div中包含p标签,而p标签又包含span标签,则div>p选中的就是div下的p标签,这时也会继承);

                        3.+:兄弟选择器,一个元素紧跟下一个元素且二者有相同的父元素时可使用兄弟选择器(兄弟选择器只使后者的样式改变,真不如叫小弟选择器),有四个兄弟,老大+老二+老三+老四,这时老二和老三和老四的样式会改变,而老大不会;

     

注:如果是li+li+li时浏览器会寻找前两个是li的标签然后改变第三个li。

        三.伪类选择器:一般作用与超链接上

                1)a:active:超链接跳转时展现的样式;

                2)a:visited:超链接访问过后的样式;

                3)a:hover:超链接悬停时的样式;

                4)a:link:超链接访问前的样式;

                5)input:focus:一般用于输入框获得焦点时的样式;

                 6)子元素伪类选择器::first-child(选择父元素的第一个子元素的元素)/:last-child(选择父元素的最后一个子元素的元素)/:nth-child(n)(这里的n可以是数值也可以是odd/even等特殊数)

        四、 属性选择器:

                1.[属性名]:包含有指定属性名的元素(常用);

                2.[属性名=值]:属性名的值为指定值的元素;

                3.[属性名~=值]:属性名的值包含指定值的元素;

                4.[属性名^=值]:属性名的值以指定值开头的元素;

                5.[属性名$=值]:属性名的值以指定值的结尾的元素;

                

 

                

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

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

相关文章

如何创建一个Servlet项目(Maven)?

系列文章目录 Tomcat下载、安装及使用介绍_crazy_xieyi的博客-CSDN博客 文章目录 前言一、创建Servlet项目(Maven)的步骤 1.创建Maven项目2.引入依赖3.创建目录4.编写代码5.打包程序6.部署程序7.验证程序二、总结(使用smart tomcat插件来打包…

微信小程序开发前端基础知识

文章目录一、简介1、是什么2、为什么二、准备工作1、环境准备1.1、注册账号1.2、获取APPID1.3、开发工具2、创建微信小程序三、组件1、目录及其作用介绍2、页面操作3、view 块级元素4、<navigator>导航跳转5、scroll-view滚动6、text 行标签7、swiper 轮播8、常用表单组件…

Vue语法与标签的使用

前言&#xff1a;最近两周一直在忙于公司业务的学习&#xff0c;一直没有时间进行总结&#xff0c;作为后端开发人员来说&#xff0c;需要了解一些前端的知识&#xff0c;因此今天把最近复习的Vue的知识总结了一下&#xff0c;希望能加深总结的印象以及帮助到各位大佬。 如果有…

React 入门(超详细)

目录前言&#xff1a;一、React 简介1. 什么是 React2. React 的特点3. React 高效的原因4. React 官网5. React的主要原理6. Facebook为什么要建造React?二、React 的基本使用1. 基础代码2. 效果3. 相关 js 库4. 创建虚拟DOM的两种方式5. 虚拟DOM与真实DOM6. 虚拟DOM与真实DO…

Chrome谷歌浏览器安装与配置教程

谷歌浏览器&#xff0c;界面简洁明了、浏览速度相当快&#xff0c;浏览器中的霸主地位 1、在电脑浏览器中打开下载地址https://www.google.cn/chrome/或百度www.baidu.com搜索“chrome”&#xff0c;打开谷歌官方网站 2、进入官网后单击“下载Chrome” 如果下载之后找不到&a…

vue基于element实现动态表格

前言 大家都知道 element 表格组件的表头是静态写死的&#xff0c;我们在渲染数据时只需要将接口返回的数组动态绑定给 data 属性&#xff0c;然后再通过 prop 去对应字段项即可&#xff1b;但是静态的表头并不能满足一些特殊的使用场景&#xff0c;所以我们需要将它变成活的&a…

从0到1构建springboot web应用镜像并使用容器部署

文章目录一、生成镜像的两种方法1.1、使用commit生成镜像1.1.1、拉取Centos基础镜像1.1.2、启动Centos容器并安装Go1.1.3、commit生成新镜像1.1.4、使用新镜像验证Golang环境1.2、使用Dockerfile生成镜像二、基于Dockerfile生成一个springboot镜像2.1、准备springboot应用jar包…

Vue父子组件传值

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、Vue父子传值的方法二、方法详解1.props / $emit2.$parent / children3.$ref总结前言 例如&#xff1a;Vue的学习是路阻且艰的&#xff0c;这是一个系列文章…

微信小程序 | 人脸识别的最终解决方案

&#x1f4cc;个人主页&#xff1a;个人主页 ​&#x1f9c0; 推荐专栏&#xff1a;小程序开发成神之路 --(这是一个为想要入门和进阶小程序开发专门开启的精品专栏&#xff01;从个人到商业的全套开发教程&#xff0c;实打实的干货分享&#xff0c;确定不来看看&#xff1f; &…

Cookie 和 Session的区别

文章目录时间&#xff1a;2023年3月23日第一&#xff1a;什么是 Cookie 和 Session ?什么是 Cookie什么是 Session第二&#xff1a;Cookie 和 Session 有什么不同&#xff1f;第三&#xff1a;为什么需要 Cookie 和 Session&#xff0c;他们有什么关联&#xff1f;第四&#x…

【Java基础】一个Java文件可以有多个类(外部类、内部类)

目录一、在一个Java文件中定义多个类&#xff08;外部类&#xff09;1.问题描述及解答2.总结二、在一个Java文件定义多个类&#xff08;内部类&#xff09;1.成员内部类和匿名内部类1.1 成员内部类1.2 匿名内部类2.深入理解内部类3.内部类的使用场景和好处一、在一个Java文件中…

小米商城官网(登录页,首页,详情页,我的购物车页,我的订单页,确认订单页)HTML+CSS+JS

文章目录前言一、登录页二、首页三、我的购物车页四、我的订单页五、确认订单页六、详情页七、整体结构和效果图总结前言 仿小米商城官网项目是本人实训内容&#xff0c;实训老师带着做的首页和登录页&#xff0c;本人在此基础上加入了我的购物车页&#xff0c;我的订单页&…

vue兼容ie11(@babel/polyfill、core-js@3两种方式)

Babel介绍&#xff1a; Babel是一个JavaScript编译器&#xff0c;主要用于将ECMAScript 2015代码转换为当前和旧浏览器或环境中向后兼容的JavaScript版本。要是通过核心依赖core-js2&#xff0c;主要是通过核心依赖core-js2来完成对应浏览器不支持的新的全局和实例api的添加 …

Vue2 实现图片的拖拽、缩放、旋转

本文是基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。 效果图 分步骤实现 在这里看下 拖拽、旋转、缩放的几个方法 1.获取图片的实际宽高 getImgSize(url) {return new Promise((resolve, reject) > {let imgObj new Image();imgObj.src url;imgObj.onload…

插槽(slot)的基本使用

插槽&#xff08;slot&#xff09;的基本使用 一、插槽的作用 在开发中&#xff0c;我们会经常封装一个个可复用的组件&#xff1a; 前面我们会通过props传递给组件一些数据&#xff0c;让组件来进行展示&#xff1b; 但是为了让这个组件具备更强的通用性&#xff0c;我们不能…

Ubuntu搭建web站点并发布公网访问【内网穿透】

文章目录前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名前言 网&#xff1a;我们通常说的是互联网&#xff1b;站…

Vue3中使用vant(踩坑日记....)

我照着视频中老师教的方式去使用vant(和官网教程一样)&#xff0c;发现样式根本不起作用&#xff08;想截个图来着&#xff0c;但是vite热更新太厉害了&#xff0c;找不到了哈哈哈&#xff09;&#xff0c;然后又反复看了视频一遍&#xff0c;检查自己插件啥的而又没有安装好&a…

【TypeScript基础】TypeScript之常用类型(上)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章大概了解了一下TypeScript&#xff0c;&#x1f449;&#x1f3fb;详细内容请阅读【TypeScript介绍】一文带你初步了解TypeScript 今天开始学习学习Type…

html实现用户注册页面(生日实现年月日的三级联动)

注册页面 期待效果如下&#xff1a; 初始代码实现&#xff1a; <!DOCTYPE html> <html> <head><title>注册页面</title> </head> <body> <!-- 表单&#xff0c;用于提交按钮&#xff0c;隐式提交 --> <form action"…

后台管理系统 - 页面布局设计

前端的中后台管理系统相比于其他普通项目&#xff0c;从开发设计的角度来说有几点比较特殊&#xff1a; 一个是权限设计&#xff0c;具体实现可参考&#xff1a;传送门。一个是页面布局的设计&#xff0c;也是本文要说的。一个好的页面布局设计&#xff0c;无论是对于页面结构…