【css笔记(2)】如何给元素应用规则?
css选择器
在介绍之前我么你先来看看css大致分为几种选择器:
1.类型选择器(元素选择器)
2.后代选择器(元素的所有后代)
3.伪类(:active, :hover, :focus, :link, :visited, :first-child, :lang)
4.通用选择器(*)
5.子选择器(元素的直接后代)
6.相邻同胞选择器(同一父元素下该元素之后的某元素)
7.属性选择器
上面讲的太抽象?没事,举个例子,如下页面1.html结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.html</title>
<style>
#content div#main-content h2{
color: gray;
}
#content #main-content>h2{
color: blue;
}
body #content div[id="main-content"] h2{
color: green;
}
#main-content div.news-story h2{
color: orange;
}
#main-content [class="news-story"] h2{
color: yellow;
}
div#main-content div.news-story h2.first{
color: red;
}
</style>
</head>
<body>
<div id="content">
<div id="main-content">
<h2>Strange Times</h2>
<p>Here you can read bizarre news stories from around the globe</p>
<div class="news-story">
<h2 class="first">
Bog Snorkeling Champion Announced Today
</h2>
<p>
The 2008 Bog Snorkelinig Championship was won by Conor Murphy with an impressive time of 1 minute 38 seconds
</p>
</div>
</div>
</div>
</body>
</html>
则对应的选择器分别有:
1.类型选择器 div{color: red;}
2.后代选择器 #content div{background: #ccc;}
3.伪类 p:first-child{padding: 2px;}
4.通用选择器(*) *{margin:;}
5.子选择器 #content>div{font-size: 14px;}
6.相邻同胞选择器 h2 + p{width: 200px;}
7.属性选择器 div[id="content"]{border: 2px solid #fff;}
css层叠和特殊性
当某一元素应用多种css规则时元素选取那种样式呢?,css会通过层叠处理这种冲突.层叠会没每个规则赋予一个重要度,重要度高的规则会覆盖重要度低的规则.层叠采用以下重要度次序:
1.标有!important的用户样式
2.标有!important的作者(站点开发者)样式
3.作者(站点开发者)样式
4.用户样式
然后通过选择器的特殊性来决定规则的次序.如何计算特殊性?我们将选择器的特殊性由高到低分为4个等级.应用于下面四个规则:
1.a为行内样式(内联样式),若有则为1000,没有则为000,即a*1000
2.b为id选择器的数量乘100,即b*100
3.c为类,伪类和属性选择器的数量乘10,c*10
d为元素选择器和伪元素选择器的数量乘1,d*1
元素的特殊性值(w=a*1000+b*100+c*10+d)后选取特殊性值最大的应用元素
我们还以上面的1.html页面为例:
得到图中的表,所以应用样式后的页面在浏览器中显示为:
伪类和伪元素
在我刚学习的时候经常讲伪类和伪元素搞混,它们是不一样的.
伪类
|
:active |
向被激活的元素添加样式 |
|
:focus |
向拥有键盘输入焦点的元素添加样式 |
|
:hover |
当鼠标悬浮在元素上方时,向元素添加样式 |
|
:link |
向未被访问的链接添加样式 |
|
:visited |
向已被访问的链接添加样式 |
|
:first-child |
向元素的第一个子元素添加样式 |
|
:lang |
向带有指定lang属性的元素添加样式 |
这是伪元素
|
:first-letter |
向文本的第一个字母添加特殊样式表 |
|
:first-line |
向文本的首行添加样式 |
|
:before |
在元素之前添加内容 |
|
:after |
在元素之后添加内容 |
【css笔记(2)】如何给元素应用规则?的更多相关文章
- css笔记12：块元素和行内元素
1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...
- CSS笔记（一）CSS规则
CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素. CSS规则由两个主要的部分构成:选择器 + 一条或多条声明. 每条声明由一个属性和一个值构成. ...
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)
第7章 CSS构造块 1.在样式表中添加注释 /*内容*/ 2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...
- CSS before和after伪元素
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- thinkphp学习笔记10—看不懂的路由规则
原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...
- thinkphp学习笔记1—目录结构和命名规则
原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...
- CSS你所不知的伪元素的用法
你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5 CSS 有两个说不上常用的伪类 :before 和 :after, ...
随机推荐
- iOS开发之UIApplication和delegate
1.概述 所有的移动操作系统都有个致命的缺点:app很容易受到打扰.比如一个来电或者锁屏会导致app进入后台甚至被终止. 还有很多其它类似的情况会导致app受到干扰,在app受到干扰时,会产生一些系统 ...
- IOS各种手势操作实例
先看下效果 手势相关的介绍 IOS中手势操作一般是 UIGestureRecognizer 类的几个手势子类去实现,一般我们用到的手势就这么5种: 1.点击 UITapGestureRecogniz ...
- bash变量
bash中的变量的种类 根据变量的生效范围等标准 本地变量:生效范围为当前shell进程:对当前shell之外的其它shell进程,包括当前shell的子shell进程均无效: 环境变量:生效范围为当 ...
- iphone与安卓的兼容性问题汇总
1.日期问题 当使用yyyy-mm-dd格式时,iphone不认,安卓没问题 解决办法:new Date(res.data[i].inventoryDate.replace(/-/g, "/ ...
- 【C语言】模拟实现atoi函数
atoi(表示 ascii to integer)是把字符串转换成整型数的一个函数. atoi()函数会扫描参数 nptr字符串,跳过前面的空白字符(例如空格,tab缩进等,可以通过isspace( ...
- php调试之路
解析php中die(),exit(),return的区别 die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续 ...
- 关于WAMPserver配置httpd.conf无法修改根目录解决方法
最近在学习php开发, 在慕课网上先听了安装配置WAMP server的课,可是第二步配置网站根目录的地方就出错了,按照网课上讲的将httpd.conf文件中的 [Document] 和[Direct ...
- 设计模式(四)—观察者模式
一.概述 观察者模式类似于邮件订阅和RSS订阅,当我们浏览一些博客或wiki时,经常会看到RSS图标,就这的意思是,当你订阅了该文章,如果后续有更新,会及时通知你.其实,简单来讲就一句话:当 ...
- mysql视图 更新中的问题
mysql view 类型 mysql的视图有三种类型:merge.temptable.undefined.如果没有ALGORITHM子句,默认算法是UNDEFINED(未定义的). 算法会影响MyS ...
- Python：generator的send()方法流程分析
先来一个简单地例子: def foo(): print('starting') while True: r = yield 2 print(r) f = foo() print(f.send(None ...