<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
收藏
.box1{
width: 200px;
height: 200px;
background-color: aqua;
/*内边距*/
/* padding-top: 20px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;*/
/* padding: 20px 30px 40px 50px;*/
padding: 20px 30px 50px;
/*外边距*/
/* margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 50px;*/
margin: 40px 30px 20px 50px;
/* border-top-width: 30px;
border-top-style: solid;
border-top-color: red;*/
border-top: 30px solid red;
/* border-right-width: 40px;
border-right-style: solid;
border-right-color: green;*/
border-right: 40px solid green;
/*border-bottom-width: 30px;
border-bottom-style: dotted;
border-bottom-color: blue;*/
border-bottom: 30px dotted blue;
/* border-left-width: 30px;
border-left-style: double;
border-left-color: black;*/
border-left: 30px double black;
/*border: 5px solid black;*/
/*做个圆角*/
/*border-radius: 20px;*/
/*正圆*/
/* border-radius: 200px;*/
}
.box2{
/*子元素只能从父元素上继承宽度，margin，padding，border都不能继承*/
}点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <link rel="stylesheet" href="static/css/style2.css"> </head> <body> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
/*标签（元素）选择器*/
ul{
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
/*border: 1px red solid;*/
}
/*层级（后代）选择器：选择ul的后代元素*/
ul li{
list-style: none;/*清楚后面的黑点*/
width: 40px;
height: 40px;
background-color: wheat;
border: 1px solid black;
/*设置文本垂直水平居中*/
text-align: center;
line-height: 40px;
border-radius: 50%;
/*小球并列显示 洋相既可以设置宽高，又可以并排显示设置inline-block*/
display: inline-block;
margin: 5px;
box-shadow: 2px 2px #888;
/*块元素默认独占一行：设置宽高，行内元素默认多个并排显示常见的<span>*/
}
/*id选择器*/
#bg-blue{
/*background-color: lightblue;*/
}
/*类选择器*/
.bg-green{
/*background-color: lightgreen;*/
}
/*属性选择器 根据元素属性来定义*/
li[id] {
/*border: red 2px solid;*/
}
/*群组选择器：一组独立的选择器合到一起统一设置 中间有“,”隔开，用于样式重置，
比如：一个页面可能把body，h1，h2，h3,p,ul{margin:0; padding: 0;}页面元素的初始化*/
#bg-blue,.bg-green{
/*border: blue 2px solid;*/
}
/*相邻（兄弟）选择器 ：两个紧紧挨着的选择器 也叫同级选择器 +只选中相邻 要选中后面所有的~*/
#bg-blue + .bg-green{
/*background-color: yellow;*/
}
#bg-blue ~ *{
/*background-color: yellow;*/
}
/*伪类（子元素）选择器: 根据位置或者特征来选择某个元素*/
/*first-child : 选择第一个子元素*/
ul :first-child{
/*background-color: coral;*/
}
ul :last-child{
/*background-color: coral;*/
}
/*ul :nth-child(2n-1){*/
/*background-color: coral;*/
/*}*/
ul :nth-child(odd){
/*background-color: cyan;*/
}
/*ul :nth-child(2n){*/
/*background-color: cyan;*/
/*}*/
/*偶数*/
ul :nth-child(even){
/*background-color: coral;*/
}
/*倒数*/
ul :nth-last-child(3){
/*background-color: coral;*/
}
/*伪类：类型选择器*/
ul li:first-of-type{
/*background-color: coral;*/
}
ul li:last-of-type{
/*background-color: coral;*/
}
ul li:nth-of-type(5){
background-color: coral;
}
/*:nth-child(m): 关注位置*/
/*:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配*/
/*li:nth-child(m): 如果这样写, 那么与 li:nth-of-type(n)功能几乎一样*/点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
