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. querySlector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  2. UICollectionView 适配 iPhone 7 Plus

    UICollectionView 适配 iPhone 7 Plus 需求:在屏幕上水平放置 5 张正方形图片,每张图片的宽度相等,无缝隙排列铺满一个屏幕宽度. 看似很简单的需求.用 UICollect ...

  3. 将基因组数据分类并写出文件，python，awk，R data.table速度PK

    由于基因组数据过大,想进一步用R语言处理担心系统内存不够,因此想着将文件按染色体拆分,发现python,awk,R 语言都能够非常简单快捷的实现,那么速度是否有差距呢,因此在跑几个50G的大文件之前, ...

  4. 牛顿迭代法求开根号。 a^1/2_______Xn+1=1/2*(Xn+a/Xn)

    #include <stdio.h>#include <math.h>int main(void){ double a,x1=1.0,x2; printf("plea ...

  5. 谈谈在DevOps实践中，感觉最重要的这三个技术……

    从国内众多DevOps实践中,我们能看到下面三个技术尤其重要和火热: 容器:容器从根本上解决了软件对环境的依懒性,解决了各个环境之间的差异问题:它可以加速部署的速度,提高部署的效率:降低部署的成本.容 ...

  6. 《HelloGitHub》第12期

    <HelloGitHub>第12期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高质量 ...

  7. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...

  8. 老李分享：持续集成学好jenkins之Git和Maven配置 1

    老李分享:持续集成学好jenkins之Git和Maven配置   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  9. 手机自动化测试：appium源码分析之bootstrap三

    手机自动化测试:appium源码分析之bootstrap三   研究bootstrap源码,我们可以通过代码的结构,可以看出来appium的扩展思路和实现方式,从中可以添加我们自己要的功能,针对app ...

  10. Java集合总结系列2：Collection接口

    Collection 接口是 Java 集合类的一个根接口,Java 在 Collection 接口中定义了许多通用的数据操作类方法以及判断类方法. 通过查看 API 文档或源码的方式,我们可以了解到 ...