学习web前端历程（十一）

最新推荐文章于 2022-05-30 07:30:00 发布

l123zmj

最新推荐文章于 2022-05-30 07:30:00 发布

阅读量142

点赞数 1

文章标签：结构伪类选择器伪对象选择器 CSS选择器的优先级认识盒子

本文链接：https://blog.csdn.net/l123zmj/article/details/98470264

版权

结构性伪类选择器（继上一节）、伪对象选择器、css选择器的优先级、认识盒子

一、结构性伪类选择器（继上一节）
5.E：not（s选择器）
匹配不含有s选择器的元素E
注意：除了类名为dl的元素，not（）的值不加引号

div:not(.d1){
            color: red;
        }

6.E：first-child
父元素的第一个子元素
注意：E元素须是某个元素的子元素，基本上所有的元素都为body的子元素

li:first-child{
            color: red;
        }

7.E：last-child
父元素的最后一个子元素E

ul:last-child{
            color: red;
        }

8.E：only-child
E元素是唯一的子元素时被匹配（用得少）

 p:only-child{
            color: red;
        }

9.E：empty（空元素时，用得少）
10.E:checked
匹配用户界面上处于选中状态的元素E（常用于radio、checkbox）

 input:checked+span{
            color: red;
        }

11.E:nth-child
选中第几个元素（奇数odd、偶数even、n为所有）

 .box p:nth-child(5){
            color: red;
        }
        .box p:nth-child(odd){/*奇数*/
            color: red;
        }
       .box p:nth-child(even){/*偶数*/
            color: red;
        }
       .box p:nth-child(n){/*所有数*/
            color: red;
        }
div p:nth-child(n)
{
    color: red;
}

结构性伪类选择器完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
       /* div:not(.d1){
            color: red;
        }*/
        /*li:first-child{
            color: red;
        }*/
       /* ul:first-child{
            color: red;
        }*/
        /*li:last-child{
            color: red;
        }*/
      /* ul:last-child{
           color: red;
       }*/
       /* p:only-child{
            color: red;
        }*/
       /* input:checked+span{
            color: red;
        }*/
       .box p:nth-child(5){
            color: red;
        }
        .box p:nth-child(odd){/*奇数*/
            color: red;
        }
       .box p:nth-child(even){/*偶数*/
            color: red;
        }
       .box p:nth-child(n){/*所有数*/
            color: red;
        }
div p:nth-child(n)
{
    color: red;
}
    </style>
</head>
<body>
<!--<div class="d1">块元素</div>-->
<!--<div class="d1">块元素</div>-->
<!--<div class="d1">块元素</div>-->
<!--<div class="d2 d1">块元素</div>-->
<!--<div class="d2" id="div2">块元素</div>-->
<!--<ul>-->
<!--    <h3>标题</h3>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--</ul>-->
<!--<ul>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--    <li>元素</li>-->
<!--    <h3>底部第一个</h3>-->
<!--</ul>-->
<!--<p>段落标签</p>-->
<!--<p>段落标签</p>-->
<!--<input type="radio" name="sex"/><span>男生</span>-->
<!--<input type="radio" name="sex" checked="checked"/><span>女生</span>-->
<!--<div class="box">-->
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</div>
</body>
</html>

二、伪对象选择器（用得多）
伪对象也称伪元素（有两个冒号）
伪类检测某个元素的状态和属性
伪元素则表示DOM外部的某种文档结构
注意：其都不在HTML中，不是HTML的内容
常用的伪元素：
1.before
在被选元素的内容前插入内容、和content属性一起使用

p::before{
            content: "学习";
            color: red;
        }
        <p></p>

2.after
在被选元素的内容后插入内容、和content属性一起使用

   p::after{
            content: "努力";
            color: red;
        }
         <p></p>

伪对象选择器完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p::before{
            content: "学习";
            color: red;
        }
        p::after{
            content: "努力";
            color: red;
        }
    </style>
</head>
<body>
<p>前端</p>
</body>
</html>

三、css选择器的优先级
数值大优先级大

属性	数值
style(style样式)	1000
id（ID选择器）	100
class（class选择器）	10
element（元素选择器）	1

style样式>ID选择器>class选择器>元素选择器
注意：优先级相同，写在后面的样式起作用

四、认识盒子
盒模型主要定义了四个区域：
内容（content）、内边距（padding）、边框（border）、外边距（margin）

1.边框（border）
设置一个元素的边框，有三要素：宽、样式、颜色
这是要一次设置（ border: 2px solid red;）

属性	属性值
宽度	1px
样式	solid
颜色	red

也可以单独设置

属性	属性值
border-width	默认为3px
border-style	dotted 点线、solid 实线、double 双线、dashed 虚线、none 无边框（默认）（必须存在）
border-color	默认为黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识盒子</title>
    <style>
        div{
            /*border: 2px solid red;*/
            border-width: 5px;
            border-style: solid;/*dotted 点线 、solid  实线、double 双线、dashed 虚线、none 无边框（默认）*/
            border-color: red;
            background-color: pink;
            height: 50px;
        }
    </style>
</head>
<body>
<div>前端</div>
</body>
</html>

2.外边距（margin）

相对于浏览器
围绕在元素边框周围的空白区域
（1）会在区域外创建额外的空白区域
（2）外边距是透明的
（一般只设置上和左）
语法：

margin：value;

单边设置：
（1）margin-top / left /right / bottom:value;
（2）value可取值像素、%、auto（水平居中）、负值

外边距简写
margin：value;(四个方向)
margin：value （上下） value（左右）
margin：value （上） value（左右） value（下）
margin：value （上）value （右）value（下）value（左）顺时针来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: purple;
           /* margin-top: 20px;*/
            /*margin-left: 30px;/*上下左右全都赋值*/
            /*margin: 20px 30px; /*上下20px  左右30px*/
            /*margin: 20px 30px 10px;/*上20px 左右30px 下10px*/
           /* margin: 20px 30px 10px 40px;/*上20px 右30px 下10px 左40px  按照顺时针方向*/
            margin: 0px auto ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

3.内边距（padding）

内容区域和边框之间的空间
会扩大元素边框所占的区域
语法：

padding:value;

单边设置：
（1）padding-top / left /right / bottom:value;
（2）value可取值像素、%，但是不能为负值

内边距简写：

padding：value;(四个方向)
padding：value （上下） value（左右）
padding：value （上） value（左右） value（下）
padding：value （上）value （右）value（下）value（左）顺时针来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
           /* padding-left: 20px;
            padding-top: 30px;
            padding: 20px;
            padding: 10px 20px;
            padding: 10px 20px 30px;*/
            padding: 10px 20px 30px 40px;/*按照顺时针方向赋值*/
        }
    </style>
</head>
<body>
<div>内容和边框的距离就是内边距</div>
</body>
</html>

4.外边距合并（出现在块级元素）
（垂直关系）
在这里插入图片描述
（1）当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
（2）合并后的外边距高度等于两个发生合并的外边距的高度中较大的
还存在一种情况：
（父子关系）
当两个div块嵌套时
①在父元素那加上边框（限制子块的div）
②用overflow：hidden
③用padding 内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并</title>
    <style>
        /*div{
            width: 200px;
            height: 200px;
            background-color: blanchedalmond;
        }
        div:first-child{
            background-color: lavenderblush;
            margin-bottom: 100px;
        }
        div:last-child{
            background-color: pink;
            margin-top:50px;
        }*/
       /* .parent{
            width: 200px;
            height: 200px;
            background-color: lavenderblush;
            border: 2px solid pink;
        }
        #son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin:50px auto;
        }*/
        span{
            width: 200px;
            height: 200px;
            background-color: lavenderblush;
            border: 2px solid pink;
            margin: 20px;
        }
    </style>
</head>
<body>
<!--
外边距问题是出现在块级元素的
-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div class="parent">-->
<!--    <div id="son"></div>-->
<!--</div>-->
<span>leikuan</span>
</body>
</html>

显示图：
在这里插入图片描述

用margin设置外边距的宽度，有以下几个特点：
（1）块级元素的垂直相邻合并
（2）行内元素不占上下边距，不合并（只享受左右外边距）
（3）浮动元素的外边距也不合并
（4）允许指定负值的外间距，但是要小心

登录框的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录框</title>
    <style>
        div{
            width: 300px;
            height: 400px;
            border: lavenderblush;
            background-color: lavender;
            margin: 0px auto;
            padding-top:20px;
            padding-left: 20px;
        }
        p{
            color: grey;
        }
        .zhang{
            width: 220px;
            height: 20px;
        }
        .submit{
            width: 270px;
            height: 40px;
            background-color: red;
        }
        .zhuce{
            width: 270px;
            height: 40px;
            background-color: grey;
        }
    </style>
</head>
<body>
<div>
    <p>登录百度账号</p>
   <label> 账号：<input type="text" class="zhang"/><br/></label>
    <label> 密码：<input type="password" class="zhang"/><br/><br/></label>
    <input type="checkbox"/><small>下次自动登录</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href=" "><small>忘记密码？</small></a><br/><br/>
     <input type="submit" value="登录" class="submit"/><br/><br/>
    <small>可以使用以下方式登录</small>
    <a href=""><img src="images/QQ.jpg" width="25" height="25"></a>&nbsp;&nbsp;
    <a href=" "><img src="images/weibo.jpg"width="25" height="25"></a>&nbsp;&nbsp;
    <a href=" "><img src="images/weixin.jpg" width="25" height="25"></a><br/><br/>
    <input type="button" value="立即注册百度账号" class="zhuce"/>
</div>
</body>
</html>

显示图：
在这里插入图片描述

l123zmj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web前端历程（十一）

结构性伪类选择器（继上一节）、伪对象选择器、css选择器的优先级、认识盒子一、结构性伪类选择器（继上一节）5.E：not（s选择器）匹配不含有s选择器的元素E注意：除了类名为dl的元素，not（）的值不加引号div:not(.d1){ color: red; }6.E：first-child父元素的第一个子元素注意：E元素须是某个元素的子元...
复制链接

扫一扫