!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. 《Java核心技术卷I》——第5章 继承

    在C++中,没有提供用于表示抽象类的特殊关键字.只要有一个纯虚函数,这个类就是抽象类. hashCode()方法是定义在Object类中,因此每个对象都有一个默认的散列码,其值为对象的存储地址. 绝大 ...

  2. pandas的settingwithWaring报警

    # 0 读取数据 import pandas as pd df = pd.read_csv("beijing_tianqi_2018.csv") # 换掉温度后面的后缀 df.lo ...

  3. 软件工程大作业（学生会管理系统）Web端个人总结报告

    软件工程大作业(学生会管理系统)Web端个人总结报告 一.小组信息 1.所在小组:第二组 2.小组选题:学生会管理系统 3.项目源代码链接: Web端源代码:code 小程序端源代码:code APP ...

  4. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Java 内存结构之虚拟机栈

    2.虚拟机栈 定义:虚拟机栈(Java Virtual Machine Stacks)就是每个线程运行需要的内存空间,栈由一个一个的栈帧(Frame)组成,栈帧就是每个方法运行时需要的内存(方法的参数 ...

  6. Thymeleaf静态资源引入方式及公共页面代码抽取

    静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href=&qu ...

  7. 【LuoguP5171】Earthquake

    题目链接 题意 求满足如下不等式的非负整数 \(x,y\) 的对数 \[ax+by\leq c\] Sol a,b,c 都是非负的,那么先随便变个形: \[y\leq\frac{c-ax}{b}\] ...

  8. cryto-js 常用加密库 md5加密

    安装 npm i crypto-js 使用 import CryptoJs from 'crypto-js' CryptoJs.MD5(password).toString() password 会被 ...

  9. 第八周作业—N42-虚怀若谷

    一.显示统计占用系统内存最多的进程,并排序 [root@centos7 ~]# ps -eo uid,pid,ppid,tty,c,time,cmd,%mem --sort=-%mem UID PID ...

  10. 在asp.net 中怎样上传文件夹

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...