day65-CSS选择器和样式优先级
1. CSS
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.CSS语法
每个CSS样式由两个组成部分：选择器和样式。样式又包括属性和属性值。每个样式之后用分号结束。
选择器 {样式1;样式2} 或者 选择器 {属性1：值1 ; 属性2：值2}
p { color:red ; font-size:18px }
3.CSS注释
/*这是注释*/ 4.CSS的3种引入方式
4.1 行内样式
<p style="color: red">Hello world.</p> 4.2 内部样式: 写在网页的<head></head>标签对的<style></style>标签对中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color: red}
</style>
</head> 4.3 外部样式
<link rel="stylesheet" href="mystyle.css" type="text/css"/> 5.CSS选择器：元素选择器、ID选择器、类选择器比较常用
5.1 基本选择器: 元素选择器、ID选择器、类选择器、通用选择器。 5.1.1 元素选择器 ：适用于 批量的\统一\默认的样式
html: <body>
<p>迈腾2020</p>
</body>
css: p{color:red} 5.1.2 ID选择器: id与#对应，适用于 给特定标签设置特定样式
html: <body>
<p id="i1">迈腾2020</p>
</body>
css: #i1{color:red} 5.1.3 类选择器： class与.对应 。可以多条语句都写c1。适用于 给某一些标签设置相同的样式
html: <body>
<p class="c1">迈腾2020</p>
<p class="c1">迈腾2019</p>
<p class="c1">迈腾2018</p>
</body>
css: .c1{color:red} 或 p.c1{color:red} 5.1.4 通用选择器：所有标签都使用同样的样式。
css: *{color:red} 5.2 组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器。都是往下找，不会往上找。 5.2.1 后代选择器：
html: <body>
<div id="d1">
<p>p儿子</p>
<span>span儿子</span>
<div>
<p>p孙子</p>
<span>span孙子</span>
</div>
</div>
</body>
css: #d1 p{color:red} 所有id为d1的p标签都是相同的样式:p儿子和p孙子都是红色。注意#d1和p中间是空格。 5.2.2 儿子选择器：
html: <body>
<div id="d1">
<p>p儿子</p>
<span>span儿子</span>
<div>
<p>p孙子</p>
<span>span孙子</span>
</div>
</div>
</body>
css: #d1 > p{color:red} id为d1的p儿子是红色，而p孙子默认黑色。注意#d1和p中间是>。 5.2.3 毗邻选择器：div和p必须是同级。上面的p孙子和p儿子不同级。
html: <body>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
css: div + p {color:red}。222变红色，而111和333还是默认黑色。注意div和p中间是+。 5.2.4 弟弟选择器：div和下面的两个p必须是同级。div是两个p的哥哥。
html: <body>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
css: div ~ p {color:red}。222和333都变红色，而111还是默认黑色。注意div和p中间是~。 5.3 属性选择器：sdf为自定义属性，也可以是其他属性，[]中括号是属性的意思。
html: <body>
<p sdf="good">poor</p>
<p sdf="1">smart</p>
<p sdf="2">desire</p>
<p sdf="3">focus</p>
</body>
css: [sdf]{color:red} 属性为sdf的样式都是红色。
css: [sdf = "good"]{color:red} 仅仅属性为sdf = "good"的样式是红色。 不怎么常用的属性选择器：
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {color: red;} /*找到所有title属性以hello结尾的元素*/
[title$="hello"] { color: yellow;} /*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {color: red;} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {color: green;} 5.4 分组选择器：
html: <body>
<div>迈腾</div>
<p>psdf</p>
</body>
css: div,p{color:red} 把div和p分到一组，设置相同的样式。注意div和p中间是逗号，。 html: <body>
<div id="d1">迈腾</div>
<p>psdf</p>
</body>
css: #d1,p{color:red} 把id为d1的标签和p分到一组，设置相同的样式。 5.5 嵌套选择器：
html: <body>
<div class="c1">
<p>111</p>
<p>222</p>
<span>333</span>
</div>
</body>
css: .c1 p{color:red} 类c1内部所有p标签都设置红色，这也是后代选择器。 html: <body>
<div id="i1">
<p>111</p>
<p>222</p>
<span>333</span>
</div>
</body>
css: #i1 p{color:red} id为i1的标签内部所有p标签都设置红色，这也是后代选择器。 6. 样式文件优先级：内联样式--id选择器--类选择器--元素选择器
1. 内联样式(直接在标签里面写style) 优先级最高
2.选择器都一样的情况下,谁靠近标签谁就生效
3. 选择器不同时, 计算权重来判断,权重计算永不进位，意思是100个id选择器都比不上一个内联选择器的优先级高。
3.1 内联样式 1000
3.2 id选择器 100
3.3 类选择器 10
3.4 元素选择器 1
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important
css: p{color:red !important}只有我生效。
day65-CSS选择器和样式优先级的更多相关文章
- Css - 选择器和样式
Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
- CSS权重及样式优先级问题
CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...
- HTML|CSS之CSS选择器及样式
知识内容: 1.CSS选择器 2.CSS常用样式 参考:http://www.cnblogs.com/yuanchenqi/articles/5977825.html 一.CSS选择器 1.基础选择器 ...
- CSS选择器整理以及优先级介绍
一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...
- CSS - 权重，样式优先级
关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...
- CSS选择器、样式、盒模型
一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
- css调试与样式优先级
如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...
- css选择器，样式表导入
css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...
随机推荐
- 127-PHP类通过魔术变量判断类中是否存在指定的方法
<?php class ren{ //定义人类 //定义成员属性 private $name='Tom'; private $age=15; //定义成员方法 public function g ...
- lz-cms
去年这个时候也是8月份,离开了生活9年的福州来到厦门,已整整一年的时间.离开福州的原因,就是不想让自己在安逸中沉沦下去,需要重新寻找技术的激情.来到新公司后,也开始投入老板梦想中的那个伟大CMS的研发 ...
- （22）Canny算法
基础知识,主要是看这个博客:https://blog.csdn.net/qq_41167777/article/details/84863351
- django ModelForm在模板中显示中文
情景再现 修改ModelForm 效果
- kafka源码系列之mysql数据增量同步到kafka
一,架构介绍 生产中由于历史原因web后端,mysql集群,kafka集群(或者其它消息队列)会存在一下三种结构. 1,数据先入mysql集群,再入kafka 数据入mysql集群是不可更改的,如何再 ...
- Vuex基本介绍
1.什么是Vuex Vuex是一个专为vue.js应用程序开发的状态管理模式. 状态管理:data里面的变量都是vue的状态. 2.为什么要用Vuex 当我们构建一个中大型的单页面应用程序时,Vuex ...
- Ubuntu Vi指令
Ubuntu在不更新源的情况下是没办法使用Vim指令的只能使用Vi指令 所有我也就记录了下来 vi / vim命令: 插入内容: i: 插入光标前一个字符 I: 插入行首 a: 插入光标后一个字符 A ...
- redis性能测试方法
redis本身设计为单线程服务器,性能本身并不随着多核而提高,但是会随着cpu本身而改变,AMD的可能只有Intel一半的性能,Intel是最好的选择. 性能会随着连接数的增多而下降,30000大概只 ...
- EUI库 - 概述
新特性 36k 访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值 统一的显示列表 普通对象和eui对象都可用addChild来添加 一个逻辑组件只管 ...
- 实验吧Web-中-登陆一下好吗??
题目上说:不要怀疑,我已经过滤了一切,还再逼你注入,哈哈哈哈哈! 可以试试,只要是输入的关键字都被过滤了,双写也被过滤掉了. 用万能密码发现,or被过滤掉了. 这里用到的是admin为:'=',密码为 ...