Collection
Collection
css常用选择器有：
标签选择器，层级选择器，类选择器，属性选择器，群组选择器，相邻选择器，兄弟选择器，伪类选择器
伪类（子元素选择器）:
:first-child 第一个子元素 :last-child 最后一个子元素
:nth-child(n) 第n个子元素 :nth-last-child(n) 倒数第n个子元素
伪类（类选择器）:
类型:first-of-type 第一个什么类型的元素(比如：li:first-of-type 第一个li类型的元素)
类型:last-of-type 最后一个什么类型的元素(比如：li:last-of-type 最后一个li类型的元素)类型:nth-of-type(n) 第n个什么类型的元素
:nth-child(n) 和 :nth-of-type(n) 的区别
:nth-child(n): 关注位置
:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配
伪类（表单控件）：
form :enabled 设置表单元素可用时的样式
form :checked + label 设置单选按钮中的文本前景色,使用了伪类和相邻选择器
form :invalid 当在控件中输入无效值文本时的样式form :focus 设置控件获取到焦点时的样式
button:hover 设置鼠标悬停时的样式
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<!--<link rel="stylesheet" href="static/css/stytle1.css">-->
<style>
/* 标签选择器 */
ul{
border:5px dashed blue;
margin:0 auto;
padding-left:0;
}
/* 层级选择器*/
ul li{
list-style: none;
width:40px;
height:40px;
background-color: wheat;
/*文字水平居中并垂直居中*/
text-align:center;
line-height: 40px;
/*设置圆角*/
/*border-radius:20px;*/
border-radius:50%;
/*内联块*/
display:inline-block;
/*增加小球间隙*/
margin-left:10px;
/*给小球增加阴影*/
box-shadow:2px 2px 1px orange;
}
/* id选择器 */
#bg-red{
/*background-color: red;*/
}
#bg-blue{
background-color: blue;
}
/* 类选择器 */
.bg-green{
background-color: green;
}
.bg-yellow{
background-color: yellow;
}
/* 属性选择器 */
li[class="bg-yellow"]{
border:2px solid red;
}
li[id="bg-blue"]{
border:2px solid gold;
}
/* 群组选择器 */
#bg-red,.bg-green{
border:2px solid blue;
}
/* 相邻选择器 */
/*可以加*,也可以加Li,只选后面相邻的一个*/
#bg-blue + *{
background-color: aqua;
}
/* 兄弟选择器 */
/*#bg-blue后面所有的兄弟标签都被选中*/
#bg-blue ~ *{
/*background-color: lightpink;*/
}
/* 伪类: 子元素选择器 */
/* :first-child 第一个*/
ul :first-child{
background-color: purple;
color:orange;
}
/* :last-child 最后一个*/
ul :last-child{
background-color: purple;
color:orange;
}
/* :nth-child() 第几个，从第1个开始数*/
ul :nth-child(5){
background-color: purple;
color:orange;
}
/* :nth-last-child() 倒数第几个*/
ul :nth-last-child(2){
background-color: purple;
color:orange;
}
/* 伪类: 类型选择器 */
/*li:first-of-type 第一个Li类型*/
ul li:first-of-type{
background-color: crimson;
color:yellow;
}
/*li:first-of-type 最后一个Li类型*/
ul li:last-of-type{
background-color: crimson;
color:yellow;
}
/*li:nth-of-type(n) 第n个Li类型*/
ul li:nth-of-type(2){
background-color: crimson;
color:yellow;
}
div :nth-child(2){
background-color:red;
}
div:first-of-type :nth-child(3){
background-color: yellow;
}
div:nth-of-type(2) :nth-child(1){
background-color: orange;
}
p:nth-of-type(3){
/*color:green;*/
/*background-color: orange;*/
}
/*只选仅1个p类型的*/
p:only-of-type{
color:blue;
}
/* 伪类: 表单控件 */
/*:enabled可用的*/
form :enabled{
background-color: wheat;
}
/*:checked + label 单选按钮设置背景色*/
form :checked + label{
background-color: yellow;
}
/*:invalid 输入无效文本时*/
form :invalid{
color:red;
}
/* :focus 获取焦点时 */
form :focus{
background-color: aqua;
}
/*鼠标悬停的时候*/
button:hover {
width: 50px;
height: 30px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li id="bg-red">1</li>
<li>2</li>
<li class="bg-green">3</li>
<li class="bg-yellow">4</li>
<li>5</li>
<li>6</li>
<li id="bg-blue">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<hr>
<h3>红楼梦</h3>
<div>
<p>林黛玉</p>
<li>王熙凤</li>
<p>贾宝玉</p>
<li>薛宝钗</li>
<p>贾母</p>
</div>
<div>
<p>元春</p>
<li>探春</li>
<li>惜春</li>
<p>史湘云</p>
<p>贾琏</p>
</div>
<div>
<p>妙玉</p>
</div>
<hr><br>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password">
</p>
<p>
<input type="radio" id="week" name="save" value="7" checked>
<label for="week">保存一周</label>
</p>
<p>
<input type="radio" id="month" name="save" value="30">
<label for="month">保存一月</label>
</p>
<p>
<button>登录</button>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
设置背景
1. 基本设置:
(1). background-color: 背景色
(2). background-image: 背景图片
(3). background-repeat: 重复方向
(4). background-positon: 背景定位
(5). background-attachment: 滚动方式
简写顺序:背景色 背景图片 重复方向 背景定位 滚动方式
2. css3背景新特征
(1). background-img: 多背景图设置
(2). background-size: 设置背景图尺寸
(3). backgruond-clip: 设置背景的绘制区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置背景</title>
<!--<link rel="stylesheet" href="static/css/style2.css">-->
<style>
.box{
width:400px;
height:1000px;
padding:20px;
border: 2px solid blue;
/*背景颜色*/
background-color: wheat;
/*背景图片*/
/*background-image:url(../images/熊.jpg);*/
/*不重复*/
/*background-repeat: no-repeat;*/
/*位置*/
/*background-position:left center;*/
/*background-position:10% 20%;*/
/*background-position:10px 20px;*/
/*滚动方式*/
/*background-attachment: scroll;*/
/*background-attachment: fixed;*/
/*设置两个背景图片*/
/*background-image: url(../images/熊.jpg), url(../images/葫芦娃.jpg);*/
/*background-repeat: no-repeat,repeat;*/
/*background-position:right top,left bottom;*/
/*可以简写*/
/*background:url(../images/熊.jpg) no-repeat right top,url(../images/葫芦娃.jpg) repeat left bottom;*/
/*设置背景图片尺寸*/
background-image:url(../images/熊.jpg);
background-repeat: no-repeat;
background-size:200px 100px;
/* cotain等比缩放，会留白*/
background-size:contain;
/* cover整个铺满，会被裁切*/
background-size:cover;
/*100%拉伸，图片会变形*/
background-size:100% 100%;
/*设置背景的绘制区域*/
/* 关闭背景图片 */
background-image: none;
/* 重置边框使观察更明显 */
border: 10px dashed red;
/* 重置背景色 */
background-color: lightblue;
/* 默认是从边框开始绘制 */
background-clip: border-box;
/* 设置为从内边距padding区开始绘制 */
background-clip: padding-box;
/* 设置为从内容区开始绘制 */
background-clip: content-box;
/* 复位, 就是恢复默认值 , 重新从边框处开始绘制 */
background-clip:initial;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
