HTML之CSS选择符

CSS选择符：
类型选择符：类型选择符就是网页元素本身，定义时直接使用元素名称
body{
/*定义页面属性*/
}
div{
width:774px;/*把所有的div元素定义为宽度为774像素*/
}

id选择符：它是唯一的，不同元素的id值是不能重复的，id选择符为每个元素的具体对象定义不同的样式，方便用户更加精细的控制页面。使用id选择器时要先为每个元素定义一个id属性
<div id= "top"></div>
使用id选择器是，需要使用到#进行标识：
#top{
width:774px;/*定义id为top元素宽度为774像素*/
}

class选择符：在一个文档中可以为不同类型的元素定义相同的类名，class可以实现把相同样式的元素统一为一类;使用class选择器时要先为每个元素定义一个class属性：
<div class = "red"></div>
<span class = "red"></span>
<p class = "red"></p>
使用class选择器时，需要使用英文.(点)进行标识：
.red{
color:red;
}

通用选择符：是一种特殊的选择符，它用*符号表示，是一个实用但又容易忽略的选择符。
*{
font-size:12pt;/*定义文档中所有字体大小为12pt*/
}

分组选择符：分组选择符不是一种选择符类型，而是一种选择符方法。当多个对象定义了相同的样式时，我们可以把他们分为一组。这样能简化代码读写eg:
.class1{
font-size:13px;
color:red;
text-decraotian:underline;
}
.class2{
font-size:13px;
color:blue;
text-decroation:underline;
}
可以分组为：
.class1,class2{
font-size:13px;
text-decroation:underline;
}
.class1{
color:red;
}
.class2{
color:blue;
}
使用分组有二个原则：1.方便原则2.就近原则（如果几个元素相邻，在一个模块内可以考虑使用分组选择符）

包含选择符：最有用的一类选择符，它能够简化代码，实现大范围的样式控制eg
.div1 h2{
/*定义类div1层中所有h2的标题样式*/
font-size:18px;
}
.div1 p{
/*定义类div1层中所有p的标题样式*/
font-size:12px;
}

元素指定选择符：有时候我们希望控制某种元素在一定范围内对象的样式，这时可以把class或id选择符结合起来使用eg:
span.red{
/*定义span元素中class为red的元素颜色为红色*/
color:red;
}
div#top{
/*定义div元素中id为top的元素宽度为100%*/
width:100%;
}
eg:
<div>
<h2 class="news"><h2>
<p class ="news"></p>
<span class="news"></span>
</div>
在上面代码中要使用news选择符很显然不行，直接使用P，h2类型选择符也不太好这时变可以使用元素指定选择符
p.news{}h2.news{}span.news{}
子对象选择符：与元素选择符一样都是限制选择符，即在一定元素范围内定义符合限制条件的元素样式，元素指定选择符是用class和id属性做为限制条件
#main > table{/*定义id为main的主体模块中子对象table的样式*/
width:788px;
font-size:12px;
}
#main > .title{/*定义id为main的主体模块中子对象的class为title的样式*/
color:red;
font-style:italic;
}
属性选择符：属性选择符是在元素后面加一个中括号，中括号中列出各种属性，或者表达式，属性选择符存在7种具体形式：
1.存在属性匹配：通过匹配存在的属性来控制元素的样式，一般把要匹配的属性包含在中括号中，只列举姓名便不赋值
h1[class]{
color:red;/*作用任何带class属性的h1元素 不管class的值是什么*/
}
img[alt]{
border:none;/*作用任何带alt属性的img元素 不管alt的值是什么*/
}
a[href][title]{
font-weight:bold;/*作用同时带href和title属性的a元素*/
}
2.精准属性匹配：只有当属性值完全匹配指定的属性值时才会应用样式,id和class选择器实际上就是精准属性选择器
a[href = " www.163.com"][title="网易"]{
font-size:12px;/*作用地址指向 www.163.com并且title提示字样为"网易"的a元素*/
}
3.空白分隔匹配：通过为属性定义字符串列表，然后只要匹配其中任意一个字符串即可控制元素样式
<span class = "a b c">谁来控制我的样式</span>
可以使用下面样式来控制：
[class^="a"]{
color:red;
}或：
[class^="a"]{
color:red;
}或：
[class^="b"]{
color:red;
}或：
[class^="c"]{
color:red;
}或：
span[class^="c"]{
color:red;
}
4.连字符匹配：与空白匹配的功能和用法都相同，但是连字符匹配中的字符串列表中用连字符进行分割
<span class = "a-b-c">谁来控制我的样式</span>
可以使用下面样式来控制：
[class|="a"]{
color:red;
}或：
[class|="a"]{
color:red;
}或：
[class|="b"]{
color:red;
}或：
[class|="c"]{
color:red;
}或：
span[class|="c"]{
color:red;
}
5.前缀选择符：只要属性值的开始字符匹配指定字符串，即可对元素应用样式。前缀匹配使用[^=]形式来实现
<div class = "myTest">前缀匹配</div>
可使用如下样式控制
[class ^="my"]{
color:red;
}
6.后缀匹配：与前缀相反，只要属性值的结尾字符匹配指定字符，使用[$=]形式控制
<div class = "myTest">后缀匹配</div>
可使用如下样式控制
[class $="Test"]{
color:red;
}
7.子字符串匹配：只要属性值中存在指定字符串即应用样式，使用[*=]形式控制
<div class = "myTest">后缀匹配</div>
可使用如下样式控制
[class *="est"]{
color:red;
}
相邻选择符：就是指元素相邻的下一个元素：
div+p{
font-size:24px;/*作用所有紧贴div元素之后的p元素，定义p元素的字体大小为14px*/
}
eg:
<div id = "wrap">
<div id = "sub_wrap">
<h1 class = "news"></h1>
<p class = "news"></p>
</div>
<p></p>
</div>
要单独控制最下的p元素除非为他定义一个class和id属性如果使用使用相邻选择符就可以做到
#sub_wrap+p{
font-size:14px;
}