选择符就是一系列的模式,只要页面上有完全匹配这个模式的元素存在,样式就会自动应用到该元素上。比如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属性值只能赋值给唯一的元素。