!important 的使用。

!important方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

现在选择的是类选择器 spe2的样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
p{
color: red;
font-size: 30px;
} .spe1{
color: yellow;
font-size: 40px;
} .spe2{
color: green;
font-size: 40px;
} </style>
</head>
<body>
<div>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe1 spe2">我是什么颜色</p>
</div>
</body>

对选择器 的样式设置 !important ,这个样式马上应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
p{
color: red !important;
font-size: 30px !important;
} .spe1{
color: yellow;
font-size: 40px;
} .spe2{
color: green;
font-size: 40px;
} </style>
</head>
<body>
<div>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe1 spe2">我是什么颜色</p>
</div>
</body>
</html>

前端 CSS 优先级 样式设置important的更多相关文章

  1. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  2. 前端css 同级元素 设置不同样式 :first-child :nth-child() 的操作收藏

    说明:最近在写前端vue  调样式的时候遇到了一个问题 同一个div下对多个同级别的<span>标签进行 边距设置 <div class="shuju-div"& ...

  3. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. 前端css优先级以及继承

    1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...

  5. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  6. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  7. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  8. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  9. CSS 特殊样式设置集合

    1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute;  第二个子块设置margin-left即 ...

随机推荐

  1. P3833 [SHOI2012]魔法树 (树链剖分模板题)

    题目链接:https://www.luogu.org/problem/P3833 题目大意:有一颗含有n个节点的树,初始时每个节点的值为0,有以下两种操作: 1.Add u v d表示将点u和v之间的 ...

  2. Laplace's equation

    链接:https://en.wikipedia.org/wiki/Laplace%27s_equation

  3. Codeforces 957 水位标记思维题

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  4. 客户端远程连接docker容器中的mysql 报1251错误

    1.启动容器: [root@localhost ~]# docker run -d -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 mysql2.进入容器: [r ...

  5. jupyter安装

    1. 安装ipython, jupyter pip install ipython pip install jupyter 2.查看是否有配置文件 jupyter notebook --generat ...

  6. Centos7.5 rpm安装zabbix_agent4.0.3

    1.下载并且安装 cd /data/tools/ ##切换到下载客户端目录 wget http://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-ag ...

  7. Django【第6篇】:Django之ORM单表操作(增删改查)

    django之数据库表的单表查询 一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name =& ...

  8. NOIP2015 D1T1 神奇的幻方

    洛谷P2615 很简单的模拟题……每枚举一个点只要保存上一个点的x,y值即可,不用开数组存放 另外题目中对于K的操作都在K-1的九宫格范围内,所以我们巧妙运用++和--就可以做到每个分支一行代码 还有 ...

  9. R语言 eval(quote(x)) 和 eval(x)

    eval() 's first argument is an expression. So if you only provide one argument, it will evaluate the ...

  10. iOS---实现在屏幕上实时绘图的简单效果---CAShaperLayer和UIBezierPath的简单运用

    首先,声明几个属性 @property(nonatomic,strong)UIBezierPath * beizer; @property(nonatomic,assign)CGPoint start ...