css选择器以及优先级的问题

最新推荐文章于 2023-01-13 15:43:59 发布
最新推荐文章于 2023-01-13 15:43:59 发布
阅读量193 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 小白分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ajax_A/article/details/99761632
本文深入讲解CSS选择器的种类及应用，包括id选择器、类选择器、标签选择器等，同时介绍了伪类选择器和伪元素选择器的使用场景，如:hover、:before和:after，帮助读者掌握CSS样式的精准控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css选择器有那么几种
1.！important
2. 行间设置css样式
3. id选择器
4. 类选择器 ===属性选择器
5. 标签选择器在这里插入图片描述当多个选择器连用时，优先级也会叠加
说到css选择器，时常也会用到伪类选择器以及伪元素选择器
常见的伪元素选择器有：before(元素标签之前插入内容) ：after（元素标签之后插入内容） :first-letter（某个标签元素文字中的首个字符） :first-line（某个标签文字中的首行字符）
伪类选择器 就是css内置的css内部本身赋予的特性或者功能 不用添加类就可以添加样式
常见的伪类选择器 有
：nth-child-of :hover :link :visited :focus 等等

CSS的三个基本选择器
liupc的学习笔记
03-04 3500
css的选择器 要对哪一个标签里面的数据进行操作。哪一个标签就是选择器。 选择器分为基本选择器和扩展选择器。 基本选择器有三种：标签选择器、class选择器、id选择器。 一、标签选择器 定义：使用标签名作为选择器的名称。 例1： //标签选择器.html ...
说说CSS选择器以及这些选择器的优先级
jean_0920的博客
09-06 348
说说CSS选择器以及这些选择器的优先级 !important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/关系选择器/伪元素选择器（0001） 通配符选择器（0000） ...
说说CSS选择器的优先级
hfdxmz_3的博客
05-19 526
1.选择器的优先级 !important的优先级别最高 权重值为1111 用来提升某个直接选中标签的选择器中某个属性的优先级的，可以将被指定的属性的优先级提升为最高 第一等级：内联样式 如: style="", 权重值为1000 第二等级：ID选择器 如: #content, 权重值为0100 第三等级：类、伪类和属性选择器 如： .content, 权重值为0010 第四等级：类型选择器和伪元素选择器 如： div p, 权重值为0001 第五等级：通配符、子选择器、相邻选择器 如：*
CSS中各个选择器及其优先级
NEXT00的博客
01-13 696
关于CSS中的各个选择器及其优先级的讲解
css选择器及选择器的优先级
huangduoduo929的博客
08-10 512
选择器 1.标签、元素选择器：根据标签名称选择一类元素 2.id选择器：通过id属性选择一个元素 #（ID属性名）value属性值 3.类选择器：class .value（属性值） 3.普遍选择器：* 所有 4.后代选择器： > ：选择当前元素的子元素 （空格）：选择当前文件的所有后代元素，包括孙代元素 5.兄弟选择器： +：选择当前元素之后的一个兄弟元素 ~：选择当前元素之后的所有兄弟元素 6.多选择器：使用逗号隔开多个选择器 7.组合选择器：将多个选择器组合
CSS——选择器及优先级
ZKH129的博客
06-17 1938
选择器及优先级
CSS选择器及选择器优先级总结
qq_44604924的博客
05-30 410
（1）元素选择器：选择器是元素，例如：p{属性名:属性值;… } （2）类(class)选择器：.class属性名{属性名:属性值;…}，可有重复，一个元素可有多个class值，用空格隔开。 （3）id选择器：#id属性名{属性名:属性值;…}，不能有重复名字 （4）复合选择器（交集选择器），可选中同时满足多个选择器的元素，例：div.p3{属性名:属性值;…}（.p3）是类名，交集选择器的两个选择器之间不用间隔什么。 （5）组合选择器（并集选择器），中间用逗号隔开，例如：p,.classname{属性名:
Css选择器种类以及优先级
weixin_58498354的博客
04-01 3082
元素选择器 以标签名开头，选择所有span元素 /* 元素选择器 */ span { margin: 0; padding: 0; } id选择器 给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘p1’”的元素 /* id选择器 */ #p1 { margin: 0; padding: 0; } 类选择器 给标签取class名，以点.加class名开头，选择所
css选择器& 选择器的优先级
热门推荐
旺旺的博客
06-08 2万+
一、选择器1.元素选择器 语法，作用给元素名为你设置的那个元素的元素名设置样式        元素名 {                         样式列表                      }    2.id选择器。通过元素的 id 属性给id赋值， #开始加上id名称。id名称在整个页面里是唯一的    id选择器语法    #id{                       ...
css选择器有哪些？各种选择器优先级大小顺序
一只苟延残喘的卑微蝼蚁
05-14 1万+
1、类型选择器CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。2、简单属性选择器CLASS属性CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则...
详解CSS选择器的类型以及优先级
chaopingyao的博客
09-01 3971
目录 一、CSS选择器的分类 1、标签名选择器 2、类选择器 3、ID选择器 4、后代选择器（类选择器的后代选择器） 5、群组选择器 二、选择器的优先级 　　 三、总结 一、CSS选择器的分类 1、标签名选择器 div{ color：red;} 即页面中的各个标签名的css样式 2、类选择器 .divClass{ color:red;} 即定义的每个标签的class 中的css样式 　　 3、ID选择器 ...
数组去重 双重for循环
Ajax_A的博客
09-09 6314
数组去重很常见 下面分享一下我写出来的几种去重方法 var arr = [2,2,3,5,6,9,5,2,3,5,4,8,9,5,5,2,4,55,7,4,4]; 第一种方法 for(var i = 1;i<arr.length;i++){ for(var j = 0;j<i;j++){ if(arr[i]===arr[j]{ arr.splice(i,1); i - -; } } }...
object-fit:cover 的ie 兼容写法
Ajax_A的博客
05-08 2710
object-fit在ie浏览器中是不兼容的，在网络上搜索了一下这方面的内容，发现看不懂，完全看不懂好吗！大大的眼睛大大的疑惑 表示好难过！ 不说了上代码 .fu{ width: 100%; height: 100%; .fu1{ position:relative; img{ min-width: 100%; min-height: 100%; object-fit:cover ; position: absolute
标签位置互换--拖拽互换--li标签示例
Ajax_A的博客
09-19 1709
示例源码如下 cssHTML Javascript
Vue项目--仿大麦网移动端
Ajax_A的博客
09-12 1466
最近想到了之前没事仿的大麦网的移动端的vue项目，分享给大家看一下 有错指出 有问题提出 一键三连谢谢 github地址：https://github.com/meng152869/cangku 后端是nodejs 写的 功能 也就 注册 登录 等等 前端页面 也是低仿 大家可以看看 直接下载 或者git clone github地址就行 里面一共两个文件 myapp 和 myvue myapp...
could not bind to address 0.0.0.0.443 apache配置出错 排错教程
Ajax_A的博客
09-30 952
1.更改vm虚假主机内的首选项 中的是不是403如果是就更改如果不是就改第二步 2.更改Apache的conf文件夹内的extra中的httpd-ahssl.conf以及httpd-ssl.conf文件中的443字符串都改为442 这是博主找到的方法，如果可行 素质三连 ...
解决a标签png下载问题 兼容ie火狐(firefox) safari浏览器 谷歌 360
Ajax_A的博客
08-04 783
function aa(){ var x=new XMLHttpRequest(); var resourceUrl = “https://nie.res.netease.com/r/pic/20200731/dc6be18a-b0b4-4447-9bad-1050d1acd38f.jpg”; x.open(“GET”, resourceUrl, true); x.responseType = ‘blob’; x.onload=function(e){ //
css选择器及优先级
07-27
CSS选择器是用于选择HTML文档中的元素的模式。常见的CSS选择器包括： 1. 元素选择器：通过元素的标签名选择元素，如`p`选择所有的段落元素。 2. 类选择器：通过元素的class属性选择元素，使用`.`符号，如`.container`选择class为"container"的元素。 3. ID选择器：通过元素的id属性选择元素，使用`#`符号，如`#header`选择id为"header"的元素。 4. 属性选择器：通过元素的属性选择元素，如`[type="text"]`选择所有type属性值为"text"的元素。 5. 后代选择器：通过元素的后代关系选择元素，使用空格分隔，如`.container p`选择class为"container"的元素内部的所有段落元素。 6. 子元素选择器：通过元素的直接子元素关系选择元素，使用`>`符号，如`.container > p`选择class为"container"的元素下的直接子元素中的所有段落元素。 7. 相邻兄弟选择器：通过元素的相邻兄弟关系选择元素，使用`+`符号，如`h2 + p`选择紧接在h2元素后面的p元素。 8. 伪类选择器：通过元素的状态或位置选择元素，如`:hover`选择鼠标悬停的元素。 CSS选择器的优先级表示了当多个选择器同时应用于同一个元素时，哪个选择器的样式规则会被应用。通常，优先级的计算规则如下： 1. ID选择器的优先级最高，为100。 2. 类选择器、属性选择器和伪类选择器的优先级为10。 3. 元素选择器和伪元素选择器的优先级为1。 4. 通配符选择器和继承的样式没有优先级，其优先级为0。 如果多个选择器具有相同的优先级，则后面出现的选择器会覆盖前面出现的选择器。如果多个选择器具有不同的优先级，则优先级高的选择器的样式规则会被应用。 需要注意的是，使用`!important`声明可以提升样式规则的优先级，但是过度使用会导致样式难以维护和调试，应尽量避免滥用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值