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)】如何给元素应用规则?的更多相关文章

  1. css笔记12：块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  2. CSS笔记（一）CSS规则

    CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素. CSS规则由两个主要的部分构成:选择器 + 一条或多条声明. 每条声明由一个属性和一个值构成. ...

  3. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  4. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  5. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

  6. CSS before和after伪元素

    CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

  7. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  8. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  9. thinkphp学习笔记1—目录结构和命名规则

    原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...

  10. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

随机推荐

  1. centos安装python2.7并安装easy_install，pip，ipython

    1.安装python 下载python2.7.10 # wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz # tar -z ...

  2. 解决mac os下mcss命令报错：env: node\r: No such file or directory

    标题无“转载”即原创文章,版权所有.转载请注明来源:http://besteam.im/blogs/article/31/. 我一直对字符界面有抵触感,即使会用vim,我的linux脚本(python ...

  3. CI Weekly #16 | 从另一个角度看开发效率：flow.ci 数据统计功能上线

    很开心的告诉大家,flow.ci 数据统计功能已正式上线. 进入 flow.ci 控制台,点击「数据分析」按钮,你可以按照时间日期筛选,flow.ci 将多维度地展示「组织与项目」的构建数据指标与模型 ...

  4. 【Java基础 】Java7 NIO Files,Path 操作文件

    从Java1.0到1.3,我们在开发需要I/O支持的应用时,要面临以下问题: 没有数据缓冲区或通道的概念,开发人员要编程处理很多底层细节 I/O操作会被阻塞,扩展能力有限 所支持的字符集编码有限,需要 ...

  5. css简单实现火焰效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. JavaWeb之cookie

    什么叫做会话 ? 用户从打开一个浏览器开始,浏览器网站,到关闭浏览器的整个过程叫做一次会话! 每个用户与服务器进行交互的过程中,各自会有一些数据,程序要想办法保存每个用户的数据. 例如:用户点击超链接 ...

  7. 老李分享：Web Services 组件 1

    老李分享:Web Services 组件   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...

  8. 如何在IDEA中调试 Jar文件

    原创文章,转载请注明出处:http://www.cnblogs.com/acm-bingzi/p/6668333.html   问题: 一般情况下,可以打成Jar包的项目,它的源码运行Applicat ...

  9. 3.Java日志框架slf4j、jcl、jul、log4j1、log4j2、logback大总结

    一.slf4j.jcl.jul.log4j1.log4j2.logback JUL:JDK中的日志记录工具,也常称为JDKLog.jdk-logging. LOG4J1:一个具体的日志实现框架. LO ...

  10. 如何使用CocoaPods

    如何使用CocoaPods 1.进入主目录下 cd /Users/HYYT/Desktop/支付功能/微信支付宝集成/支付宝微信支付集成 2.建立Podfile(配置文件) 2.1  输入:vim P ...