CSS 全称层叠样式表,用于设计网页的样式
元素选择器
通过标签选中需要设置样式的元素
语法：
- 标签名{ }
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
h1{
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>类选择器
通过类名选中需要设置样式的元素
语法：
- 点+类名{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.test{
color:red;
}
</style>
</head>
<body>
<!-- 给h1标签设置一个类名为test -->
<h1 class="test">hello world</h1>
</body>
</html>id选择器
通过id名选中需要设置样式的元素
语法：
- 井号+id名{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#test{
color: red;
}
/* 类选择器和ID选择器区别：
多个标签可以用同一个类名 */
</style>
</head>
<body>
<h1 id="test">hello world</h1>
</body>
</html>通配符选择器
可以选中所有的元素
语法：
- *{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通配符选择器：找到所有元素 */
*{
color: red;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>hello p</p>
<a href="">hello a</a>
</body>
</html>层级选择器
可以更准确的选中想修饰的某个元素
语法：
- 选择器1+空格+选择器2{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层级选择器</title>
<style>
.box1 h1{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h1>hello world</h1>
<h2>hello world</h2>
</div>
<div class="box2">
<h1>hello world</h1>
</div>
</body>
</html>组合选择器
语法：
- 选择器1+ 英文逗号 +选择器2{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组合选择器</title>
<style>
.box1 h1,.box1 h2{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h1>hello h1</h1>
<h2>hello h2</h2>
</div>
<div class="box2">
<h1>hello world</h1>
</div>
</body>
</html>伪类选择器
语法：
- 选择器：hover{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 用处：当鼠标悬停到按钮上，显示其他颜色 */
.btn:hover{
background-color:grey;
}
</style>
</head>
<body>
<input class="btn" type="button" value="按钮">
</body>
</html>伪元素选择器
可以在元素内容的前面/后面增加内容
语法：
- 选择器::before{ }
- 选择器::after{ }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
h1::before{
/* 文本内容 */
content: "123";
}
h1::after{
content: "456";
}
/* CSS2:伪类选择器和伪元素选择器都是一个冒号
CSS3:让伪元素选择器增加了一个冒号 */
/* 浏览器对CSS2和CSS3兼容 */
.line::before,.line::after{
content:"----";
color: greenyellow;
}
</style>
</head>
<body>
<h1>hello world</h1>
<h2 class="line">hello world</h2>
<h3 class="line">hello world</h3>
<p class="line">这是一个段落。</p>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122911.html
