收藏
批改状态：合格
老师批语：理解的不错, 其实前端的学习是非常直观的, 很形象有意思的
1、写一个盒子，简写margin,padding,border，注意子元素的默认盒样式，子元素的盒子只会继承父级的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 400px;
height: 400px;
background-color: mediumspringgreen;
padding: 10px 20px 10px 20px; /*上 右 下 左*/
border:5px solid yellowgreen;/*宽度 样式 颜色*/
margin: 5px 10px 5px 10ox;/*上 右 下 左*/
}
#div2{
/*子元素默认只继承宽度，所以可以再设置高度,当然，如果不要继承的宽度也可以再设置*/
height: 200px;
/*margin是指两个同级盒子之间的间隙，所以对这种 父子关系不生效*/
background-color: wheat;
}
</style>
</head>
<body>
<div id="div1">
这是一个盒子,在外面
<div id="div2">
这个盒子在里面
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、多种选择器的练习
层级选择器用 空格 或者 > 代表下一级。
属性选择器既可以指定某个属性值的标签，也可以指定带有某个属性的标签。
群组选择器用逗号隔开多个即可。
相邻选择器指右边的第一个，用+连接 接下来的标签名称。
兄弟选择器用~连接*，针对所有接下来的同级标签。
伪类子元素选择器，格式是 父级标签名称 空格 冒号 顺序第几个。意思是子级中的第几个，不care标签类型。
伪类类型选择器，格式是 父级标签名称 空格 子级标签名称 类型第几个。意思是子级中，该标签类型的第几个。
伪类类型选择器，格式是 标签名称 冒号 类型第X个。在至少含有X个这种标签的范围才会生效，针对第X个生效。
伪类类型选择器，格式是 标签名称 冒号 only-of-type。意思是只含有这个标签类型的范围才会生效，就是这个标签才生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更多的选择器</title>
<style>
span{
display: inline-block;
}
/*层级选择器，空格代表下一级，也可以用>代替*/
ul li{
list-style:none;/*去掉默认的点*/
width: 50px;
height: 50px;
background-color:lightyellow;
text-align: center;/*字体水平居中*/
line-height: 50px;/*和高度一样，就使内容垂直居中*/
border-radius: 50%; /*只要大于等于50%，就是圆，或者像素为盒模型总宽度/总高度的一半以上*/
display: inline-block;/*让块元素能并排展示，让内联元素能设置宽高*/
margin-left: 10px;
}
/*属性选择器，可以针对某个属性值的标签，或者有这个属性的标签*/
li[class]{
background-color: yellowgreen;/*针对有class属性的标签，也就是前3个*/
}
li[id="li1"]{
background-color: green;/*针对id=li1的标签，优先级比上面没有设置属性值的更高*/
}
/*群组选择器,就是用逗号展示多个，这个优先级比属性选择器的优先级更高*/
#li3,#li4{
background-color: darkkhaki;
}
/*相邻选择器,向右边的第一个，li是相邻的标签名称，也可用*表示*/
#li4 + li{
background-color: cornflowerblue;/*第4个的相邻是指第5个球*/
}
/*兄弟选择器*/
#li5~*{
background-color: blueviolet;!*针对第5个小球后面所有的同级标签,而span标签也是同级*!
}
/*伪类：子元素选择器。父级标签名称 空格 冒号 第几个*/
ul :first-child{
background-color: burlywood;/*ul的第一个子元素*/
}
ul :last-child{
background-color: blue;/*不会生效，这个优先级更低*/
}
ul :nth-child(6){
background-color: brown;/*针对第6个子元素，从头开始数的；但是这个不会生效，优先级更低*/
}
ul :nth-last-child(3){
background-color: black;/*针对倒数第3个子元素，从末尾开始数；但是这个不会生效，优先级更低*/
}
ul :nth-child(8) {
background-color:darkorange;/*针对ul的第8个子元素，也就是span标签*/
}
div :nth-child(2) {
background-color: royalblue;/*针对div的第2个子元素，也就是葡萄和李子*/
}
/*伪类：类型选择器*/
ul li:first-of-type {
background-color:darkgray; /* 针对第1个li类型的元素；会生效 */
}
ul li:last-of-type {
background-color:rosybrown; /* 针对最后1个li类型的元素；不会生效 */
}
ul li:nth-of-type(8) {
background-color:violet; /* 针对第8个li类型的元素，即使前面有个span元素，也不影响，注释掉兄弟选择器才看到此效果 */
}
/*冒号前面紧跟P标签，意思是针对P标签这种类型，在一定范围内，第2个P标签才会生效，那么前提是这个范围必须包含2个P标签以上。
所以只含有1个P标签的范围内不会生效，
也就是 西瓜*/
p:nth-of-type(2) {
background-color:aqua;
}
/*只含有1个P标签的范围才会生效，第一个DIV有2个P标签，所以不会生效，也就是苹果*/
p:only-of-type {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li id="li1" class="li">1</li>
<li id="li2" class="li">2</li>
<li id="li3" class="li">3</li>
<li id="li4">4</li>
<li id="li5">5</li>
<li id="li6">6</li>
<li id="li7">7</li>
<span>span</span>
<li id="li8">8</li>
<li id="li9">9</li>
<li id="li10">10</li>
</ul>
<div>
<p>这是P标签 芒果</p>
<li>这是li标签1 葡萄</li>
<p>这是P标签 西瓜</p>
</div>
<div>
<p>这是P标签 苹果</p>
<li>这是li标签2 李子</li>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、表单在无效、有效、获取焦点、鼠标经过时，都可以设置样式。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
