-、css选择器的分类:
二、常用选择器详解:
1、标签选择器:
语法:
标签名 {
属性:属性值;
}
代码示例:
h1 {
color: #ccc;
font-size: 28px;
}
2、类选择器:
语法:
.类名 {
属性:属性值;
}
代码示例:
.top {
margin-top:25px;
}
<div class="top"></div>
3、id选择器:
语法:
#ID名称 {
属性:属性值;
}
代码示例:
#top {
padding-top:10px;
}
<div id="top"></div>
注意:ID属性是唯一标识。
4、伪类
语法:
元素:伪类 {
属性:属性值;
}
代码示例:
a:link {
color:blue;
}
5、并集选择器:
语法:
标签名,.类名,#ID名称 {
属性:属性值;
}
代码示例:
p,.top,#title {
color:red;
}
6、后代选择器:
语法:
p span {
属性:属性值;
}
三、通用选择器详解:
语法:
*{
属性:属性值;
}
四、高级选择器详解:
1、子选择器:
代码示例:
#nav>li {
padding-left: 20px;
}
2、相邻同胞选择器:
代码示例:
h2+p {
font-size: 1.4em;
}
3、属性选择器:
代码示例:
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}
a[rel="nofollow"] {
padding-right: 20px;
}
五、样式的优先级(权重):
基本选择器之间:ID选择器〉类选择器〉标签选择器
样式表之间: 行内样式〉内嵌样式〉外部样式
css样式之间: 同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明