宗策

导航

CSS选择器的应用整合

 脚本：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /* 
    
1. 修改b字体为橙色
2. 修改s1、s2、div3字体为绿色
3. 修改提交按钮背景为蓝色
4. 修改s5背景为黄色
5. 修改s1、s2、s3背景为黄色
6. 修改s4和s5字体为蓝色
7. 修改b、s4和s6背景色为绿色
    
     */
     #h3b{
         color: orange;
     }
     .c1{
         color: red;
     }
     input[type='submit']{
         background-color: green;
     }
     div>div>span{
         background-color: purple;
     }
     body>span{
         background-color: yellow;
     }
     #d1 span{
         color: blue;
     }
     body>div>span,#hb{
         background-color: green;
     }
</style>
</head>
<body>
<h3>a</h3><h3 id="h3b">b</h3>
<div>div1</div>
<div>div2</div>
<div class="c1">div3</div>
<span class="c1">s1</span>
<span class="c1">s2</span>
<span>s3</span>
<div id="d1">
    <span>s4</span>
    <div>
        <span>s5</span>
    </div>
</div>
<div>
    <span>s6</span>
</div>
<input type="button" 
        value="按钮">
<input type="submit" >


</body>
</html>
View Code

 页面展示：

Insert title here

a

b

div1
div2
div3

s1 s2 s3

s4
s5
s6

posted on 2020-04-28 17:23  宗策  阅读(171)  评论(0)  编辑  收藏  举报