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. iOS开发之判断横竖屏切换

    /** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ ...

  2. iOS开发之URLSession

    1.概述 n  NSURLSession是iOS7中新的网络接口,与NSURLConnection是并列的. n  当程序在前台时,NSURLSession与NSURLConnection大部分可以互 ...

  3. Spark2.1.0分布式集群安装

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 1.2 Hadoop 参见博文:http://www.cnblogs ...

  4. echarts 各类图形小计

    通用  官网 1.提示框组件 效果: 代码: 配置项手册 2.工具框组件 效果: 代码: 配置项: 3.series系列列表 a)折线line 效果: 代码: if(serSets[v]){ //注释 ...

  5. Sublime Text前端开发环境配置

    Sublime Text是前端开发不可不说的编辑器,本文以Sublime Text 3为例讲解一下如何搭建前端的开发环境. 下载Sublime Text 3 下载地址 #==> Sublime ...

  6. zabbix 监控 tomcat jmx

    zabbix_server: zabbix_server.conf : # Add JavaGateway=127.0.0.1 JavaGatewayPort=10052 StartJavaPolle ...

  7. EntityFramework Core不得不注意的性能优化意外收获，你会用错？

    前言 这两天在着实研究EF Core项目当中对于一些查询也没实际去检测,于是想着利用放假时间去实际测试下,结果本文就出来了,too young,too simple,后续博主会从底层翻译表达式树弄起, ...

  8. 如何在IntelJ下用Maven创建一个Web项目

    相信一开始做Web项目的同学都是直接把项目包放在WEB-INF/lib目录下,然后就开始做项目了.但是之后接触了一些使用了Maven进行包管理的项目,我们就不得不学一学如何用Maven做包管理. 在网 ...

  9. CSS3选择器～一看吓一跳，这么多不会

    复习CSS时发现很多选择器不会,因为平时很少用到.现在干脆一不做二不修,全部温习一遍.本文参考http://css.doyoe.com/. 一.元素选择器 图片来自:http://css.doyoe. ...

  10. 使用Docker分分钟启动常用应用

    前言 Docker是目前比较火的一个概念,同时也是微服务中比较关键的一个容器化技术.但是,单从理论上好难看出Docker的优势,因此,我希望在这篇文章中提供一些Docker的使用示例,希望从实际应用上 ...