HTML中常见的选择器的优先级

在HTML中常见选择器有：
行内选择器、标签选择器、id选择器、类选择器（class）

行内选择器：通过style将样式直接写在标签里面：
格式为：style=“属性1:属性值1；属性2:属性值2；…”
例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊</p>
注意：最后一个属性值后面的分号可以省略，其他的属性与属性之间必须要有分号分开；现在行内选择器也比较少用，原因是比较繁琐，代码比较少可以考虑使用，但是代码一多，就很不好用了

标签选择器：就是利用标签名通过内部样式将标签+样式给表现出来；
格式：标签{ 样式1；样式2；…}
例如：

<html>
<head><title>标签选择器</title><style type="text/css">p{color:green;font-size:14px;}</style>
</head>
<body><p>啊啊啊</p>
</body>
</html>

注意：标签选择器：运用范围是：标签的样式是同一格式的范围情况下，比较适用，但在同一标签多种样式的情况下不适合适用；

id选择器：在标签内定义一个id=“idname”，在内部样式中使用:#idname{样式}的方式使用id选择器。

类选择器（class）：在标签内定义一个class=“classname”，在内部样式中使用: .classname{样式}的方式使用id选择器。

行内样式：写在标签里面通过style=“属性1：属性值1；….”的方式改变标签样式；例如

<p style="color:red">啊啊啊</p>

优先级：
**id选择器>标签选择器
行内样式>id选择器
类选择器>标签选择器
id选择器>类选择器
即
行内样式（最高级）>id选择器>类选择器>标签选择器
**
例子：
类选择器与标签选择器的优先级：

<html><head><meta charset="utf-8" /><title>HTML选择器的优先级</title><style type="text/css">p{color: green;/*绿色*/}.blue{color: blue;/*蓝色*/}#red{color: red;/*红色*/}</style></head><body><h3>望庐山瀑布</h3><p >日照香炉生紫烟，</p><p class="blue">遥看瀑布挂前川。</p><p class="blue" id="red">飞流直下三千尺，</p><p class="blue" id="red" style="color: black;">疑是银河落九天。</p></body>
</html>

如图

从第一句到第四句可以很清楚的看到优先的变化是按照
行内样式（最高级）>id选择器>类选择器>标签选择器来变化的

HTML中常见的选择器的优先级相关推荐

HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结，优先级：由高到低(从上到下)- phpStudy...
CSS中的各种选择器与样式优先级小结优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性元素:(0,0,0,1 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
详解CSS选择器、优先级与匹配原理
选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...
css选择器的优先级，以及用法
目录前言一.css选择器二.css选择器优先级排序三.css选择器的总结 1. !important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择 ...
***CSS魔法堂：选择器及其优先级
一.前言首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
jquery常见的选择器
jquery常见的选择器具体参考官方API:http://jquery.cuishifeng.cn/ 1. 基本选择器 1.通配符选择器 * 用于选择所有元素2.元素选择器选择文档的元素如htm ...
C程序中常见的内存操作错误
对C/C++程序员来说,管理和使用虚拟存储器可能是个困难的, 容易出错的任务.与存储器有关的错误属于那些令人惊恐的错误, 因为它们在时间和空间上, 经常是在距错误源一段距离之后才表现出来. 将错误的数 ...
css选择器的优先级
1. 引言选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...

HTML中常见的选择器的优先级

HTML中常见的选择器的优先级相关推荐

最新文章

热门文章

HTML中常见的选择器 的优先级

HTML中常见的选择器 的优先级相关推荐

最新文章

热门文章

HTML中常见的选择器的优先级

HTML中常见的选择器的优先级相关推荐