css基础知识-伪类选择器
程序员文章站
2022-03-27 09:18:10
...
伪类选择器(非常重要)
分组结构伪类(重点学习) | 使用说明 | 状态伪类 | 使用说明 |
---|---|---|---|
选择任意 1 个 | .list>li:nth-of-type(1){} | 表单伪类 input:enabled 或 disabled | enabled 是允许的,disabled 是禁用的 |
选择倒数第 4 个 | .list>li:nth-last-of-type(4){} | 单选伪类 input:checked + lable | 选择选中后更改 lable 文本的状态 |
选择第一个 | .list :first-of-type{} | 按钮伪类: button:hove | 当鼠标悬停时更改样式 |
选择最后一个 | .list :last-of-type{} | 获取焦点:input:focus | 当光标放置文本框时改变样式 |
伪类使用演示
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
</ul>
<style>
/* 选中第一个li元素并把颜色 */
ul > li:frist-of-type {
color: yellow;
}
/* 选中最后一个li元素 */
ul > li:last-of-type {
color: yellow;
}
/* 选中倒数第几个()中填要选中的参数,如倒数第5个就填5 */
ul > li:nth-last-of-type(5) {
color: yellow;
}
/* 选中任意一个或一组元素()中填入要选中的参数 */
/* 1 a是系数从0开始(0 1 2 3 ...)
2 n是从0开始(0 1 2 3 ....)
3 b是偏移量,从0开始(0 1 2 3...)
注:三个值计算出来的索引必须是有效,从1开始
*/
ul > li:nth-of-type(an + b) {
color: yellow;
}
/* 取从第三个li开始的全部li元素 */
ul > li:nth-of-type(n + 3) {
color: red;
/* n+3 匹配过程
其中3是偏移量从第3个开始
1 n=0;0+3=3 匹配第3个
2 n=1;1+3=4 匹配第4个
3 n=2;2+3=5 匹配第5个
4 n=3;3+3=6 匹配第6个
5 n=4;4+3=7 匹配第7个
6 n=5;5+3=8 匹配第8个
7 n=6;6+3=9 第9个,元素超界无法匹配
最后n+3匹配到的是3 4 5 6 7 8共6个
*/
}
/* a=-1时,功能与a=1是一样的,只是反向取 */
/* 如要取前三个,就用-n+3的参数即可 */
ul > li:nth-of-type(-n + 3) {
color: red;
/* -n+3匹配过程
1 -0+3=3 匹配第3个
2 -1+3=2 匹配第2个
3 -2+3=1 匹配第1个
4 -3+3=0 匹配不到
最后-n+3匹配到前三个li元素
*/
}
/* 如果要取后三个,就用nth-last-of-type(-n+b) */
ul > li:nth-last-of-type(-n + 3) {
color: red;
/* nth-last-of-type是选择最后几个的意思
最后-n+3匹配过程
1 -0+3=3 匹配最后第3个
2 -1+3=2 匹配最后第2个
3 -2+3=1 匹配最后第1个
4 -3+3=0 匹配不到结束匹配
-n+3=>(3 2 1 )
*/
}
/* 如果要取偶数的元素就用2n */
ul > li:nth-of-type(2n) {
color: red;
/* 2n+2匹配过程
1 2*0=0 第0个无元素匹配不到
2 2*1=2 匹配到第2个
3 2*2=4 匹配到第4个
3 2*3=6 匹配到第6个
4 2*4=8 匹配到第8个
最后2n+2=>(2 4 6 8) 4个偶数元素
语法堂2n=even ,2n+1=odd
nth-of-type(even)表示取偶数行
*/
}
/* 如果要取奇数元素就用2n+1 */
ul > li:nth-of-type(2n + 1) {
color: red;
/* 2n+2匹配过程
1 2*0=0 0+1=1 匹配到第1个
2 2*1=2 2+1=3 匹配到第3个
3 2*2=4 4+1=5 匹配到第5个
3 2*3=6 6+1=7 匹配到第7个
4 2*4=8 8+1=9 匹配不到结束
最后2n+2=>(1 3 5 7) 4个偶数元素
*/
}
</style>
表单伪类
<label for="username">用户名:</label>
<input type="text" id="username" value="" placeholder="请输入用户名/邮箱" />
<label for="password">密码:</label>
<input type="password" id="password" value="" disabled />
<label for="girl">性别:</label>
<input type="radio" name="sex" id="man" value="1" />
<label for="man">男</label>
<input type="radio" name="sex" id="girl" value="" checked />
<label for="girl">女</label>
<div><button>提交</button></div>
<style>
/* 找到允许状态(enabled)的文本框并修改其背景色 */
input:enabled {
background-color: cornsilk;
}
/* 找到禁用状态(disabled)的文本框并修改背景色 */
input:disabled {
background-color: darkseagreen;
}
/* 当选中时将lable文本的样式改变 */
input:checked + label {
color: red;
}
/* 更改提交按钮的样式 */
button {
/* 边框线删除 */
border: none;
/* 轮廓线删除 */
outline: none;
width: 6rem;
height: 1.8rem;
background-color: lawngreen;
color: rgb(255, 255, 255);
margin: 1rem;
}
button:hover {
background-color: tomato;
/* 将鼠标变为小手 */
cursor: pointer;
}
/* 获取焦点时更改背景色 */
input:focus {
background-color: violet;
}
</style>
引入字体图标的详细方法
- 第一步打开阿里图标库网站(https://www.iconfont.cn/)
- 第二步选中喜欢的图标加入购物车并下载到本地电脑上
- 第三步解压图标拖到项目中
- 第四步引入图标样式 css(
<link rel="stylesheet" href="./font_icon/iconfont.css">
) - 第五步在标签中引入图标 class(
class="iconfont icon-xxx"
) - 第六步可修改引入图标字体的样式,按文本方式设置图标即可
盒模型常用的 5 个属性
- width: 宽度
- height: 高度
- margin: 外边距
- padding: 内边距
- border: 边框
<div class="box"></div>
<style>
/* 没加box-sizing: border-box;时盒子计算方式
高/宽度计算:20*16+border(10*2)+padding(5*2)=350px
*/
.box {
width: 20rem;
height: 20rem;
background-color: tomato;
border: 10px dashed black;
background-clip: content-box;
padding: 5px;
/* 加上box-sizing: border-box;后盒子的高度和宽度和设置的一样,不会影响到布局 */
box-sizing: border-box;
}
</style>
加或不加 box-sizing:border-box 对比图
em 和 rem 的区别
- em 永远继承当前或者父级 font-size
- rem 永远继承的是 html 的 font-size
<div class="box"></div>
<style>
.box {
/* 当前或父级没有使用font-size时使用em计算结果不受影响 */
/* 如果在当前或父级增加font-size设置的宽度和高度就会受影响 */
width: 10em;
height: 10em;
/*
计算结果:html的默认font-size=16px*10em=160px,
当前设置宽和高都是160px
*/
}
.box {
font-size: 30px;
width: 10em;
height: 10em;
/* 计算结果:由于em继承了当前的font-size=30px*10em=300px */
/* 所以当前设置的宽和高都是300px */
}
.box {
font-size: 30px;
width: 10rem;
height: 10rem;
/* 计算结果:由于rem永远继承的都是html的font-size
所以默认html的font-size=16px*10rem=160px
当前设置的宽和高都是160px
*/
}
</style>
上一篇: 启动 相关技术文章