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. Java Swing客户端小项目

    记录一下两个用java swing写的客户端. 项目1: 关键词:swing  jtable 代码如下: 1.主类: package com.my.agent.client; import java. ...

  2. Linux 下安装 Memcached 和 PHP 开启 Memcached 扩展

    [项目背景]:阿里云ECS服务器,Linux(centos7.2 64位),环境部署使用的是阿里云一键安装包(LAMP)等 [项目需求]:linux安装memcached 和php开启Memcache ...

  3. Sass实战 sass官网

    Sass实战 sass官网 1.相关视频教程:http://pan.baidu.com/s/1eSl8bUa 1.1我的项目源码:http://pan.baidu.com/s/1dFmqbyp 1.2 ...

  4. 老李推荐：第2章4节《MonkeyRunner源码剖析》了解你的测试对象: NotePad窗口Activity之菜单简介

    老李推荐:第2章4节<MonkeyRunner源码剖析>了解你的测试对象: NotePad窗口Activity之菜单简介   NotePad窗口Activity之菜单简介 这里我们总共用到 ...

  5. android.util.Log常用方法

    android.util.Log常用的方法有以下5个: Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母分别对应VERBOSE,DEBUG,INFO, ...

  6. TextField和TextView

    本文概要 1.简介 2.介绍TextField控件 3.介绍TextView控件 4.键盘的打开和关闭 5.关闭和大开键盘的通知 6.键盘的种类 详情 1.简介 与Label一样,TextField和 ...

  7. UIDatePicker的使用

    UIDatePicker的介绍 UIDatePicker这个类的对象让用户可以在多个车轮上选择日期和时间.iPhone手机上的‘时钟’应用程序中的时间与闹铃中便使用了该控件.使用这个控件时,如果你能配 ...

  8. redux计算器

    //简单运用redux写了一个加减乘除功能 <!DOCTYPE html><html lang="en"><head> <meta cha ...

  9. 修改数据库用户名--CMD环境执行有效

    --CMD环境执行有效 --修改数据库用户名 select * from user$ where name='aa';   update user$ set name='bb' where name  ...

  10. 设计模式(三)—代理模式

    目录: 一.概述 二.静态代理 三.动态代理 四.静态代理和动态代理的区别 一.概述      代理模式就是多一个代理类出来,替原对象进行一些操作,比如我们在租房子的时候回去找中介,为什么呢?因为你对 ...