Html学习之七（CSS选择器的使用--基础选择器优先级问题）
二、基础选择器的综合使用
优先级顺序：id选择器>class选择器>元素选择器。也就是说，如果这三种选择器同时为某一个元素设定样式，那么冲突的部分按优先级的顺序依次决定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基础选择器</title>
<style>
#header{
font: "微软雅黑";
font-size: 16px;
width: 600px;
}
.one{
background-color: plum;
height: 400px;
}
.two{
background-color: bisque;
height: 200px;
}
p strong{font-style: italic;}
</style>
</head>
<body>
<div id="header" class="one">
<p>div1里的文字</p>
</div>
<div id="header" class="two">
<p>div2里的<strong>文字</strong></p>
</div>
</body>
</html>
结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的权重</title>
<style>
p strong{color: black;}
strong.blue{color: green;}
.father{color: yellow;}
p.father strong{color: orange;}
#header strong{color: pink;}
#header strong.blue{color: red;}
</style>
</head>
<body>
<p class="father" id="header">
<strong class="blue"> guess my color</strong>
</p>
</body>
</html>
结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css权重的继承</title>
<style>
strong{color: blue;}
#header{color: red;}
</style>
</head>
<body>
<p id="header">
<strong>guess my color</strong>
</p>
</body>
</html>
结果：
Html学习之七（CSS选择器的使用--基础选择器优先级问题）的更多相关文章
- Html学习之六（CSS选择器的使用--基础选择器的使用）
一.基础选择器 1.id选择器 2.class选择器 3.元素选择器 <!DOCTYPE html> <html> <head> <meta charset= ...
- css的导入与基础选择器
css是什么 css也是一门标记语言,主要用作修改控制html的样式 css书写的位置(导入) css是用来控制页面标签的样式,但是可以根据实际情况书写在不同的位置, 放在不同位置有不同的专业叫法,可 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS简介，基础选择器，字体属性，文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
- html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- WEB学习-CSS基础选择器
基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
随机推荐
- Linux—挂载磁盘（云盘）
创建挂载目录 [root@localhost ~]# mkdir -p /www 可以看到/dev/vda1盘挂载/ /dev都是位于根路径下,都属于系统盘.根路径 / 都是位于系统盘.而/root, ...
- 非法指令(Illegal Instruction)问题定位
关键词:Illegal Instruction.SIGILL等. 进程在运行过程中会收到SIGILL信号,此类错误是由操作系统发送给进程的. SIGILL是某个进程中的某一句不能被CPU识别指令,这些 ...
- JavaScript调用mysql查询bigint数据精度失真解决方案
最近我遇上了如题这个问题,后端用node.js写了一个读取mysql数据的接口,之前使用了很久都没发现什么问题,在查询订单表的订单ID时返回的值却是错的 正确的值是 19102818002800002 ...
- MATLAB实例：构造网络连接图(Network Connection)及计算图的代数连通度(Algebraic Connectivity)
MATLAB实例:构造网络连接图(Network Connection)及计算图的代数连通度(Algebraic Connectivity) 作者:凯鲁嘎吉 - 博客园 http://www.cnbl ...
- Educational Codeforces Round 74 (Rated for Div. 2)
传送门 A. Prime Subtraction 判断一下是否相差为\(1\)即可. B. Kill 'Em All 随便搞搞. C. Standard Free2play 题意: 现在有一个高度为\ ...
- C++(OI竞赛入门)学习指南一
#include<cstdio> 头文件#include包含 <头文件名称> #include<iostream> 需要头文件里面的功能 cst ...
- 洛谷 P5639 【CSGRound2】守序者的尊严
洛谷 P5639 [CSGRound2]守序者的尊严 洛谷传送门 题目背景 由于Y校最近进行了对学校食堂的全面改革与对小卖部的全面整治(乱搞),导致学校小卖部卖的零食被禁售了:学校食堂的炸鸡窗口也消失 ...
- console调试技巧
1.console.log() 我们经常会使用console.log来打印出某个变量的值或者某个实体对象,也可以传入多个变量参数,它会按照传入顺序进行打印: 1. 传入一个变量 const a = 1 ...
- 【shell脚本】点名器===randomName.sh
随机点名,从name.txt文件中读取名字 [root@VM_0_10_centos shellScript]# cat randowName.sh #!/bin/bash # 随机点名器 # 需提前 ...
- bootstrap 输入框后面有个按钮
效果如下: 实现代码: