1.标签选择器：控制整体。

使用标签选择器，只需要输入标签的名称即可。

2.类选择器：精确控制。

假如你要指定一些相同的元素拥有不同的样式，可以给元素添加不同的类名，然后用类选择器来应用对应的样式。

任何使用类选择器呢？以下几点需要注意：

（1）所有类选择器的名称都必须以一个原点开头，如  .class 这个类。

（2）CSS只允许在类名称中使用字母、数字、连字符（-）、下划线（_）。

类选择器可以帮助你实现高度精确的设计变更。例如在网页中的<h2>标题设置样式，让该样式只用于某个<h2>标签，代码如下：

.special{ color：#FF0000;

font-family:”Monotype Corsiva”;

}

（3）圆点之后，名称必须以字母开头。

（4）类名区分大小写。

3.ID选择器：控制特殊的网页元素。

ID选择器的使用方法与类选择器类似，不同的是类选择器名称前是圆点，ID选择器名称前是#，并且ID选择器不能同名，

4.给标签组定义样式：

有时候网页需要能将同一种样式应用到不同元素的方法。一种方法是给每一个标题分别创建一种样式，但这种方法太过繁琐；第二种方法是使用群组选择器。

5.构建群组选择器：使多个选择器成为一个群，只需要创建一个用逗号分隔的选择器列表即可。假设要让所有的标题标签都设置成同一个颜色，可以创建如下代码：

h1, h2, h3, h4, h5, h6{ color: #red; }

6.通用选择器（ * ）：给几个不同的网页元素应用相同的样式属性时，除了可以考虑用群组选择器作为快捷的方法之外还可以考虑使用通用选择器（ * ）。*号是选择每一个标签的通用选择器的标志。

假设网页上所有的标签都要以粗体显示，这个群组选择器看起来是这样：

a, p, img, h1, h2, h3,......{ font-weight: bold; }

使用通用选择器方式为：

*{ font-weight: bold; }

7.如何给标签内的标签定义样式呢？CSS有一种东西叫：派生选择器。

派生选择器允许你根据它与其他标签之间的关系来给标签设置样式。

8. 在理解派生选择器之前先来理解一下一组嵌套的标签中各个标签的关系。

（1）祖先标签：当一个标签涵盖了另一个标签时，这个标签就是另一标签的祖先。

（2）派生标签：处在一个或多个标签内部的标签就是派生标签。

（3）父标签：父标签是离另一个标签最近的祖先。

（4）子标签：直接被另一个标签包围的标签就是子标签。

（5）同胞标签：同一个标签的子标签被称为同胞标签。

9.现在来看一看如何创建派生选择器吧。

假如你要给<h1>标签中的某个字显示为其他颜色。可以这样写代码：

h1 strong { color: red; }

这样color只会影响到h1标签中的strong标签里面的内容，而不会影响其他h1标签和strong标签。这就是派生选择器的写法。派生选择器可以包含两个以上的元素。

派生选择器常用于格式化代码模块。

10.伪类和伪元素：

有时候你需要选择本身没有标签，但任然易于识别的网页的部位，比如段落首行或鼠标滑到过的链接。CSS提供了一些选择器：伪类和伪元素。

（1）给链接定义样式：有4个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态之一。

a: link 是指访问者还没有访问到、鼠标也尚未滑过或单击过的所有链接，这是正常的、未访问过的网页链接。

a: visited是指依据Web浏览器的历史记录，访问者之前已经单击过的链接。

a: hover 让你在访问者的鼠标滑过链接时改变该链接的展现效果。如果想应用于特定类，只需要创建一个名为 .highlight: hover的样式即可。

a: active 让你决定当访问者单击时链接的展现效果。

（2）给段落定义样式：CSS提供了两个伪元素：first-letter和：first-line。：first-letter可以创建下落的首字母，或者首字母大写。：first-line可以用一种不同的颜色定义段落的首行。

（3）更多的伪类和伪元素：

：focus  与：hover极为相似。：focus是在访问者执行某些动作时起作用（如单击或tab键），：hover是在访问者的鼠标经过时起作用。例如，下面的样式是给访问者单击或跳格进入的任意文本框添加一种浅黄色：

input：focus{ background-color：#FFFFCC; }

：before可以在指定的元素前添加内容。例如：假设要将“HOT TIP”放在某些段落之前可以这么做：

首先，创建一个类< p class=”tip”>然后，把消息文本添加到样式表中：p.tip:before{content:”HOT TIP”;}每当浏览器遇到P标签中的.tip类时，都会忠实的在该段落前插入文本“HTO TIP!”用这个选择器添加文本的技术叫做“创造内容”。

：after 是与：before相对的，在文本后面添加内容。

：：selection 这个选择器是针对访问者已经在网页上选中的项目。例如，如果想让被选中的文本变成白色并且带有紫色背景可以使用如下样式：

：：selection{

color：#FFFFFF；

background-color：#993366；

}

该选择器只能设置color与background-color这两个属性。注意这个选择器是双冒号。

11.属性选择器：属性选择器可以挑选带有特殊属性的标签。例如：下面是如何使用title属性选择所有<img>标签的方法：

img[title]

选择器 a[href^=”http://”] 中 ^= 表示以…开始，这个选择器的意义是应用样式于所有以 “http://”开头的链接。相对的，a [href$=”.pdf”] 中 $= 表示以…结尾，它的意义是应用样式于所有以.pdf结尾的文档。

还有一种img[src*=”headshot”]表示选择src属性中带有“headshot”一词的所有图片。

12.子选择器：用子选择器可以给另一个标签的子标签设置样式。例如：选择body>h1 将选择<body>标签子标签中的所有<h1>标签。

：first-child伪元素能够让你只选择和格式化该元素中的第一个字标签。例如，选择第一个<h1>标签，可以创建一个这样的选择器：h1:first-child 。相对的，：last-child选择最后一个子标签。例如，为了给一个列表中的最后一个项目设置样式，可以使用ul li :last-child。nth-child是一个复杂但是非常有用的选择器。可以将表格隔行设置不同样式。这个选择器要用一个值来确定要选择哪一个子元素。最容易的方法是使用一个关键字：odd或even，它可以帮助你选择其他的奇数或者偶元素。例如，给一个表格中的每一个偶数行设置一种背景颜色，给每一个奇数行设置另一种背景颜色，可以像下面这样编写：

tr:nth-child(odd) { background-color: #D9F0FF; }

tr:nth-child(even){ background-color: #FFFFFF; }

又假设你要在一个行中，从第二个表格单元开始，每三个表格单元就高亮显示一次，下面就是实现这种效果的一个样式：tr td:nth-child(3n+2) { background-color:#900;}

在n之前的数字，基本上就是表示你想要哪一个子元素。因此，3n就表示每三个元素，4n就是表示；每四个元素。+后面再跟一个数字表示从第几个子元素开始。

13.子类型选择器：

（1）：first-of-type 与：first-child类似。假设一个sidebar元素，它的一个类名sidebar。为了给这个侧边栏的第一个段落定义样式，就可以使用这个选择器：

.sidebar p:first-of-type  （p 表示你想要进行格式化的标签）

（2）：last-of-type 与：last-child类似。想要给侧边栏的最后一个段落定义样式可以这么写

. sidebar  p:last-of-type    （这个类型选择器必须是一个特殊标签的子标签）

（3）：nth-of-type 这个选择器的作用与：nth-child（）相似，只不过它应用于具有特定标签的交替子标签。假设你想要让那些图片交替地向左浮动和向右浮动，就可以用下面的两个样式来完成：

img:nth-of-type(odd) { float: left; }

img:nth-of-type(even) { float: right; }

14.同胞选择器：相邻同胞选择器用（+）把一个元素与下一个元素连接起来。

同胞组合选择器用（~）把这个类型中的所有同胞标签都选中。

15. ：not()选择器，也被称作否定伪类，可以帮助你选择不是其他东西的某件东西。例如： p: not( .classy){ color: blue; } 表示除了classy类的段落之外的所有段落的文本颜色都变成蓝色。：not()选择器具有以下局限性：

（1）用：not()选择器只能使用简单的选择器。

（2）不能使用派生选择器、伪类元素、群组选择器或其组合。

（3）不能使用多个:not()选择器。

CSS3秘笈：第三章的更多相关文章

  1. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  2. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  3. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  4. CSS3秘笈第三版涵盖HTML5学习笔记13~17章

    第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...

  5. CSS3秘笈：第九章

    1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接.正被单击的链接.这些状态的4个对应伪类选择器分别是:link.:visited.:hove ...

  6. CSS3秘笈：第一章

    1.<div>和<span>标签: <div>和<span>标签:就像是一个空的容器,我们要往里面填充内容.一个div就是一个块,意味着它的前后都要空一 ...

  7. CSS3秘笈：第二章

    1.一个样式由两个元素组成:浏览器对其设置格式的网页元素(选择器,selector)和实际的格式化指令(声明块,declaration block). 2.简单的样式也包含了以下几个元素: (1)Se ...

  8. CSS3秘笈复习：第一章&第二章&第三章

    第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@i ...

  9. CSS3秘笈复习：第六章

    第六章 1.文本大写化: text-transform:uppercase; 另外三种选项是:lowercase或capitalize以及none. 2.文本修饰: text-decoration:u ...

随机推荐

  1. jq小demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. hadoop集群免密码登陆

    今天用openstack的dashboard创建了5个instance,现在的工作就是让它们可以相互访问. 1个namenode,4个datanode. 总体思路:有namenode产生公钥和密钥,传 ...

  3. HDU猜数字

    G - 猜数字 Time Limit:10000MS       Memory Limit:32768KB       64bit IO Format:%I64d & %I64u Descri ...

  4. js字符串函数 [http://www.cnblogs.com/qfb620/archive/2011/07/28/2119799.html]

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  5. PostgreSQL 类型转换 -除法

    PostgreSQL 类型转换 类似Oracle ,PostgreSQL也有强大的类型转换函数, 下面仅举两个类型转换例子. --1 例子 postgres=# select 1/4;  ?colum ...

  6. gRPC编码初探（java）

    背景:gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众 ...

  7. js--事件对象的理解5-

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js实例--js滚动条缓慢滚动到顶部

    收集篇(已测)-- <html><head> <script type="text/javascript"> var currentPositi ...

  9. windows下9款一键快速搭建PHP本地运行环境的好工具(含php7.0环境)

    推荐几款一键快速搭建PHP本地运行环境的好工具(含php7.0及apache,nigix,mysql) 首推phpstudy2016和wampServer3.0.6     理由支持php7.0 目前 ...

  10. ggplot2 geom设置—散点图

    散点图也是目前R中的常用的图形之一 geom_point(mapping = NULL, data = NULL, stat = "identity", position = &q ...