让你懂得css3六 多类名选择器
2019-10-22 本文已影响0人
朴客
多类名选择器
在我们实际开发时，我们使用类名不仅仅是一个（两个及两个以上最为常用）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fontsize70 {
font-size:70px;
}
.red {
color:red;
}
.fontweight {
font-weight:bold;
}
</style>
</head>
<body>
<div class="fontsize70 red">html样式</div>
<div class="fpntweight fontsize70">css样式</div>
<div class="red fontweight">JavaScript样式</div>
</body>
</html>
这样会使得添加样式更加的随意，更方便。
ps
要注意class后面的两个类名要空格写，切不能再多加一个class
类名的顺序不做要求，怎样方便怎样写。
id选择器
id
选择器跟类选择器效果一样，只是写的方式不一样
只需注意“#”号还有要将“class”要改成“id”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#big {
color:red;
}
</style>
</head>
<body>
<div id="big">html样式</div>
</html>
所以可以把类选择器和id选择器一起记忆
id选择器和类选择器的区别
1.类选择器可以多次使用，类似于人名
2.id选择器类似于身份证，是唯一的，只允许使用一次
通配符选择器：格式如下
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
是所有选择器用途范围最广的，能匹配页面中所有图标
但是在实际工作时很少用
伪类选择器
伪类选择器用于为某些选择器添加特殊效果
比如 :link{ };
- link /* 未访问的链接 */
- visited /* 已访问的链接*/
- hover /* 鼠标移动到链接上*/
- active /* 选定的链接*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a:link { /* 未访问的链接 */
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited { /* 已访问的链接 我们已经点击过一次的状态*/
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover { /* 鼠标移动到链接上 */
font-size: 16px;
color: red;
font-weight: 700;
}
a:active { /* 选定的链接 当我们点击别松开鼠标 显示的状态*/
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="css样式" >css样式 </a>
</body>
</html>
四个顺序尽量不要颠倒，按照lvha记忆lovehate爱上讨厌
但是在实际开发中只需要hover即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a { /* a是标签选择器 所有的链接 */
font-weight:700;
font-size:17px;
color:gray;
}
a:hover{ /* ：hover链接伪类选择器 鼠标经过*/
color:red;
}
</style>
</head>
<body>
<div>
<a href="css样式" >css样式 </a>
</body>
</html>
