Css复习：伪元素：nth:child，padding内边距

最新推荐文章于 2022-11-29 21:34:15 发布

半浮名

最新推荐文章于 2022-11-29 21:34:15 发布

阅读量560

点赞数

分类专栏：笔记 html,css,js基础知识文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/121200942

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

html,css,js基础知识

14 篇文章 1 订阅

订阅专栏

伪元素：nth:child

- 1.nth-child():
- 2.内边距：padding

1.nth-child():

nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

li:nth-child(1)：
li的父亲元素是ul,ul的第一个子元素是第一个li
li:nth-child(2)：
li的父亲元素是ul,ul的第二个子元素是第二个li**
可以选择元素的子元素，修改子元素的样式

如ul有很多个li要插入背景图例子：

<!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>
</head>
<style>




.main{




    width: 300px;
    height: 300px;
    background-color: skyblue;
}

ul{


    width: 900px;
    height: 300px;
   

}

ul li{
    width: 30%;
    height: 100%;
   background-color: pink;
    float: left;
}
li:nth-child(1){
background-image: url(../个人页面制作/2052182.jpg);

}

li:nth-child(2){
    background-image: url(../个人页面制作/2052461.jpg);
}

li:nth-child(3){
    background-image: url(../个人页面制作/2052563.jpg);
}

</style>
<body>
    

    









<div class="main">


<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>


</div>




</body>
</html>

效果图：
在ul中3个li增加了背景图：
li:nth-child(1){
background-image: url(…/个人页面制作/2052182.jpg);
在这里插入图片描述
first-child 选择作为其父的首个子元素
last-child 选择作为其父的最后一个子元素的。

2.内边距：padding

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距

比如：ul 中有许多li,让li整齐的排在ul一行
但是ul有内边距,只加浮动就会出现

在这里插入图片描述
就是因为：ul的内边距：左边距，和上边距有值
要设置：ul的内边距为0，就可以形成

在这里插入图片描述

上面就是ul和div的外边距设置了：
在这里插入图片描述
代码：

<!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>
</head>
<style>




li{
    list-style: none;
}

.main{



position: relative;
    width: 900px;
    height: 300px;
    background-color: red;
    
   padding: 0%;

}

ul{

position: absolute;
    width: 300%;
    height: 300px;
    background-color: skyblue;
   
    margin: 0%;/*       设置ul和main的外边距，*/
    padding: 0%; /*设置ul里面的内边距*/
    
}

ul li{
    width: 33%;
    height: 100%;
   background-color: pink;
   background-size: cover;
    float: left;
   
}
li:nth-child(1){
background-image: url(../个人页面制作/2052182.jpg);

}

li:nth-child(2){
    background-image: url(../个人页面制作/2052461.jpg);
}

li:nth-child(3){
    background-image: url(../个人页面制作/2052563.jpg);
}

</style>
<body>
    

    









<div class="main">


<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>


</div>




</body>
</html>

半浮名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Css复习：伪元素：nth:child，padding内边距

伪元素：nth:child1.nth-child():1.nth-child():nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。li:nth-child(1)：li的父亲元素是ul,ul的第一个子元素是第一个lili:nth-child(2)：li的父亲元素是ul,ul的第二个子元素是第二个li**可以选择元素的子元素，修改子元素的样式如ul有很多个li要插入背景图例子：<!DOCTYPE html><html lang="en"&
复制链接

扫一扫