css选择器
1、id选择器
如以下程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">abcd</div>
</body>
</html>id选择器中，标签的id是唯一的，不允许重复
执行结果如下：
2、class选择器
一般使用class选择器，程序如下：
class选择器，class不仅限于一个标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">abcd</div>
<div class="c1">9876</div>
</body>
</html>3、div选择器
div标签中的内容显示该属性
<style>
div{
background-color: blue;
height: 48px;
}
</style>
<div id="i1">abcd</div>
<div class="c1">abcd</div>4、层级选择器
以空格分开，如下：
span div与.c1 div效果一样，都是将8888背景渲染
<style>
span div{
background-color: blue;
height: 48px;
}
.c1 div{
background-color: blue;
height: 48px;
}
</style>
<span class="c1">qwer<div>8888</div>tyui</span>5、组合选择器：
以逗号分开，如下：
</style>
.c1,.c2,.c3{
background-color: red;
height: 48px;
}
</style>
<div class="c1">efgh</div>
<div class="c2">ijk</div>
<div class="c3">lmn</div>这时三个div背景全是红色。
6、属性选择器：
input[属性]{渲染背景}
<style>
input[type=‘text‘]{ width:100px; height:200px; }
</style>
<input type="text" name="user"/>
或者
<style>
.c1[type=‘text’]{ width:100px; height:100px; }
</style>
<input class="c1" type="text" /> 相关推荐
jiedinghui 2020-10-25
葉無聞 2020-09-01
buttonChan 2020-08-02
drdrsky 2020-07-05
葉無聞 2020-07-05
opspider 2020-06-28
zhanghaibing00 2020-06-28
opspider 2020-06-26
somboy 2020-06-26
sdbxpjzq 2020-06-25
xiaohuli 2020-06-17
zhanghaibing00 2020-06-14
牵手白首 2020-06-14
teresalxm 2020-06-13
覆雪蓝枫 2020-06-09