一.选择器
- 简单选择器
- id选择器
唯一,只能调用一次,前缀是#,一般配合JS。项目中使用最多的是类选择器
- class类选择器
类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头,一个标签可以有多个类名且类名可以重复,类名之间以空格隔开,一个类选择器可以同时选中多个标签
<html>
<head>
<style>
/*.类名表示将以该类名命名的所有标签应用此样式*/
.hometown
{
background-color:yellow;
}
.newtown
{
font-size:22PX;
}
/*标签.类名表示将以该类名命名的P标签应用此样式,中间不需要空格*/
p.home
{
background-color:red;
}
/*层叠问题上:当样式冲突时,运行时,以最后一个设置的样式为准*/
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p class="hometown newtown">该P标签应用.hometown样式和newtown样式</p>
<div class="hometown">该div标签也应用.hometown样式</div>
<p>我是米老鼠。</p>
<p class="home">我也住在 Duckburg。</p>
</body>
</html>
<!--id,class是可以同时存在的-->
- *通配符:选择所有元素
一般用于去除标签默认的margin、padding
- 并集选择器:通过逗号连接,同理,可以添加以id或class作为选择器。可以将该css样式运用到多个标签。举例:
<style>
p, div {
color:blue;
font:italic 700 18px '微软雅黑'
}
</style>
<p>标签选择器</p>
<div>标签选择器</div>
网友评论