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

随机推荐

Tomcat部署接口环境遇到的问题，有没有人能帮忙解决指导一下
1.在虚拟机中用Tomcat部署一个接口环境:linux+jdk+Tomcat 前提条件:代码包啥的别人都用过,可以部署成功 2.具体部署: a. 利用xftp把所有的代码包war包传送到tomcat ...
跟着Vam一起学习Typescript（第一期）
一.安装环境与配置1.命令行安装 npm i -g typescript 2.快捷打开Vs Code编辑器创建一个项目文件夹,在该文件夹下打开命令行工具,使用code .命令快速打开编辑器(如果计算 ...
知道vue组件同级传值吗？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
使用Vite2+TypeScript4+Vue3技术栈，如何入手开发项目
前言今天,我们使用Vite2.0+Vue3+TS来试玩一下,开发一个demo项目.实战我们,打开Vite官方网站(https://cn.vitejs.dev/). Vite (法语意为 " ...
加班？不存在的啦~Python处理Excel，学会这十四个方法，工作量减少大半
现在Python横行的年代,财务.人事.行政等等岗位多少得学点Python,省事又不费脑!所有操作都用Python自动实现, 加班?不存在的! excel和python其实都是工具,不要也不用拿去做对 ...
Java封装Get/Post类
封装的类: package pers.hmi.translate; import java.io.BufferedReader; import java.io.IOException; import ...
Oracle数据库常用查询语句
1.[oracle@dbserver ~]$ sqlplus / as sysdbaSQL*Plus: Release 11.2.0.4.0 Production on Tue Mar 15 15:1 ...
ReentrantLock源码详解
前言以前只知道ReentrantLock底层基于AQS实现,相对于(旧版本的)synchronized: 更轻量(基于CAS而不是管程),由JDK实现可以实现公平/非公平可中断等待可绑定多个条 ...
Template -「矩阵 - 行列式」
#include <cstdio> int Abs(int x) { return x < 0 ? -x : x; } int Max(int x, int y) { return ...
IM系统-消息流化一些常见问题
原创不易,求分享.求一键三连之前说过IM系统的一些优化,但是在网络上传输数据对于数据的流化和反流化也是处理异常情况的重点环节,不处理好可能会出现一些消息发送成功,但是解析失败的情况,本文就带大家来一 ...