CSS介绍&选择器&选择器优先级
CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
CSS语法
'''
selector {
property: value;
property: value;
... property: value
}
'''
示例：
h1 {color:red; font-size:14px;}
CSS注释
/* 注释内容 */
CSS的四种引入样式
1.行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.链接式
将一个.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，
使用的语法如下：
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
选择器
基本选择器
1.标签选择器
p {color: "red";}
2.ID选择器
#i1 {background-color: red;} # 用"#"号开头
3.class选择器
.c1 { font-size: 14px;} # 所有class="c1"的标签 "." 开头,用于大批量添加样式
p.c1 { color: red;} # 所有class="c1"的 指定(此例子P)标签
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
4.通配选择器
* { color: white;} # (通常用于设置页面默认样式)
层级选择器
1. E F 后代元素选择器，匹配所有属于E元素后代(子子孙孙)的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
-------------------------------------------------------------------------------------------------------------------------------------
2. E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }
-------------------------------------------------------------------------------------------------------------------------------------
3. E + F 毗邻元素选择器，匹配紧随E元素之后的同级元素F :div + p { color:#f00; }
-------------------------------------------------------------------------------------------------------------------------------------
4. E ~ F 普通兄弟选择器,后面所有的（以波纹号分隔） :.div1 ~ p{font-size: 30px; }
-------------------------------------------------------------------------------------------------------------------------------------
5. E , F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔,减少重复代码 :div,p { color:#f00; }
-------------------------------------------------------------------------------------------------------------------------------------
属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
-------------------------------------------------------------------------------------------------------------------------------------
E[att = val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
-------------------------------------------------------------------------------------------------------------------------------------
E[att ~= val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; } #完全匹配一整个单词
-------------------------------------------------------------------------------------------------------------------------------------
E[att |= val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; } #完全匹配一整个单词 or 单词后面有"-"连字符(name-xyz)
-------------------------------------------------------------------------------------------------------------------------------------
E[attr ^= val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
-------------------------------------------------------------------------------------------------------------------------------------
E[attr $= val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
-------------------------------------------------------------------------------------------------------------------------------------
E[attr *= val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
-------------------------------------------------------------------------------------------------------------------------------------
伪类选择器
伪类选择器 : 伪类指的是标签的不同状态
anchor伪类：专用于控制链接的显示效果
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } # 鼠标点击链接一瞬间的时候的颜色等
去下划线: text-decoration: none
focus伪类
:focus选择器用于选择具有焦点的元素。
提示: :focus选择器接受键盘事件或其他用户输入的元素。
input:focus
{
background-color:yellow; # 输入框颜色变成黄色
}
before after 伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
# 最常用的地方是 父级塌陷现象!
选择器优先级
CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
比如：
div{ border:1px solid #222}
<div>
hello
<p>xyp</p>
</div>
css选择器优先级
1. 继承优先级最低 (我如果没有设置自己的样式,默认用祖先的样式)
2. 权重:
1.不讲道理的!important
2.内联样式(写在标签里的style属性) 1000
3.ID选择器 100
4.class类选择器 10
5.标签选择器 1
6.继承的 (0)没有权重计算,可以认为权重是0
3.重名的样式,后加载的覆盖先加载的
例如:
a {color: red;}
a {color: blue;}
第2个css样式会把第1个覆盖掉,变成blue
权重比较规则:
1、文内的样式优先级为1000，所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
important：
span { color: ren!important; }
知道有这个就行了,除非万不得已,不建议使用,特定情况可以使用
CSS介绍&选择器&选择器优先级的更多相关文章
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载：详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 前端之CSS介绍--选择器
一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...
随机推荐
- 关于setTimeout和Promise执行顺序问题
先看一段代码 console.log('打印'+1); setTimeout(function(){ console.log('打印'+2); }) new Promise(function(reso ...
- cordova安装方法
安装cordova之前需要先安装node.js和npm 然后在命令行运行:npm install -g cordova即可安装到最新版本的cordova 如果要安装指定版本,命令为:npm insta ...
- FPGA内部RAM的初始化
Altera的RAM初始化文件格式是mif和hex. QuartusII自带的RAM初始化工具很方便产生初始化文件. Xilinx的RAM初始化文件格式是coe, 在vivado中软件会将coe文件变 ...
- Java练习题00
问题: 将一个数字与数组中的元素比较, 如果该数字存在数组中,给出该数字在数组中的位置: 如果该数字不在数组中,给出提示. 代码: public class Page84{ public ...
- SEO 第二章
SEO第二章 1. 掌握搜索引擎工作原理(重点) 2. 了解百度算法 3. 关键词的分类 一.什么是搜索引擎? 搜索引擎是用来实现搜索服务的,说白了搜索引擎也属于一种网站. 浏览器是用来加载网站 ...
- 命令终端执行python
windows进入cmd 1.进入cmd窗口,找到存放py文件的地址(如E:\learn_mock) 2.退出python,输入exit() linux下一样
- Java代理模式精讲之静态代理，动态代理，CGLib代理
代理(Proxy)是一种设计模式,通俗的讲就是通过别人达到自己不可告人的目的(玩笑). 如图: 代理模式的关键点是:代理对象与目标对象.代理对象是对目标对象的扩展,并会调用目标对象 这三个代理模式,就 ...
- PHP09 字符串和正则表达式
学习要点 字符串处理简介 常用的字符串输出函数 常用的字符串格式化函数 字符串比较函数 正则表达式简介 正则表达式语法规则 与perl兼容的正则表达式函数 字符串处理介绍 Web开发中字符串处理 ...
- IntelliJ IDEA使用eclipse compiler(ecj)解决lombok编译问题
1:为什么要使用在idea使用eclipse compiler(ecj)? 因为idea默认使用javac,而javac当在编译时发现一个编译错误就直接停止编译了.而ecj支持proceed on e ...
- 从零实现一个http服务器
我始终觉得,天生的出身很重要,但后天的努力更加重要,所以如今的很多“科班”往往不如后天努力的“非科班”.所以,我们需要重新给“专业”和“专家”下一个定义:所谓专业,就是别人搞你不搞,这就是你的“专业” ...