收藏
批改状态：合格
老师批语：总结的很好, 对于伪类选择器, 必须结合大量的练习才可以掌握
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin,padding,border的用法</title>
<style>
.red{
width:100px;
height: 100px;
/*border的简写*/
border:1px solid skyblue;
/*margin的简写*/
margin:5px;
/*padding的简写*/
padding:5px;
}
#blue{
width:100px;
height: 100px;
/*border的完整语法*/
border-top-width：1px;
border-top-color: skyblue;
border-top-style: solid;
border-right-width：1px;
border-right-color: skyblue;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-color: skyblue;
border-bottom-style: solid;
border-left-width: 1px;
border-left-color: skyblue;
border-left-style: solid;
/*margin的完整写法*/
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
/*padding的完整写法*/
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="red">简写的</div>
<div id="blue">完整写法的</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
margin和padding的语法一样都是只有一个width属性，完整写法都是从上右下左来写。
border有width，color,style三个属性。
style的属性值常见的有4个solid(实线)，dashed(虚线)，dotted(点线),double（双线，width的值的2倍）
<!DOCTYPE html>
<html lang="ch_ZN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
width: 50px;
height: 50px;
border: 1px solid lightcoral;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
/*类选择器*/
.bg-blue{
background-color: blue;
}
.bg-skyblue{
background-color: skyblue;
}
/*属性选择器用法1*/
li[class]{
background-color: yellow;
}
/*属性选择器用法2*/
li[class="bg-blue"]{
background-color: darkolivegreen;
}
/*兄弟选择器*/
.bg-skyblue+li{
background-color: #888888;
}
.bg-skyblue~li{
background-color: tomato;
}
.div{
width: 50px;
border:1px solid red;
margin-bottom:10px;
}
.one{
width: 50px;
border:1px solid red;
margin-bottom:10px;
}
/*伪类选择器*/
p:first-child{
font-size: 9px;
}
p:first-of-type{
background-color: #888888;
}
p:nth-child{
font-size: 5px;
}
p:nth-of-type(2){
font-size: 3px;
}
</style>
</head>
<body>
<!--ul>li{$}*10-->
<ul>
<li class="bg-blue">1</li>
<li class="bg-skyblue">2</li>
<li class="bg-blue">3</li>
<li class="bg-blue">4</li>
<li class="bg-blue">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div id="box">
<h2>我是大标题</h2>
<p class="div">我是来找茬的</p>
<p >我也是来找茬的</p>
<div class="one">第一段</div>
<div class="div">第二段</div>
<div class="div">第三段</div>
<div class="div">第四段</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这段css没有起到作用,没有符合要求的元素*/
p:first-child{
color: chartreuse;
}
/*我们想要段落1和段落4起作用*/
p:first-of-type{
color: chartreuse;
}
/*我们想要列表1和列表4起作用*/
li:first-child{
color: red;
}
/*我们想让h2其作用*/
h2:first-child{
color: pink;
}
</style>
</head>
<body>
<div>
<h2>我是标题</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<div>
<ul>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<div>我是div</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
属性选择器：属性是相对于标签而言，是根据属性的值来查找元素的。
1、标签[属性]
2、标签[属性=属性值]
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
兄弟伪类有2种
+:相邻的满足条件的。
~满足条件的兄弟（同级）元素
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
相对于父元素的伪类
p:first-child p元素的父元素的第一个子元素，该元素为p才有效果，否者无效。 生产中 第一个子元素的标签是动态的，所以不实用 。
p:last-child p元素的父元素的最后一个子元素 ，该元素为p才有效果，否者无效。
下面这个才是实际大量使用的
p:first-of-type p元素的父元素的第一个p类子元素
p:last-of-type p元素的父元素的最后一个p类子元素
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
p:nth-child(索引) 索引从1开始
p:nth-child(odd) 奇数（3个字母）
p:nth-child(even) 偶数（4个字母）
p:nth-of-type（） p元素的父元素的指定第几个p类子元素
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
