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.通用选择 ...
随机推荐
- javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
- 错误：selenium.common.exceptions.SessionNotCreatedException: Message: Unable to find a matching set of capabilities
错误再现 原因:firefox浏览器版本和浏览器驱动版本不匹配 解决办法:卸载高版本浏览器,安装低版本浏览器
- python --- 对于需要关联的接口处理方法
1.unittest对于需要关联的请求,怎么处理(如购物接口,需要先登录) a)把登录请求写到测试用例类的setUP函数中,这样每次调用测试用例,都会先执行setUP函数 b)全局变量的形式声明. c ...
- P2057 [SHOI2007]善意的投票 / [JLOI2010]冠军调查
P2057 [SHOI2007]善意的投票 / [JLOI2010]冠军调查 拿来练网络流的qwq 思路:如果i不同意,连边(i,t,1),否则连边(s,i,1).好朋友x,y间连边(x,y,1)(y ...
- Java 第一次课堂测试总结。
Java 第一次课堂测试总结. 昨天参加了JAVA的开学测试,课上没有完成计算基点的功能,以下是修改完成后的代码. 首先是ScoreInformation类来存储学生信息. //信1805-1 王正 ...
- UVA - 11054 Wine trading in Gergovia （Gergovia 的酒交易）（贪心+模拟）
题意:直线上有n(2<=n<=100000)个等距的村庄,每个村庄要么买酒,要么卖酒.设第i个村庄对酒的需求为ai(-1000<=ai<=1000),其中ai>0表示买酒 ...
- 4K电视到底值不值得购买？
在智能手机等移动终端的冲击下,近年来电视厂商的日子越来越不好过.为了吸引消费者的关注,电视厂商也是绞尽脑汁不断在电视上增加各种噱头功能.比如当年被吹得神乎其神.在家就享受影院体验的3D电视,就因为3D ...
- 使用node.js安装asar和反编译app.asar
背景:app.asar文件是Electron加密打包时的中间产物,electron.exe调用resources文件夹下的app.asar从而实现不用解压缩而直接读取文件内容的高效. 一.需要先安装n ...
- hibernate.hbm.xml必须必须配置主键
hibernate.hbm.xml必须必须配置主键 <id name="XXid" type="java.lang.long" column=" ...
- 04-String——课后动手动脑
1.请运行以下示例代码StringPool.java,查看输出结果.如何解释这样的输出结果?从中你能总结出什么? public class StringPool { public static voi ...