第九十七篇：CSS的选择器及优先级
好家伙,来补一点关于CSS的基础
1.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
使用#号来定义样式
2.class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，
class可以在多个元素中使用。
使用"."号来定义样式
来动手试一下(冻手!冻手!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#para1
{
color:red;
}
.center
{
text-align:center;
}
</style>
</head> <body>
<p id="para1">Hello World!</p>
<p>我不受id选择器的影响</p>
<h1 class="center">我是受类选择器影响的h1标签</h1>
<p class="center">我是受类选择器影响的p标签</p> </body>
</html>
看的出来两者特点,
id选择器使用者唯一(并不,理论上应该唯一),
而class选择器可供一系列标签使用
3.CSS样式继承
CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。
如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。
4.选择优先级:优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
内联样式,如
<p style=""></p>
ID 选择器， 如
#para1
{
color:red;
} <p id="para1">Hello World!</p>类选择器， 如
.center
{
text-align:center;
} <h1 class="center">我是受类选择器影响的h1标签</h1>属性选择器， 如
[title]
{
color:red;
} <h2 title="Hello world">Hello world</h2>伪类选择器， 如
selector:pseudo-class {
property: value;
}伪元素选择器， 如
selector::pseudo-element {
property: value;
}标签选择器， 如
div{...} p{...}通配选择器， 如
*{}
来一张梗图
再来举个例子:
// HTML
<div class="content-class" id="content-id" style="color: black"></div> // CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
最后的字体颜色是黑色,
因为内联样式权重最大
That's all
第九十七篇：CSS的选择器及优先级的更多相关文章
- CSS 从入门到放弃系列：CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
- 层叠机制和继承的概念以及CSS中选择器的优先级
层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...
- css的选择器的优先级
css覆盖是在打代码的时候,开发者很普通很普通,也是很经常经常用到的,但是容易混淆他们之间的优先级. [][][] 第一个是id,第二个是class,第三个是元素名.有一个就加一.比较这个三位数的大小 ...
- css标签选择器的优先级
1.行内样式>嵌入式>外部样式(就近原者) 当外部样式在嵌入式的前面时就是外部样式为主 2.重复样式p{color:red}p{color:green}<p>是green< ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- css知多少（6）——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- css知多少——选择器的优先级
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
随机推荐
- 聊聊 C# 和 C++ 中的 泛型模板 底层玩法
最近在看 C++ 的方法和类模板,我就在想 C# 中也是有这个概念的,不过叫法不一样,人家叫模板,我们叫泛型,哈哈,有点意思,这一篇我们来聊聊它们底层是怎么玩的? 一:C++ 中的模板玩法 毕竟 C+ ...
- vue 使用npm install安装依赖失败 【问题分析与解决】
1 进入项目根目录,先通过 npm install 命令安装项目所需依赖,再通过 vue ui 命令打开 Vue Cli 提供的图形化界面,选择项目所在文件夹将项目导入. 出现问题 npm insta ...
- Python调用腾讯云API，实现人脸年龄变化
网上看到了一个教程,调用腾讯云的人脸识别api和修改年龄api来实现模拟人物不同年龄的面貌 但是大多数教程的代码都是想同的,估计是抄袭哪个人的关键是执行不了 刚好周杰伦马上要发新专辑了,小改一下,拿杰 ...
- Vue3.0系列——「vue3.0性能是如何变快的？」
前言 先学习vue2.x,很多2.x内容依然保留: 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS. 为什么学习vue3.0? 性能比vue2.x快1.2-2倍 ...
- CentOS yum命令404
1.获得新的repo列表文件 http://mirrors.163.com/.help/centos.html 2.备份 mv /etc/yum.repos.d/CentOS-Base.repo Ce ...
- 纪念我逝去的n个小时
纪念我逝去的n个小时 某人的惨案要我擦屁股=.= #include <bits/stdc++.h> using namespace std; template<class T> ...
- Pytorch从0开始实现YOLO V3指南 part2——搭建网络结构层
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...
- Tapdata Cloud 版本上新！率先支持数据校验、类型映射等6大新功能
Tapdata Cloud cloud.tapdata.net Tapdata Cloud 是国内首家异构数据库实时同步云平台,目前支持 Oracle.MySQL.PG.SQL Server.Mong ...
- labview从入门到出家3--制作和调用子VI
当程序越写越大的时候,我们会发现代码界面会比较乱(线太多),那要怎么做可以让代码更简洁一点,我只管直接调用某个功能函数,而不需要在一个VI上面去实现这个功能函数呢?--子VI.好比C语言里面的Main ...
- IO多路复用epoll
0 why: 问题来源 0.1 网络编程流程 //创建socket int s = socket(AF_INET, SOCK_STREAM, 0); //绑定IP地址和端口号port bind(s, ...