一.CSS的七种选择器：
1.id选择器
2.class选择器(类选择器)
3.标签选择器(元素选择符、类型选择符)
4.后代选择器(包含选择器)
5.群组选择器
6.通用选择器(通配符)
7.伪类选择器
二.详细说明每种选择器的用法
1.id选择器
语法: < 标记 id = " id名 " > < / 标记 >
# id名 {属性：属性值 ; }
注：a) id命名要语义化,常见命名方法有：
1.驼峰命名法：id=“myName”
2.下划线链接命名法：id=" my_name"
b) id选择器优先级最高，不能出现同名
<style type="text/css">
#myName{
font-size:24px;
color:greenyellow;
}
</style>
<body>
<h3 id="myName">路人甲小码</h3>
</body>
2.class选择器(类选择器)
语法: < 标记 class = " class名 " > < / 标记 >
.class名 {属性：属性值 ; }
<style type="text/css">
.myName{
font-size:24px;
color:greenyellow;
}
</style>
<body>
<h3 class="myName">路人甲小码</h3>
<h3 class="myName">路人甲迷你码</h3>
</body>
注：a) 我们可以给具有相同样式的元素添加相同的class名
b) 当某个元素既具有与其它元素相同的样式,又具有自身特殊的样式时，使用类名词列表的方法，即：
语法：< h1 class = " yearOne yearTwo " > 2018年即将结束< / h1 >
.yearTwo {text-decoration：underline ; }
3.标签选择器(元素选择符、类型选择符)
语法: 标记名称 {属性：属性值 ; }
注：a)如果想改变某个元素的默认样式时，可以使用标签选择器
b) 当统一文档某个元素的显示效果时，可以使用标签选择器
<style type="text/css">
a{
text-decoration: none;
}
body{
font-family: "微软雅黑";
}
</style>
4.后代选择器(包含选择器)
语法：选择符1 选择符2{属性:属性值;}
注:只有满足选择符1和选择符2是包含与被包含关系时，才能使用后代选择器
<style type="text/css">
ul li{
color:red;
}
</style>
5.群组选择器
语法:选择符1 选择符2 选择符3{属性:属性值;}
<style type="text/css">
h1,h2,h3,h4,h5,h6{
font-size:14px;
font-weight: 100;
}
</style>
6.通用选择器(通配符)
语法:*{属性:属性值;}
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
7.伪类选择器
语法:选择符:hover{属性:属性值;}
注: a的四个状态
1）a:link 超链接的初始状态
2) a:visited 超链接访问过后的状态
3) a:hover 鼠标划过时的状态
4) a:active 鼠标按下时的状态
我们一般使用 a的简写方式：
a{ color:black;}
a:hover{ color:blue;}
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
