基本选择器
元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style type="text/css">
div{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>、
<style type="text/css">
.div2{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<!-- class可以同时赋予多个相同的 -->
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
</body>
</html>
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#div5{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<!-- 尽量保证id唯一 虽然能够实现，但是不是id设计的初衷 -->
<div id="div5">
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
</body>
</html>
其他选择器
层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style type="text/css">
div p{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</p>
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: gray;
}
</style>
</head>
<body>
用户名：<input type="text" name="username" />
密码：<input type="password" name="password" />
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
