今天在学css的时候遇到一个问题，用css的外部样式表改变一个<p>元素的颜色，死活就是改变不了，最后才发现是优先级的问题（我自己想当然成后面的优先级就高了，犯了经验主义错误）。

先给大家看看代码：html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>这是第二个测试网页</title>

 <link rel="stylesheet" type="text/css" href="./css/demo.css">

 </head>

 <body>

 <!--这个网页共分成三个比较大的块-->

     <!--这是第一个块-->

     <div id="d1">

         <p id="p1">id为p1的文字</p>

         <p id="p2">id为p2的文字</p>

         <p id='p3'>id为p3的文字</p>

     </div>

     <!--这是第二个块-->

     <div id="d2">

         <p class="c1">class为c1的文字</p>

         <p class="c2">class为c2的文字</p>

         <p id="pc3" class='c3'>class为c3的文字</p>

     </div>

     <!--这是第三个块-->

     <div>

     </div>

 </body>

 </html>

css代码：

 #d1

 {

     background:blue;

 }

 #d2

 {

     background:yellow;     color:white;

 }

 .c3

 {

     color:red;

 }

 p

 {

     color:green;

     text-align:center;

 }

这两个文件里面的代码应该来讲，结构是非常清晰的。那么重点来看css的代码。

#d1和#d2是id选择器，它们分别想让第一个div中的背景为蓝色，第二个div中的背景为黄色，且字体为白色；

.c3控制的是第二个div中第三行的p元素，想让其成为红色；

p控制但是全文中的段落文字的显示样式，这里想让他们居中，且文字颜色为绿色。

那么大家猜猜，网页显示的结果是咋样的呢？

我在网上搜到一个帖子，里面讲的井井有条：

w3schools说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”；

对于同在一个样式文件中的属性控制：

1.样式表的元素选择器选择越精确，则其中的样式优先级越高：id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式；

2.对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高：注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。

最后放上我的代码的执行结果，供大家参考：

css（外部样式表）中各种选择器（定义属性时）的优先级的更多相关文章

  1. CSS渐变中是如何定义渐变线的

    在CSS语法中用户代理对渐变gradient语法的解析渲染离不开渐变线.渐变分为线性渐变(linear gradient)和径向渐变(radial gradient). 渐变在元素盒模型中backgr ...

  2. css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

    通配选择符* { sRules }  类型选择符E { sRules }  td { font-size:14px; width:120px; }   属性选择符 E [ attr ] { sRule ...

  3. css运用中，对position属性的认识

    position属性有: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠 ...

  4. CSS 3 中的多列属性

    .column-count <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. 第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解

    第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解 一.    引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...

  6. Android自己定义控件而且使其能够在xml中自己定义属性

    为什么要自己定义View android开发中自己定义View的优点是显而易见的.比方说以下的这个顶部导航,它被设计出如今应用的每一个界面,但每次的内容却不尽同样.我们不能在每一个layout资源中都 ...

  7. WPF中的依赖项属性

    Form cnblogs 桂素伟 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越多. 只能跟着MSDN来学了,所以想是在这里记录下学习的过程和对知识的理解. 先从最基本的吧,依赖项属性 ...

  8. WPF中的依赖项属性（转）

    出处:https://www.cnblogs.com/axzxs2001/archive/2010/04/25/1719857.html 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越 ...

  9. Django框架(五)：模型(一) 定义属性

    1. 定义属性 Django根据属性的类型确定以下信息: 当前选择的数据库支持字段的类型 渲染管理表单时使用的默认html控件 在管理站点最低限度的验证 django会为表创建自动增长的主键列,每个模 ...

随机推荐

  1. python中的各种转化

    1.数之间的转化 #浮点型to整型 >>> int(5.6) 5 #整型to浮点型 >>> float(5) 5.0 2.数与字符串 #字符串to整型 >&g ...

  2. 《Python网络编程》学习笔记--使用谷歌地理编码API获取一个JSON文档

    Foundations of Python Network Programing,Third Edition <python网络编程>,本书中的代码可在Github上搜索fopnp下载 本 ...

  3. bzoj2876 [NOI2012]骑行川藏（拉格朗日乘数法）

    题目描述 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因此在每天的骑行 ...

  4. [经典] 使用Python批量重命名iPhone拍摄的照片-按照拍摄时间重命名

    #!/usr/bin/env python # -*- coding: utf-8 -*- ''' 批量修改照片文件名称的Python脚本程序. 遍历指定目录(含子目录)的照片文件,根据拍照时间将照片 ...

  5. VC下防止反汇编的办法（1）

    最近在看IDA的书,讲汇编语言的部分提到了一种防止递归向下汇编器逆向程序的方法 这里esp指向栈顶,也就是调用方最后入栈的返回地址.然而实际在VC2017里用内联汇编这么做是不行的,原因可以看看VC生 ...

  6. 【Unity3D技术文档翻译】第1.9篇 使用 Unity AssetBundle Browser tool (AssetBundle系列完结)

    上一章:[Unity3D技术文档翻译]第1.8篇 AssetBundles 问题及解决方法 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced D ...

  7. C#实现七牛云存储

    云存储,就是把本地的资源文件存放至网络上,可以公网访问.相当于网盘功能,感觉非常方便. 这里介绍的是七牛云存储.有兴趣的可以去官方网站详看 根据官网的介绍,本身是提供SDK的,下载地址,大家可以根据自 ...

  8. mongodb的TTL索引介绍（超时索引）

    TTL索引是mongodb新支持的用于延时自动删除记录的一种索引.它仅包含一个字段,该字段值需要是Date()类型,并且不支持复合索引.可以指定某条记录在延时固定时间后自动删除.数据自动超时删除主要用 ...

  9. 自定义JpaUtil,快速完成Hql执行逻辑(一)

    这段时间学习Spring Data JPA功能模块.Java持久性API(简称JAP)是类和方法的集合,以海量数据关系映射持久并存储到数据库,这是由Oracle公司提供方案技术.在JAVA社区,深受爱 ...

  10. SCU 4438 Censor KMP/Hash

    题意:给定一个模式串和文本,要求删除所有模式串.可能删除后会形成新的模式串,必须全部删除. 思路1:kmp算法求得失配数组,用一个match数组记录文本串中第i字符和未删除的字符能匹配模式串的长度.这 ...