【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, ...
随机推荐
- 线程同步synchronized，Class与Object
synchronized (class):class类的同步,同步的时候会同步整个class 与 synchronized (Object):Object的同步,只对其中的对象同步 如下:对类B中的同 ...
- Tcl与Design Compiler （九）——综合后的形式验证
本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 这里来讲一下forma ...
- XJOI1689相连的城市
相连的城市 n个城市中,某些城市间有道路互相连接.给出与每个城市相邻的城市有多少个,请输出城市间的邻接矩阵. 输入格式: 第一行输入一个正整数n,表示城市的个数. 第二行输入n个用空格隔开的非负整数, ...
- 微信小程序评分功能
很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3. ...
- php 1到100累加 新方法
<?php $sum = 0; for($i=0;$i<=100;$i++){ $sum += $i; } echo $sum; 之前只是这么写. 现在发现可以这么写 $sum = arr ...
- 【转】DHCP的请求过程
首先你得清楚DHCP的请求过程:1.client向server发送请求,发向广播地址2.server向client回应一个IP,发向单播地址3.client向server回应一个确认,发向广播地址,表 ...
- SpringMVC基础学习(二)—开发Handler
一.Handler开发 Handler的开发方式在springmvc中有多种,下面我们主要讲解三种实现方式:实现Controller接口.实现HttpRequestHandler接口. ...
- matlab实现可调节占空比的方波
我大概讲一下实现的原理:正弦波移相φ,当使得大于sin(φ)的值为1,其他值为-1,占空比就跟这个φ值之间有联系. 占空比原理图如下所示. 结果上图,可以实现调节占空比,方波频率,方波个数. 下面是函 ...
- Oracle dual表的用途
dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sele ...
- Web前端相关资源
Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...