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.通用选择 ...
随机推荐
- Web安全常见问题及解决方法
关于Web安全,我们最早听到最多的就是SQL注入.例如用户在系统登录界面输入用户名和密码,提交以后,后端直接拿到数据就拼接SQL语句去查询数据库.如果在输入时进行了恶意的SQL拼装,那么最后生成的SQ ...
- jenkins 最新版 搭建
jenkins 中文网:https://jenkins.io/zh/ 点击下载:https://jenkins.io/zh/download/ 然后选择对应的安装环境,我的CentOS 7.6: 有外 ...
- Scanner类的next()方法和nextLine()方法的区别(简)
1. 空白符:回车.空格.tab等 2. next()方法读取到空白符就结束 3. nextLine()方法读取到回车结束,也就是 "\r"
- 解决Spring Mvc中接受参数绑定重名的方法
html页面 <form method='post' action='url'> 用户名 <input type='text' name='name'> 用户id <in ...
- HDU - 4112 Break the Chocolate（规律）
题意:有一块n*m*k的巧克力,最终需要切成n*m*k个1*1*1的块,问用以下两种方法最少掰多少次能达到目的: 1.用手掰:每次只能拿出一块来掰:2.用刀切:可以把很多已经分开的块摞在一起一刀切下来 ...
- 【shell】常用shell脚本
1.检查主机存活状态 #!/bin/bash IP_LIST="192.168.18.1 192.168.1.1 192.168.18.2" for IP in $IP_LIST; ...
- 微信公众号开发之内网映射外网natapp安装（一）
一,为什么使用natapp 1,在进行微信公众号开发时,我们需要搭建网站,并且随时都有可能修改网站内容进行调试.如果能够将内网ip映射到外网上,将大大方便我们的调试.每次发布只需eclipse运行应用 ...
- 二十五、CI框架URL辅助函数之base_url函数
一.在UI根目录新建一个pic目录,里面放一个图片,如下 二.在我们打View里面写入一下代码,base_ur函数返回的是网站根目录,代码见附图: 三.两种写法,显示效果如下: 四.我们查看浏览器的源 ...
- 浪潮服务器raid5-echo转义说明
https://jingyan.baidu.com/article/4ae03de3e4c8d33eff9e6bee.html https://wenku.baidu.com/view/3c5dc9a ...
- POJ 3911：Internet Service Providers
Internet Service Providers Time Limit: 2MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I ...