CSS基础（三）选择器

1.关于选择器的理解

选择器，就是选择一个集合里面的元素，因为CSS的作用就是定义某个内容的样式，如果一个一个内容去定义，那就太麻烦了，提高效率的办法就是让一些样式的内容作为一个集合，给这个集合定义相同的样式

2.选择器的简单分类介绍

2.1单一的选择器

选择器分为很多种，首先是一些基本的选择器，用来统一地定义某种元素，或者某类，拥有某种属性的内容或者某个id的内容的样式

名称	举例	影响的范围
通配符选择器	*{样式}	所有元素的样式
元素选择器	h1{样式}	所有被<h1>包裹的内容
类选择器	.top{样式}	属性class=“top”的所有控件
id选择其	#age{样式}	属性id = “age”的元素
属性选择器	h1[name]{样式}	所有有name属性的h1的内容

还有一个比较特殊的用法，叫做选择器分组，意思是，上面的几种选择器如果样式都一样，可以用逗号隔开，放在一起作为一个组，就不用写那么多次了，比如：

h1,h2,h3{
	color:red;
}

它等价于：

h1{
	color:red;
}
h2{
	color:red;
}
h3{
	color:red;
}

下面对单一的选择器进行详细的介绍：

2.1.1.元素选择器

元素就是那种在html文件中带着尖括号的，比如<h1>,<h2>,<p>,<div>之类的，那么在css中定义的时候，没有前缀，直接写名字就完了，比如

body {
    background-color: white;
}
table{
	color:red;
}

2.1.2.类选择器

在html文件中，class=xxx的内容，在css文件中，在类名前面加一个点号就可以定义其样式了。比如想定义以下htm文件中类为“important”的这段内容

<p class="important">
This paragraph is a very important warning.
</p>

在css中可以这样写

.class {
	color:red;
}

2.1.3. id选择器

html文件中，id=xxx的内容，在css中可以用#xxx来定义它们的样式，比如

#navigation {
	color:red;
}

可以定义id为navigation的内容的样式
跟其他选择器不一样，在一个文件中，id选择器是一对一的，而且是唯一存在的，不允许有两个元素是同一个id，也不允许一个元素拥有两个id，而且它是大小写区分的

2.1.4. 属性选择器

属性选择器可以作用于拥有某个属性的元素，或者拥有某个属性且这个属性符合某种条件的元素，因为属性值可以有很多，很长一串，所一会涉及到匹配的问题，比如

语法	指定的内容
元素[ABC]{样式}	属性名为ABC的元素
元素[ABC=“abc”]{样式}	属性名为ABC，且属性值完全等于abc的元素
元素[ABC~=“abc”]{样式}	属性名为ABC，且属性值包含“abc”的元素
元素[ABC^=“abc”]{样式}	属性名为ABC，且属性值以abc开头的元素
元素[ABC$=“abc”]{样式}	属性名为ABC，且属性值以abc结尾的元素
元素[ABC*=“abc”]{样式}	属性名为ABC，且属性值能正则匹配上“abc”的元素
元素[ABC	=“abc”]{样式}

比如：

p[lang|="phone"]{
	color = "red";
}

这个规则匹配以"phone"开头或者以"phone-"开头的元素
注意当属性名为class的时候，可以直接用点，不用中括号也可以，也就是说，p.important 和 p[class=“important”] 是等价的。

2.2 复合的元素选择器

有了以上的选择器就很容易统一地定义一种元素的样式，但也有个问题，如果想在这些普通里面搞一点特别，就会有些棘手，接下来的选择器就为这样的操作提供了更多的可能，它们主要是通过嵌套或者突出来实现的

名称	举例	影响的范围
后代选择器	section（空格） .title{样式}	section块内的class=“title”的内容，可以是在里面很多层（孙子）
子元素选择器	section >.div{样式}	section块内的div子块的内容，只能是儿子不能是孙子
多类选择器	.section.title	选择同时是section和title类的元素
相邻兄弟选择器	h1+p{样式}	在h1元素后面出现的所有<p>元素，前提是h1和p都是同一个父亲里面的
伪类	a:hover{样式}	当鼠标停留在链接上时的样式
伪元素	p::firstline{样式}	段落中的第一行

下面将详细介绍符合的选择器

2.2.1.后代选择器

元素名和后代元素名之间用空格分离，比如section块里面的title类的元素：

section .title{

}

2.2.2.子元素选择器

Father>Son 中间空格可以随便写多少个都行，这个选择器和后代选择器的区别是，前者可以嵌套很多环，但是这里是直接的嵌套，也就是说不能是孙子，只能是儿子
举例：

table.company td>p

这个代表table标签里面，class属性为company的元素，它的后代中如果有td这个标签，且td中有个儿子p元素，那么这个p元素就被选择了

2.2.3.多类选择器

有些元素可以同时是a，b两类的，把它们写在一起，不加空格就可以表示显示同时是这两个类的元素，比如：一个特定的元素同时标记为重要（important）和警告（warning）

<p class="important warning">
This paragraph is a very important warning.
</p>

class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素会另外有一个银色的背景 。就可以写作：

 .important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

匹配的原则是按最长的匹配，比如

<p class="important warning urgent">
This paragraph is a very important warning.
</p>

2.2.4.相邻兄弟选择器

用加号连接的，用于定义这个加号后面的元素的样式，比如下面的代码定义选择紧接在 h1 元素后出现的段落，其中h1 和 p 元素拥有共同的父元素

h1 + p {margin-top:50px;}

再比如下面的代码选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

html > body table + ul {margin-top:20px;}

2.2.5.伪类选择器

用冒号来连接选择器以及选择器的状态，向某些选择器添加特殊状态的特殊效果
语法：选择器 : 伪类 {样式}
例如：

a:visited{color:red}--已经访问过的链接样式
a:link{color:blue}--未访问过的链接样式
a:hover{color:yellow}--当鼠标停留在链接上方样式
a:active{color:pink} --当鼠标点击链接的样式

这里的伪类于css的类可以配合使用，比如a.red可以作为选择器，选择class为red的a标签的样式

2.2.6. 伪元素

作用：向某些选择器设置特殊效果
语法：选择器：伪元素{样式}
比如

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

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

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

多重设置

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

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

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

伪类与伪元素的区别？

3.选择器和优先级

关于选择器的组合和优先级的问题，选择器是由很多种的，针对于不同的元素或者对象去定义，这就涉及到了优先级的问题，某一个控件同时是某个类，也拥有某个id，属于某种元素，这个时候应该怎么各种选择器的优先级，我总结到的规律是：越少的就约高级，比如id比class少，那么id比class更优先，class比元素少，那么class更加优先
这里总结一下：

普通选择器	优先级
id	3
class	2
元素	1

关于复合的选择器

内嵌元素	优先级（越高越优先）
子元素	2
后代元素	1
类	3

比如：

<div class="show">
    <h1 id="new" class="new">title</div>
</div>

A .show .new{color:red;}
B.#new{color:blue;}
C .show>h1{color:pink;}
D .new{color:yellow;}

这几个标签的优先级是：
B（id） > D（类） > C（子代） > A（后代）
特殊情况：有”！important“标签标明的是最重要的