CSS选择器
2018-06-10 本文已影响0人
闫松林
1、基础选择器案例
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
</body>
</html>
2、类选择器案例
class + .className
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
</body>
</html>
3、id选择器
id+ #idName
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</div>
<div id="div5">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
</body>
</html>
4、层级选择器
div p{ }
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</p>
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
<p>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
</p>
</body>
</html>
5、属性选择器
input[type='text']{ }
标签[属性='属性值']{ }
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名；<input type="text" name="username"/><br />
密码：<input type="password" name="password"/>
</body>
</html>
