26-CSS三大特性之优先级


类>标签>通配符>继承>浏览器默认
-->

0

  • 我是段落

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-CSS三大特性之优先级</title>
<style>
/*
li{
color: blue;
}
ul{
color: red;
}
*/
/*
p{
color: blue;
}
p{
color: red;
}
*/
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
</head>
<body>
<!--
1.什么是优先级?
作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定 2.优先级判断的三种方式
2.1间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
2.2相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
2.3不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
-->0
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
</body>
</html>

H5 26-CSS三大特性之优先级的更多相关文章

  1. CSS三大特性之优先级顺序

    id选择器>类选择器>标签选择器>通配符>继承>浏览器默认

  2. CSS三大特性(继承、优先级、层叠)之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  3. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

  4. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  5. Css - 三大特性

    css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...

  6. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  7. css三大特性及权重说明

    一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...

  8. 前端面试 CSS三大特性

    CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...

  9. 0017 CSS 三大特性:层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

随机推荐

  1. Eclipse启动时发生An internal error occurred duri ng: "Initializing Java Tooling ----网上的坑爹的一个方法

    补充一下: 上面的方法不行. 我的个人解决方法 出现这种问题的原因,我的是eclipse换了,工作目录还是用之前的那个 把build Automatically的钩去掉 假设我们是用之前的worksp ...

  2. spring4笔记----spring4国际化

    <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...

  3. 转:Log Explorer使用说明恢复被误删除的数据

    一.介绍 Log Explorer主要用于对MSSQLServer的事物分析和数据恢复.你可以浏览日志.导出数据.恢复被修改或者删除的数据(包括执行过update,delete,drop和trunca ...

  4. mysql 数据库 命令行的操作——对库的操作

    1.查看所有数据库 show databaese; 2.查看当前所用的数据库 show databases(): 3.切换数据库 use(数据库名): 4.创建数据库 create database ...

  5. SMB协议利用之ms17-010-永恒之蓝漏洞抓包分析SMB协议

    SMB协议利用之ms17-010-永恒之蓝漏洞抓包分析SMB协议 实验环境: Kali msf以及wireshark Win7开启网络共享(SMB协议) 实验步骤: 1.查看本机数据库是否开启,发现数 ...

  6. LeetCode算法题-Valid Palindrome(Java实现)

    这是悦乐书的第174次更新,第176篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第33题(顺位题号是125).给定一个字符串,确定它是否是回文,只考虑字母数字字符并忽略 ...

  7. LeetCode算法题-Plus One(Java实现)

    这是悦乐书的第156次更新,第158篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第15题(顺位题号是66).给定一个非空数字数组来表示一个非负整数,并给其加1.该数组已 ...

  8. Java 7 for Absolute Beginners/Java 7基础教程--代码纠错

    中文版书中的问题代码记录: 只记录了P213后面的错误代码,如果后面发现P213页前面的错误代码,会继续补齐.但我提供的代码都是可以正常运行的,如果有使用者发现中文版书中其他的错误代码请告诉我,方便我 ...

  9. MYSQL的binlog日志

    binlog 基本认识 MySQL的二进制日志以事件形式,记录了所有的DDL和DML(除了数据查询语句)语句,及语句执行消耗时间. MySQL的二进制日志是事务安全型的,是MySQL最重要的日志. b ...

  10. Eclipse debug 断点不能调试 ,Eclipse Unable to install breakpoint in 解决办法

    解决:[1]项目工程名 ,右键 --> properties --> java compiler -->class file Generation 位置  Add line numb ...