目录
1、标签选择器
特点:可以选择所有相同的标签,不能差异化选择。
<head>
<style>
/* 标签选择器 : 写上标签名 */
标签名 {
属性1: 属性值1;
属性2: 属性值2;
···
}
/* 例子 */
div {
color: pink;
}
</style>
</head>
<body>
<div>标签选择器</div>
</body>
2、类选择器
特点:可以根据需求选择一个或多个标签。
<head>
<style>
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.类名 {
属性1: 属性值1;
属性2:属性值2;
···
}
/* 例子 */
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">类选择器</li>
</ul>
</body>
3、id选择器
特点:元素的id值是唯一的,只能对应于文档中某一个具体的元素。
<head>
<style>
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
#id名 {
属性1:属性值1;
属性2:属性值2;
···
}
/* 例子 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">id选择器</div>
</body>
4、通配符选择器
特点:通配符选择器用*
号表示,*
就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
<head>
<style>
* {
属性1:属性值1;
属性2:属性值2;
···
}
/* 例子 */
* {
color: red;
}
/* * 这里把 div span 标签都改为了红色 */
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
</style>
</head>
<body>
<div>通配符选择器</div>
<span>通配符选择器</span>
</body>