css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。

元素选择器

格式：

元素名称{color: red;}

特例*,范围是所有标签

* { color: antiquewhite;}

举例

<div>
        <p>
            123456
        </p>
        <span>123456</span>
 </div>

div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

属性选择器

元素名称[标签]----元素名称Element 标签attribute 

举例

<div>sdfgs</div>
<div id="zz">123</div>
<div id="xxzz">123</div>
<div id="zzxxyy">456</div>
<div id="zzgg">456</div>

div[id] {
    color: red
}

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

“value 是完整单词” 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:

[attribute~=value] 属性中包含独立的单词为 value，例如：

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[attribute^=value] 属性的前几个字母是 value 就可以，例如：

[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

ID选择器

id选择器

格式：

#id属性值{color: red;}

例子：

<div id="name">hello css2</div>

#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

Class(类)选择器

类选择器

格式：

.class属性值{color: red;}

例子1：直接使用class的属性值选择

<div class="cls">hello css3</div>

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

例子2：使div的class属性被选择，p的class属性不被选择

<div class="cls">hello css3</div>
<p class="cls">hello css3</p>

div.cls {
    color: red;
}

包含选择器

selector1 selector2

只要包含内就可以，如div中的p和span标签都可以被选择

例子：选择包含在div下的class="nian"的标签

 <div class="nian">nian</div>
    <div>
        <div class="nian">nian1</div>
    </div>
    <div>
        <p class="nian">nian2</p>
    </div>

div .nian {
    color: red;
}

• 注意：div .nian和div.nian的区别，没有空格就是当代，即class为nian的div，加了空格为下一代，即包含在div下的class="nian"的标签
• 多个祖先可以通过空格区分，如.container ul li .nian,即找class="container"标签下的ul下的li下的class="nian"的标签

子选择器

一定要是父子关系的才可以

selector1>selector2

例子：

 <ul class="nianlist">
        <li>
            <a href="">一级菜单</a>
            <ul>
                <li><a href="">二级标签</a></li>
                <li><a href="">二级标签</a></li>
                <li><a href="">二级标签</a></li>
            </ul>
        </li>
        <li><a href="">一级菜单</a></li>
        <li><a href="">一级菜单</a></li>
        <li><a href="">一级菜单</a></li>
    </ul>

ul.nianlist>li>ul a {
    color: blue;
}

ul.nianlist>li>ul>a {
    color: blue;
}

图一，第一个css可以知道是class="nianlist"的ul下的li下的ul内的a标签被选中------选中部分为蓝色

图二，第二个css可以知道是class="nianlist"的ul下的li下的ul下的a标签被选中，但是class="nianlist"的ul下的li下的ul下没有a标签，在ul内部存在a标签，该a标签和ul标签不属于父子关系，子选择器不生效，无一选中。

兄弟选择器

同级向下找（不包括本身）

selector1~selector2

例子：把class="java"的li同级向下的标签选择

<ul class="nianlist">
        <li class="php">php</li>
        <li class="">nian</li>
        <li class="java">java</li>
        <li>nian</li>
        <li class="php">
            <a href="">php</a>
        </li>
        <li class="php">php</li>
        <li class="php">php</li>
    </ul>

.java~li {
    color: red;
}

如上图，a超链接的php没有被选择，因为a标签和class="java"的li不是同级，但是a标签的父标签li变红

选择器的组合

多个选择器一样的css样式用选择器的组合

selector,selector2

例子：让类选择器，元素选择器用一样的css样式

    <div></div>
    <p class="nian">nian</p>
    <a href="">nian</a>
    <p>nian</p>

div,
.nian,
a {
    color: red;
}

伪元素选择器

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

语法

伪元素的语法：

selector::pseudo-element {
  property: value;
}

类型

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 p元素中的首行添加样式：

实例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 p元素中文本的首字母格式：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 “float” 为 “none”）
• text-transform
• line-height
• float
• clear

伪元素和 CSS 类

伪元素可以与 CSS 类结合使用：

实例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

多个伪元素

也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS - ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个 h1 元素的内容之前插入一幅图像：

实例

h1::before {
  content: url(smiley.gif);
}

CSS - ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

下面的例子在每个 h1 元素的内容之后插入一幅图像：

实例

h1::after {
  content: url(smiley.gif);
}

CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline

下例使所选文本在黄色背景上显示为红色：

实例

::selection {
  color: red; 
  background: yellow;
}

伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

:hover伪类

在 div 元素上使用 :hover 伪类的实例：

实例

div:hover {
  background-color: blue;
}

:focus 伪类

实例

选择获得焦点的输入字段，并设置其样式：

input:focus
{ 
background-color:yellow;
}

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个p元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 p 元素：

实例

p:first-child {
  color: blue;
}

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang=“en” 的 元素定义引号：

实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>
e;
}

:focus 伪类

实例

选择获得焦点的输入字段，并设置其样式：

input:focus
{ 
background-color:yellow;
}

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 p 元素：

实例

p:first-child {
  color: blue;
}

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang=“en” 的 q 元素定义引号：

实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

CSS选择器优先级

工作中修改css样式时，是不是会经常遇到
写的css样式不生效
改这个地方结果别的地方样式也跟着一起变了
明明是一样的css代码为啥换个地方就不一样了
改了个标签结果把样式改乱了…
​

几乎所有的样式冲突、样式覆盖等问题都与css声明的优先级错位有关
​

那css优先级的计算规则是什么？
如何避免样式冲突、样式覆盖的问题呢
​

css选择器的基本概念

1 选择器、选择符、伪类、伪元素

1 选择器

标签选择器 div span p li …
类选择器
属性选择器
…

2 选择符

空格选择符	表示后代关系
>	表示父子关系
+	表示相邻兄弟关系
~	表示兄弟关系
双管道||	表示列关系

3 伪类
特征是前面会有一个冒号（:）,通常与浏览器行为和用户行为有关，例如

:hover 
:focus
:active 
:visited

4 伪元素
特征是前面会有两个冒号（::）,常见的有

::after
::before
::first-letter
::first-line

css选择器的优先级

css优先级有着明显不可逾越的优先级制度
​

css优先级规则

1 0级 通配选择器（*）、选择符 和 逻辑组合伪类
​

逻辑组合伪类，这些伪类并不影响优先级，起影响作用的是括号内的选择器
​

:not()
:is
:where

2 1级 标签选择器
​
3 2级 类选择器、属性选择器 和 伪类
​

.foo
[foo]
:hover

​
4 3级 ID选择器

#demo {}

5 4级 style 属性内联

<span style="color:#CCC">优先级</span>

6 5级 !important

!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置的无效对于其他场景，没有使用的理由，最好不用，用别的方案替代

CSS选择器优先级计算规则

数值计数法：每一段css语句的选择器都对应一个具体的数值，数值越大优先级越高，其中的css语句就优先被渲染。其中，出现一个0级对应的数值+0，1级选择器数值+1，2级选择器数值+10，3级选择器数值+100

ps 这里的10 不是说真的10个1级选择器的权重等于1个2级选择器，只是一个相对的概念。
但是在IE浏览器里256个1级选择器是会覆盖1个2级选择器的。

*			0	1 * 0
dialog			1	1 * 1
ul > li			2	2 * 1 + 1 * 0
li > ol + ol			3	3 * 1 + 2* 0
.foo			10	1 * 10
a:not([rel=nofollow])			11	1 + 1 *0 + 1 * 10
a:hover			11	1 + 1 * 10
ol li.foo			12	1 + 0 + 1 + 10
li.foo.bar			21	1 + 10 + 10
#foo			100	100
#foo .bar p			111	100 + 10 + 1

<html lang="zh-CN" >
 <body class="foo">我的颜色是？<body>
<html>

body.foo:not([dir]) { color:red }

html[lang] .foo {color:blue}

当css选择器的优先级数值一样的时候，后渲染的css选择器的优先级更高。并且这个后渲染是相当于整个文档流的，而不是单个的文件。

增加css优先级的小技巧

常见的增加优先级的方式是

• 增加嵌套 .father .foo 或者 增加一个标签选择器 div.foo
• 使用!mportant
• 使用id选择器

但这样做会出现的问题有
1 出现耦合，父子关系变化之后代码会无效
2 嵌套层级过深之后修改出来会非常的痛苦
3 换标签了样式也会失效
4 一用!important只要覆盖就得同样用

小技巧
1 叠加自身 .foo.foo
2 叠加属性选择器 .foo[class]

css选择器的命名

面向属性的类名

定义

选择器的命名是跟着具体的css样式走的，与项目、模块、页面统统没有关系。比如

 .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
  
  
  .dn {display:none}
  .db {display:block}
  .df {display:flex}
  .tl {text-align:center}

使用场景

细枝末节、特殊场景的微调可以使用面向属性的命名

.keydata-top-list .keydata-top-item .noLink:hover {
    cursor: default;
}

.cur-def {
   cursor: default;
}

面向语义的命名

根据元素所处的上下文命名。比如 .header .title .desc

	优点	缺点
面向属性的类名	重用性高，方便快捷	适用场景优先
面向语义的命名	灵活丰富，应用场景广泛	代码笨重，效率一般

命名的小技巧

1 从HTML标签中找灵感

header body aside section main nav footer content detail

.my-header
.my-body
.my-aside

2 从HTML特定的属性中找灵感

checkbox radio email number color time url

3 css伪类和HTML布尔属性作为状态管理类名，比如
.active 来自于 :active
.disable 来自于 :disable
.selected 来自于HTML的selected属性
.checked
.invalid

我们一般的用法是在状态类属性下面写当前状态下的样式，但这样会造成一个后果就是代码容易造成代码冲突，所以状态类名下最好不要有css样式，就当成一个状态标识符来用，让其跟其他类名组合使用

.my-content {

}

.active.my-content {

}

css选择器使用的最佳实践

命名

1 使用小写，使用英文单词或者缩写，专有名词可以使用拼音，例如 maoyan
不建议使用驼峰，驼峰命名建议留给js使用

2 命名组合，以短横线混合使用，组合个数不超过5个

.evaluation-card-info-detail-grid-title

3 设置统一前缀，强调品牌同时避免样式冲突
​

选择器类型的使用

1 不要使用id选择器

因为id选择器的优先级太高了，并且和JavaScript耦合，实在要用可以使用属性选择器[id=“foo”]

2 不要嵌套选择器 ，不使用标签选择器，建议使用无嵌套的纯类名选择器

a 渲染性能糟糕
​
CSS选择器是从左往右进行匹配渲染的，.box div 是先匹配的页面上所有的div，再匹配的.box类名元素，如果页面上内容丰富、HTML的结构又比较复杂的话，就会产生明显的渲染性能问题
​
b 优先级混乱

.project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a
​
如果想要覆盖这段样式的方法，只有
1 写在这段代码后面
2 以更多的嵌套覆盖
3 使用id选择器
4 使用!important

c 样式布局脆弱
​
.project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a

HTML里不用a标签了，那这段样式就失效了，一般大家改的时候不大会记得还需要改css的，改css也得去css文件里找到；或者HTML的结构变了，删除了某个层级，就增加了查找问题和修改问题的时间

一、CSS的概述

        CSS的使用方式：4种
                1.行内式样式css设置
                    在标签中有一个属性可以设置css样式
                    style = ""
                2.嵌入式样式css设置
                    借助所谓的css选择器进行设置
                    选择器：做记号。
                        ID选择器、class类选择器、元素选择器
                    语法：必须放在head头部中而且需要使用style标签包裹。
                
                3.外部式引入css设置
                    （1）创建一个css文件来存储所有的css代码
                    （2）在指定的网页中通过link标签在head头部中引入即可
         
                4.导包式引入css设置
                    必须在head中编写style标签
                    利用import标记实现url导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 嵌入式css样式设置，必须要用style标签包裹 -->
		<style type="text/css">
			/* 导包式 */
			@import url("css/importstyle.css");
			/* 根据标签上的记号找到指定的标签进行相关样式设置 */
			#sb{
				/* 设置背景颜色 */
				background-color: yellow;
			}
		</style>
		<!-- 外部式引入css文件  通过link标记 -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<!-- 
			CSS:层叠式样式表，作用：美化HTML标签。
			因为HTML标签自带的属性比较少，而且有些属性不兼容
			可以利用CSS解决这些问题。
			
			CSS的使用方式：4种
				1.行内式样式css设置
					在标签中有一个属性可以设置css样式
					style = ""
				2.嵌入式样式css设置
					借助所谓的css选择器进行设置
					选择器：做记号。
						ID选择器、class类选择器、元素选择器
					语法：必须放在head头部中而且需要使用style标签包裹。
				
				3.外部式引入css设置
					（1）创建一个css文件来存储所有的css代码
					（2）在指定的网页中通过link标签在head头部中引入即可
		 
				4.导包式引入css设置
					必须在head中编写style标签
					利用import标记实现url导入
		 -->
		<h2 id="sb" color = "red">我是标题2</h2>
		<h2 style="color: red;">我是通过css设置的标题2</h2>
		
		<p id="pid">我是段落标签，我需要通过外部式引入来设置背景颜色</p>
	
		<div id="oDiv">
			天天向上，好好学习
		</div>
	
	
	</body>
</html>

二、CSS使用方式 

        1.认识CSS样式
                    CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。

                    CSS:层叠式样式表，作用：美化HTML标签。
            因为HTML标签自带的属性比较少，而且有些属性不兼容
            可以利用CSS解决这些问题。

        2.CSS代码语法
                    CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下：
    p{color:blue}

        3.CSS注释代码
                    /* 代码注释 */

        4.CSS样式的位置及相关的优先级
                    4.1 内联式CSS样式：直接写在现有的html标签中
                    4.2 嵌入式CSS样式：写在当前的文件中，一般位于head标签内
                    4.3 外部式CSS样式：写在单独的一个文件中（.css）<link>标签引入
                    4.4 三种方式的优先级：内联式>嵌入式>外部式

        5.CSS选择器
                    5.1 什么是选择器？
                            每一条css样式定义由两部分组成，形式如下：
                            选择器{样式;}

                    5.2 标签选择器、类选择器、ID选择器（最常用的三种选择器）
                            标签选择器：标签{}
                            类选择器：.class{}
                           id选择器：#id{}  同一个网页中只允许一个id

                    5.3 其它选择器：子选择器（>），包含（后代选择器）(空格)
    通用选择器（*）、伪类选择器(a:hover)、分组选择器(标签,标签)

        6.CSS格式化排版
                    6.1 文字排版--字体  font-family  宋体、微软雅黑
                    6.2 文字排版--字号、颜色   font-size   color
                    6.3 文字排版--粗体  font-weight
                    6.4 文字排版--斜体  font-style
                    6.5 文字排版--下划线 text-decoration:underline
                    6.6 文字排版--删除线 text-decoration:line-through
                    6.7 文字排版--缩进  text-indent:2em    em代表文字的2倍大小
                    6.8 文字排版--行间距(行高)  line-height
                    6.9 文字排版--中文字间距、字母间距 letter-spacing
                    6.10 文字排版--对齐 text-align

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				/* 去掉下划线 */
				text-decoration: none;
			}
		/* 字体设置 */
			#p1{
				/* 设置字体的大小 */
				font-size: 50px;
				/* font属性：复合属性，同时可以设置多个值 */
				/* 颜色设置 */
				color: red;
				/* 加粗 */
				font-weight: bold;
				/* 下划线 */
				text-decoration: underline;
				/* 对齐方式 */
				text-align: center;
				/* 首行缩进指定的像素单位值 */
				/* text-indent: 120px; */
				/* line-height */
				/* 设置边框线 */
				border:  1px solid red;
				height: 200px;
				/* 利用line-height设置行高垂直居中  必须与高度一致 */
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
		<hr>
		<p id="p1">我用双手成就你的梦想</p>
		<p>面对疾风吧</p>
		<p>你买单我就来</p>
		<p>死亡如风，常伴吾身</p>
		<p>你的剑就是我的剑</p>
		
	</body>
</html>

        7.CSS背景（background）
                    background （缩写形式）
                    background-color（背景色 ）
                    background-image（背景图 ）
                    background-repeat（背景图重复方式 ）
                    background-position（位置坐标、偏移量）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#oDiv{
				border: 1px solid red;/*边框线*/
				width: 500px;
				height: 300px;
				/* 背景图片设置 */
				/* background-image: url(img/R-C.jpg); */
				/* 设置图片平铺 */
				/* background-repeat: repeat-x; */
				/* background-repeat: repeat-y; */
				background-repeat: no-repeat;
				/* 图片定位 */
				background-position: -300px,-50%;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- 背景设置background -->
		
		<div id="oDiv"></div>
		
		
		
		
		
	</body>
</html>

        8.CSS列表（ul、ol）
                    list-style
                    list-style-image

        9.盒模型
                    9.1 元素分类
                            在布局前，了解：html标签元素分为三种类型：块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置
    
                    9.2 常用的块状元素有：独占一行，元素的高度、宽度、行高以及顶和底边距都可设置
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

                    9.3 常用的内联元素有：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置
        <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

                    9.4 常用的内联块状元素有：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置
        <img>、<input>

                    9.5 什么盒子模型？（月饼例子）块状元素都具有盒子模型的特定
    由margin、padding、border、content组成

二、CSS选择器:

Selectors 选择符	CSS Version 版本	Compatibility 兼容性	Syntax Samples 语法	Description 简介
类型选择符(Type Selectors)	CSS1	IE4+ , NS4+	E1	以文档语言对象类型作为选择符
通配选择符(Universal Selector)	CSS2	NONE	*	选定文档目录树（DOM）中的所有类型的单一对象
包含选择符(Descendant Selectors)	CSS1	IE4+ , NS4+	E1 E2	选择所有被E1包含的E2。即E1.contains(E2)==true
子对象选择符(Child Selectors)	CSS2	NONE	E1 > E2	选择所有作为E1子对象的E2
相邻选择符(Adjacent Sibling Selectors)	CSS2	NONE	E1 + E2	选择紧贴在对象E1之后的所有E2对象
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr]	选择具有attr属性的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr=value]	选择具有attr属性且属性值等于value的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr~=value]	选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr|=value]	选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
ID选择符(ID Selectors)	CSS1	IE4+ , NS4+	#sID	以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择
类选择符(Class Selectors)	CSS1	IE4+ , NS4+	E1.className	在HTML中可以使用此种选择符。其效果等同于E1[class~=className]
选择符分组(Grouping)	CSS1	IE4+ , NS4+	E1,E2,E3	将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组

        选择器的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#a1{
				/* background-color: red; */
			}
			/* 元素选择器 */
			li{
				/* background-color: yellow; */
			}
			.s1{
				/* background-color: blue; */
			}
			/* 通配选择器 */
			*{
				/* background-color: green; */
			}
			/* 子代选择器  根据指定的父标签指定子标签 */
			 ol>li{
				 /* background-color: red; */
			 }
			 /* 后代选择器  空格 */
			 ol li{
				 background-color: yellow;
			 }
		</style>
		
		<!-- 
			JavaScript代码
		<script type="text/javascript">
			window.onload = function(){
				var result = document.getElementById('a1');
				alert(result.innerHTML);
			};
		</script> -->
	</head>
	<body>
		<!-- 
			css选择器
				其实就是一个标记，为了设置css代码方便查找到指定的标签
				
			ID选择器      在标签上必须设置id属性 通过style标签（行内式样式设置）+#可以设置
				id选择器是唯一的，一个html网页中不能出现相同的id属性值，否则就会覆盖
					样式可以一样，但是获取值会优选选中第一个
			
			
			
			类选择器      在标签上必须设置class属性 通过style标签（行内式样式设置）+.可以设置
				class选择器的值可以重复
			元素选择器
				标签本身，可以通过元素选择器为标签上所有相同的标签设置一样的样式。
				
				
				css属性样式设置的语法
					属性名:属性值;
					
				结合选择器设置css属性设置的完整语法
					选择器{
						属性名:属性值;
					}
		 
		 
		 -->
		 
		 <ol>
		 	<li id="a1">123</li>
		 	<li></li>
		 	<li></li>
		 	<li class="s1"></li>
		 	<li></li>
			<ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
				<li>item5</li>
			</ul>
		 	<li class="s1"></li>
		 	<li></li>
		 	<li></li>
		 	<li></li>
		 	<li id="a1">456</li>
		 </ol> 
		 
	</body>
</html>

        选择器的作用：能够更快的设置样式。