CSS 学习之一 选择符

CSS 学习之一 选择符

选择符就是一系列的模式，只要页面上有完全匹配这个模式的元素存在，样式就会自动应用到该元素上。比如P,h1等就是一个简单的元素。

Css语法：
一个简单的选择符包含一个通用的选择符或是一个类型选择符，它的后面跟有0个或者多个id选择符、属性选择符或者伪类，三者顺序可以任意。

一个选择符可以由一个或者多个简单的选择符构成，中间用连接符相隔。

连接符可以是(空白，大于号> 加号+)

基本的选择符：

1 通用的选择符

* {
background-color : red ;
}

* .title {
border : 1px solid ;
}

.title {

border : 1px solid ;
}

类型选择符：(一般为html元素的名称)

h1 {
font-size : 9em ;
color : #999FFF ;
}

p {
margin : 0 ;
border : 2px solid ;
}

组选择：

h1 {
font-size : 10px ;
color : #999 ;
}

h2 {
font-size : 10px ;
color : #999 ;
}

p#title {
font-size : 10px ;
color : #999 ;
}

#hutitle {
font-size : 10px ;
color : #999 ;
}

上面的可以用以下组选择符来代替(中间用（，）来区分)

h1,h2,p#title,#hutitle {
font-size : 10px ;
color : #999 ;
}

id(#) 和 class(.) 选择符

1 id 选择符
id 是唯一的，可以唯一的标识一个元素。

< h1  id ="h1Title" > 开学通知 </ h1 >
< p  id ="pContent" > 请同学们先到教务处来报道 </ p >
< h1  id ="h2Title" > 开课通知 </ h1 >
< p  id ="p2Content" > 好好学习Css </ h2 >

h1#h1title {
color : white ;
background-color : silver ;
}
p#pContent {
color : yellor ;
background-color : maroon ;
}

只改变特定的元素。

class 选择符

class属性不要求唯一而id属性要求唯一，多个元素可以共享一个class的值，而且多个元素可以设置多个class的值.

< h1  id ="h1Title"  class ="h1Title" > 开学通知 </ h1 >
< p  id ="pContent"  class ="pContent" > 请同学们先到教务处来报道 </ p >
< h1  id ="h2Title"  class ="h2Title" > 开课通知 </ h1 >
< p  id ="p2Content"  class ="pContent" > 好好学习Css </ h2 >
< p >每天学习一章节，早点把css学会 </ h2 >

h1.h1Title {
color : white ;
background-color : silver ;
}
p.pContent {
color : yellor ;
background-color : maroon ;
}

h1.h2Title {
color : red ;
}

多重class
id 属性是唯一的，class属性是多对多的关系，同一个class也可赋给多个元素，一个html可以有多个相同的class。

< a  href ="class1 class2"  href ="/" > 链接 </ a >

a.class1 {
font-size : 12px ;
}
a.class2 {
color : red ;
}

上面这种css会对所有属于class1或者class2的a元素进行作用，而如果只对同时对class1 class2的a元素有作用只能是下面的方式

a.class1.class2 {
color : red ;
}
或者

a.class2.class1 {
color : red ;
}

是选择class还是选择id?

如果是给任意数量、任意类型的元素指定class属性，而一个id属性值只能赋值给唯一的元素。