2022-08-22 第五组张明敏学习笔记

最新推荐文章于 2024-09-11 19:59:22 发布

小张同学的小张

最新推荐文章于 2024-09-11 19:59:22 发布

阅读量149

点赞数

分类专栏：前端文章标签：学习 java css

本文链接：https://blog.csdn.net/qq_50392643/article/details/126497193

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

3、伪类选择器（li:first-child）

4、盒子模型（padding、margin）

H5CSS3练习题

习题集：

1.简答题：CSS选择器有哪些？

关于css属性选择器常用的有：

（1）id选择器（#box），选择id为box的元素

（2）类选择器（.one），选择类名为one的所有元素

（3）标签选择器（div），选择标签为div的所有元素

（4）后代选择器（#box div），选择id为box元素内部所有的div元素

（5）子选择器（.one > one_1），选择父元素为.one的所有.one_1的元素

（6）相邻同胞选择器（.one + .two），选择紧接在.one之后的所有.two元素

（7）群组选择器（div, p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

（1）伪类选择器 :

link ：选择未被访问的链接 :

visited：选取已被访问的链接 :

active：选择活动链接 :

hover ：鼠标指针浮动在上面的元素 :

focus ：选择具有焦点的 :

first-child：父元素的首个子元素

（2）伪元素选择器 :

first-letter ：用于选取指定选择器的首字母 :

first-line ：选取指定选择器的首行 :

before : 选择器在被选元素的内容前面插入内容 :

after : 选择器在被选元素的内容后面插入内容

（3）属性选择器

[attribute] 选择带有attribute属性的元素

[attribute=value] 选择所有使用attribute=value的元素

[attribute~=value] 选择attribute属性包含value的元素

[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

（1）层次选择器

（p ~ ul），选择前面有p元素的每个ul元素

（2）伪类选择器 :

first-of-type 表示一组同级元素中其类型的第一个元素 :

last-of-type 表示一组同级元素中其类型的最后一个元素 :

only-of-type 表示没有同类型兄弟元素的元素 :

only-child 表示没有任何兄弟的元素 :

nth-child(n) 根据元素在一组同级中的位置匹配元素 :

nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数

last-child 表示一组兄弟元素中的最后一个元素 :

root 设置HTML文档 :

empty 指定空的元素 :enabled 选择可用元素 :

disabled 选择被禁用元素 :

checked 选择选中的元素 :

not(selector) 选择与不匹配的所有元素

（3）属性选择器

[attribute*=value]：选择attribute属性值包含value的所有元素

[attribute^=value]：选择attribute属性开头为value的所有元素

[attribute$=value]：选择attribute属性结尾为value的所有元素

2、标签、类、ID选择器 ·

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，“绿色"设置为"rgb(0, 128, 0)”，“黑色"设置为"rgb(0, 0, 0)”，且字体大小都为20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: rgb(255,0,0);
            font-size: 20px;
        }
        .green{
            color: rgb(0,128,0);
            font-size: 20px;
        }
        #black{
            color: rgb(0,0,0);
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>红色</div>
    <div class="green">绿色</div>
    <div id="black">黑色</div>
</body>
</html>

3、伪类选择器（li:first-child）

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-child(even){
            color: rgb(255,0,0);
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

4、盒子模型（padding、margin）

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

·5、后代选择器父级子级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{
            color: red;
        }
        .demo1>ul>li{
            color: blue;
            font-size: 16px;
        
        }

        ol>li{
            color: green;
        }
    

    </style>
</head>
<body>
    <ul>
        <li>青春正能量</li>
        <li>青春正能量</li>
        <li>青春正能量</li>
    </ul>
    <ol>
        <li>青春正能量</li>
        <li>青春正能量</li>
        <li>青春正能量</li>
    </ol>
    <div class="demo1">
        <ul>
            <li>青春正能量</li>
            <li>青春正能量</li>
            <li>青春正能量</li>
        </ul>
    </div>
</body>
</html>

6、子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p{
            color: red;
        }
        p{
            color:rgb(114, 17, 206);
        }
    </style>
</head>
<body>
    <div>
        <p>青春正能量1</p>
        <p><a href="#">青春正能量2</a></p>
    </div>

    <div>
        <p><a href="#">青春正能量3</a></p>
    </div>
    <div>
        <p>青春正能量4</p>
    </div>
</body>
</html>

7、链接伪类选择器

用于向某些选择器添加特殊的效果。

比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

伪类选择器很多，比如链接伪类，结构伪类等等。

a:link /* 未访问的链接 */

a:visited /* 已访问的链接 */

a:hover /* 鼠标移动到链接上 */

a:active /* 选定的链接 */

/*取消下划线*/

/*已经访问的链接我们点击过黄色*/

/*鼠标经过链接时候的状态红色*/

/*当我们点击的时候（按下鼠标，别松开的时候）绿色*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
        color: #333;
        }
        /*取消下划线*/
        .test a{
            text-decoration-style: none;
        }
        /*已经访问的链接 我们点击过 黄色*/
        a:visited {
            color: yellow;
        }
        /*鼠标经过链接时候的状态 红色*/
        a:hover{
            color: red;
        }
        /*当我们点击的时候（按下鼠标，别松开的时候）绿色*/
        a:active {
            color: green;
        }
        </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

8、.创建如下H5表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol{
        padding:0;
        margin:0;
        list-style: none;
        }
        ol li{
        padding:0;
        clear: both;
        margin:0 0 10px 0;
        }
        label{
        float: left;
        width:150px;
        }
        </style>
</head>
<body>
    <form method="post" action="/Projects/1"></form>
    <fieldset id="Personal_information">
        <legend>Project Information</legend>
        <ol>
        <li>
        <label for="name">Name</label>
        <input type="text" name="name" autofocus id="name"/>
        </li>
        <li>
        <label for="priority">Priority</label>
        <input type="range" min="0" max="10" name="priority" value="0" id="priority"
        </li>
        <li>
        <label for="estimated_hours">Estimated hours</label>"
        <input type="number" min="0" max="1000" name="estimated_hours" id="estimated"
        </li>
        <li>
        <label for="start_date">Start date</label>
        <input type="date" value="2016-8-11" name="start_date" id="start_date"/>
        </li>
        <li>
        <label for="email">Email contact</label>
        <input type="email" name="email" id="email">
        </li>
        <li>
        <label for="url">Staging URL</label>
        <input type="url" name="url" id="url"/>
        </li>
        <li>
        <label for="project_color">Project color</label>
        <input type="color" name="project_color" id="project_color"/>
        </li>
        <li>
        <input type="submit" value="Submit"/>
        </li>
        </ol>
        </fieldset>
        </form>
        
</body>
</html>

小张同学的小张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-08-22 第五组张明敏学习笔记

（1）id选择器（#box），选择id为box的元素（2）类选择器（.one），选择类名为one的所有元素（3）标签选择器（div），选择标签为div的所有元素（4）后代选择器（#box div），选择id为box元素内部所有的div元素（5）子选择器（.one > one_1），选择父元素为.one的所有.one_1的元素（6）相邻同胞选择器（.one + .two），选择紧接在.one之后的所有.two元素（7）群组选择器（div, p），选择div、p的所有元素。
复制链接

扫一扫