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.通用选择 ...
随机推荐
- HDU 4819 二维线段树
13年长春现场赛的G题,赤裸裸的二维线段树,单点更新,区间查询 不过我是第一次写二维的,一开始写T了,原因是我没有好好利用行段,说白一点,还是相当于枚举行,然后对列进行线段树,那要你写二维线段树干嘛 ...
- APIO 2010 特别行动队 斜率优化DP
Description 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动队中队员的编号 应该连续,即为形如 (i ...
- 实验吧-隐写术-黑与白(二)(反转+五笔+Image steganography)
反转有二:颜色反转.文件名反转 文件名这么乱,毫无规律,好奇怪,进行反转后发现是:steganography(就是隐写术的意思),这还是个图片文件,有一款工具正好叫Image steganograph ...
- Java中的super关键字和this关键字作用介绍
一.super关键字的作用 1.子类在构造方法中显示调用父类构造方法 super可以在子类的构造方法中显示调用父类的构造方法:并且这行代码必须出现在子类构造方法的第一行.原因:因为父类构造方法没有执行 ...
- 《thinkphp》二、创建实例
1.目录结构 project 应用部署目录 ├─application 应用目录(可设置) │ ├─common 公共模块目录(可更改) │ ├─index 模块目录(可更改) │ │ ├─confi ...
- springmvc无法访问JS，CSS等文件
配置好web.xml中的dispatchservlet后,js,css,都不能正常显示 web.xml配置文件 <!-- 核心控制器 --> <servlet> <ser ...
- UVA - 10384 The Wall Pusher（推门游戏）（IDA*）
题意:从起点出发,可向东南西北4个方向走,如果前面没有墙则可走:如果前面只有一堵墙,则可将墙向前推一格,其余情况不可推动,且不能推动游戏区域边界上的墙.问走出迷宫的最少步数,输出任意一个移动序列. 分 ...
- UVA - 557 Burger（汉堡）（dp+概率）
题意:有n个牛肉堡和n个鸡肉堡给2n个孩子吃.每个孩子在吃之前都要抛硬币,正面吃牛肉堡,反面吃鸡肉堡.如果剩下的所有汉堡都一样,则不用抛硬币.求最后两个孩子吃到相同汉堡的概率. 分析: 1.先求最后两 ...
- Maven:java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty
直接参考前面一篇文章中间介绍的第2种方法即可:Maven:sun.security.validator.ValidatorException: PKIX path building failed: s ...
- SQL中的LEFT/RIGHT/SUBSTRING函数
语法: LEFT(field,length) RIGHT(field,length)SUBSTRING(field,start,length) LEFT/RIGHT函数返回field最左边/最右边的l ...