1. 基本语法
selector1, selector2{
property1 : value1;
property2 : value2;
}
如果value大于1个单词(如font-family的值可能是sans serif), 需要加上引号(font-family:"sans serif")
2. 高级语法
继承效果
3. 派生选择器
依据 元素位置的 上下文关系 定义样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<p>
<strong>派生选择</strong>
</p>
</body>
</html>
//派生选择 标签从外到内用空格隔开
p strong{
color: aqua;
}
4. id 选择器
为标有 id 的元素 指定样式, 以 # 来定义
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<p id="pid">
<strong>派生选择</strong>
</p>
</body>
</html>
//id选择器用#表示, 上下文位置又是派生选择器, 两者一起使用
#pid strong{
color: aqua;
}
4. 类选择器
用.来表示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<p class="pclass">
<strong>派生选择</strong>
</p>
</body>
</html>
//类选择 和 派生选择 结合使用
.pclass strong{
color: aqua;
}
5. 属性选择器
时间： 2024-09-28 21:39:30