HTML练习题2

作者: 精彩i人生 | 来源:发表于2018-06-03 18:03 被阅读0次

作业答案：
1.plate 元素选择器
2.bento 元素选择器
3.#fancy id选择器
4.plate apple 后代选择器
5.#fancy pickle 交集选择器
6..small 类选择器
7.bento .small,plate .small 并集选择器
8.bento orange.small 交集选择器
9.bento,plate 并集选择器
10.* 通配选择器
11.plate * 交集通配选择器
12.plate+apple 兄弟选择器（后边一个元素）
13.bento ~ pickle 兄弟选择器（后边所有元素）
14.plate > apple 子元素选择器
15.plate :first-child 子元素选择器（为第一个子元素）
16.apple,plate pickle 并集选择器
only-child 选择父元素只包含一个同类型子元素
17.apple,pickle 并集选择器
18.plate:nth-child(3) 子元素选择器（为指定位置的子元素）
19.bento:first-of-type 子元素选择器（为bento标签第一个子元素）
20.apple:first-of-type 子元素选择器（为apple标签第一个子元素）
21.plate:nth-of-type 子元素选择器（为plate标签偶数子元素）
22.plate:nth-child(2n+3) 子元素选择器（选择第2n+3个plate元素）【公式2n+3中n是计数器（从0开始）3是偏移值】
apple:only-of-type 选择父元素只包含一个同类型子元素，且包含apple元素
24.orange:last-of-type,apple:last-of-type 子元素选择器（选择最后一个标签）| 并集选择器
25.bento:empty 选择bento标签没有子元素的元素
26.apple:not(.small) 子元素选择器（否定伪类）

1

    <!DOCTYPE html>
    <html>
<head>
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="../1-day/相对路径.html"/>
    */
    <meta charset="utf-8" />
    <!--
        style标签  内部样式表
    
    <style type="text/css">p{
        color: red;
        font-size: 40px
    }</style>
    -->
</head>
<body>
    <!--
        style   内联样式
    -->
    <p style="color:red;font-size:40px;">xxxxxxxxxxxx</p>
    <p>xxxxxxxx</p>

</body>
    </htmml>

2

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>否定伪类</title>
    <style type="text/css">
        p:not(.www):not(#p1) {
            background-color: red
        }
    </style>
        
</head>
<body>
    <span>cccccc</span>
    <p>cccccc</p>
    <p class="www">cccccc</p>
    <p id="p1">cccccc</p>
    <p>cccccc</p>
    <div>
        <p>cccccc</p>
    </div>
</body>
    </htmml>

3

    <!DOCTYPE html>
    <html>
<head>
    <title>开发工具</title>
    <style type="text/css">/*h1{color: purple;}</style>
    <meta charset="utf-8" />
</head>
<body>
        <!--块元素
            独占一行
            div 跑
            内联元素-->

        <div style="background-color: red;width: 200px">wwww</div>
        <div style="background-color: yellow;width: 200px">wwww</div>

    <hr>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>
</body>
    </htmml>

4

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>属性选择器</title>
    <style type="text/css">
        /*[属性名]选取含有指定属性的元素*/
        /*p[title]{
            background-color: red
        }*/
        /*选取含有指定属性的元素进行设置*/
        /*p[title="wwwww"]{
            background-color: blue
        }*/
        /*给属性值以开头为er开头的元素进行设置
        [属性名^="属性值"] 选取属性值以指定内容开头*/
        /*p[title^="er"]{
            background-color: yellow
        }*/
        /*以某某结尾*/
        /*p[title$="c"]{
            background-color: green
        }*/
        /*包含*/
        /*p[title*="c"]{
            background-color: red
        }*/
    </style>
    
</head>
<body>
    <p title="erwwwww">cccccccc</p>
    <p title="mmmmmc">fffffff</p>
    <p title="ernnnnn">aaaaaaa</p>
    <p title="xxxxxc">vvvvvvvv</p>
</body>
    </htmml>

5

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>a的伪类</title>
    <style type="text/css">
        a:link{
            color: red
        }
        a:visited{
            color: blue
        }
        a:hover{
            color: green
        }
        a:active{
            color: yellow
        }
    </style>
        
</head>
<body>
    <span>cccccc</span>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <div>
        <p>cccccc</p>
    </div>
</body>
    </htmml>

6

    <!DOCTYPE html>
    <html>
<head>
    <title>伪类选择器</title>
    <style type="text/css">
        a:link{
            color: red;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: yellow
        }
        a:active{
            color: blue
        }
        /* 设为焦点时背景颜色设置 */
        input:focus{
            background-color: blue
        }
        /*选中的内容变色*/
        /*适合大部分浏览器*/
        p::selection{
            background-color: orange
        }
        /*兼容火狐浏览器的*/
        p::-moz-selection{
            background-color: orange
        }
    </style>
    <meta charset="utf-8" />
    <!--   
        :link   表示没访问过的链接
        :visited    表示访问过的链接
        :hover   表示鼠标移入状态
        :active   表示点击状态
    -->
</head>
<body>
    <a class="www" href="http://www.baidu.com">访问过的链接</a>
    <br><br>
    <a class="aaa" href="http://www.baidu11111.com">未访问过的链接</a>
    <br><br>
    <!-- 创建一个文本输入框 -->
    <input type="text" name="">
</body>
    </htmml>

7

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>伪元素</title>
    <style type="text/css">
        /*首字母设置特殊模式*/
        /*p:first-letter{
            color: red
        }*/
        /*第一行的语句设置特殊模式*/
        /*p:first-line{
            background-color: green
        }*/
        /*表示元素最前面的部分*/
        p:before{
            content:"vvvvvvvv";
            color: blue;
        }
        /*表示元素最后面的部分*/
        p:after{
            content: "wwwww";
            color: orange
        }
    </style>
    
</head>
<body>
    <p>hello,nice to meet you!</p>
</body>
    </htmml>

8

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>兄弟元素选择器</title>
    <style type="text/css">
        /*选择span下一行的元素设置背景*/
        /*span + p{
            background-color: red
        }*/
        /*从span开始后面的所有p元素都算在内*/
        /*span ~ p{
            background-color: red
        }*/
        
    </style>
        
</head>
<body>
    <span>cccccc</span>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <div>
        <p>cccccc</p>
    </div>
</body>
    </htmml>

9

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>选择器的优先级</title>
    <style type="text/css">
        /*内联样式 1000
        id选择器 100
        类和伪类 10
        元素选择器 1
        通配 0
        继承 没有优先*/

        .p1{
            background-color: yellow
        }
        p{
            background-color: red
        }
        #p2{
            background-color: green
        }
    </style>
        
</head>
<body>
    
    <p class="p1" id="p2" style="background-color: blue">cccccc</p>
    
</body>
    </htmml>

10

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>样式的继承</title>
    <style type="text/css">
        body{
            font-size: 30px
        }
    </style>
        
</head>
<body>
    <div>
    <p>
        cccccc
        <span>wwwwww</span>
    </p>
    <span>rrrrrrrr</span>
    </div>
</body>
    </htmml>

11

    <!DOCTYPE html>
    <html>
<head>
    <title>元素选择器</title>
    <style type="text/css">
            p{color: red;}
            h1{color: blue}
            </style>
    <meta charset="utf-8" />
</head>
<body>
    <h1>ssssss</h1>
    <p>ccccccc</p>
    <p>ddddddd</p>
    <p>aaaaaaa</p>
</body>
    </htmml>

12

    <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <title>子元素选择器</title>
    <style type="text/css">
        /*为第一个标签设置设置背景*/
        /*p:first-child{
            background-color: red
        }*/
        /*最后一个*/
        /*p:last-child{
            background-color: green
        }*/
        /*指定位置*/
        /*p:nth-child(3){
            background-color: blue
        }*/
        
        /*p:first-of-type{
            background-color: gold
        }*/
    </style>
        
</head>
<body>
    <span>cccccc</span>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <p>cccccc</p>
    <div>
        <p>cccccc</p>
    </div>
</body>
    </htmml>

HTML练习题2

1

2

3

4

5

6

7

8

9

10

11

12

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读