好家伙,来补一点关于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>的 ...

随机推荐

文本处理工具-vim编辑器的常见用法
文本编辑工具分类: (1)全屏编辑器: nano(字符编辑器).vi.vim (2)行编辑器: sed:可以逐行改文件 vi编辑器全名:Visual editor,linux系统自带的文本编辑工具 ...
nginx启动失败/报错（bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket...permissions) nginx启动失败
出现这个问题是因为80端口被占用了 1.cmd输入命令netstat -aon|findstr "80" 2..查看80端口 16356对应的任务输入命令 tasklist|fi ...
PowerDesigner安装
1.双击安装包进行安装 2.选择PRC 3.一路往下就行 4.将下图文件夹中的内容覆盖安装的内容 ----------------------------------------分割线 5.安装成功 ...
Systemverilog-- OOP--对象的拷贝
目录浅拷贝: 定义拷贝函数: 拷贝函数总结: 浅拷贝: Packet p1; Packet p2; p1 = new; p2 = new p1; 在创建p2对象时,将从p1拷贝其成员变量例如 i ...
Error Code: 1054. Unknown column '字段名' in 'field list'
问题描述: j博主在java开发过程中,通过读取excel中表名和字段名,动态创建insert的SQL语句,在mysql可视化工具中执行此SQL语句时,一直提示"Error Code: 10 ...
JsonPath：针对json的强大的规则解析与参数查找工具
项目特点 GitHub项目地址:https://github.com/json-path/JsonPath 主要功能: 将Json字符串转为Java Map对象(这个不算什么,FastJson之类的工 ...
Idea 编译jsp生成的class文件路径
找到work\Catalina\localhost\ 然后访问响应的JSP地址才会动态生成到这个路径下面,不访问不会生成,在org\apache\jsp 下面
要想不踩SaaS那些坑，得先了解“SaaS架构”
摘要:围绕当下许多企业青睐的SaaS应用开发,华为云开发者技术服务工程师程泽在DTT首期带来主题为 <SaaS云原生应用典型架构> 的DTT首期直播分享. 本文分享自华为云社区<DT ...
Git上传仓库
上传代码到gitee 方法1 1. 将远程仓库克隆到本地 git clone https://gitee.com/abc/aaa.git 2. 添加或修改本地文件 3. 将本地代码push到远程仓库 ...
javascript自执行函数表达式
解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明.// 下面2个括弧()都会立即执行(function () { /* code */ ...