【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, ...
随机推荐
- NMF和SVD在推荐系统中的应用（实战）
本文以NMF和经典SVD为例,讲一讲矩阵分解在推荐系统中的应用. 数据 item\user Ben Tom John Fred item 1 5 5 0 5 item 2 5 0 3 4 item 3 ...
- 手机自动化测试：appium源码分析之bootstrap一
手机自动化测试:appium源码分析之bootstrap一 前言: poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.popte ...
- 使用cocapods报错 [!] Your Podfile has had smart quotes sanitised. To avoid issues in the future, you should not use TextEdit for editing it. If you are not using TextEdit, you should turn off smart quotes
从github上下载的工程大部分都使用了cocapods,在install的时候可能会报错. 报错原因: 1.不要使用文本编辑去编辑Podfile文件,使用Xcode编辑,或者使用终端敲命令去编辑. ...
- JS中遍历语法的比较
for循环 JavaScript 提供多种遍历语法.最原始的写法就是for循环.(假设myArray是数组,下面同理) let arr = [1,2,3,4,5]; for (var index = ...
- less补充函数
1.ceil():向上取整2.floor():向下取整3.percentage():将浮点数转换成百分比3.round():四舍五入4.sqrt():平方根5.abs():绝对值6.pow():乘方运 ...
- 谱聚类（Spectral clustering）分析（1）
作者:桂. 时间:2017-04-13 19:14:48 链接:http://www.cnblogs.com/xingshansi/p/6702174.html 声明:本文大部分内容来自:刘建平Pi ...
- 百度Web前端面试经历
今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官 ...
- mpusher 源码编译 for windows X64
mpusher 源码编译 for windows X64 对于java我是小白,通过一步步的摸索,将经验总结下来,给更多码友提供入门的帮助.一个人的摸索是很困难的,本教程感谢 [MPush开源消息推送 ...
- C++小技巧之CONTAINING_RECORD
CONTAINING_RECORD Containing record是一个在C++编程中用处很大的一种技巧,它的功能为已知结构体或类的某一成员.对象中该成员的地址以及这一结构体名或类名,从而得到该对 ...
- TomCat杀进程
有时候当你的tomcat启动时会发现 因为报以下的错误: "Several ports ( 8080, 8009) required by Tomcat v6.0 Server at loc ...