伪类选择器
结构伪类
方法一:
<body>
<!-- 结构伪类:根据元素位置获取元素 -->
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<style>
/* 分组结构伪类 */
/* 第一个元素 */
.list > li:nth-of-type(1) {
background-color: violet;
}
/* 最后一个元素 */
.list > li:nth-of-type(8) {
background-color: violet;
}
/* 第5个元素 */
.list > li:nth-of-type(5) {
background-color: violet;
}
/* 选择第5个,相当于倒数第4个元素 */
.list > li:nth-last-of-type(4) {
background-color: red;
}
/* 第一个和倒数第一个元素可以简写 */
.list > li:first-of-type {
color: darkorchid;
}
.list > li:last-of-type {
color: lightblue;
}
</style>
</body>
方法二
<body>
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<style>
/* 实际开发过程中,使用n + b(偏移量)来匹配元素 */
/* 1. 匹配单个,a=0 */
.list > :nth-of-type(0n + 3) {
background-color: lightgreen;
}
.list > :nth-of-type(3) {
background-color: red;
}
/* 2. 匹配一组:a=1 */
.list > :nth-of-type(n) {
background-color: skyblue;
}
/* 匹配第3个子元素后面的所有兄弟元素 */
.list > :nth-of-type(1n + 3) {
color: darkred;
}
/* a=-1,功能与a=1是一样,但是反向取,取前3个 */
.list > :nth-of-type(-n + 3) {
background-color: lightgreen;
}
/* 匹配最后3个 */
.list > :nth-last-of-type(-n + 3) {
background-color: seagreen;
}
/* 2n+0:匹配偶数位元素 even */
.list > :nth-of-type(2n) {
background-color: gray;
}
/* 2n+1:匹配奇数位元素 odd */
.list > :nth-of-type(2n + 1) {
background-color: lightgrey;
}
.list > :nth-of-type(even):hover {
background-color: red;
}
.list > :nth-of-type(odd):hover {
background-color: darkred;
}
</style>
</body>
状态伪类/表单伪类
<body>
<!-- 表单伪类 -->
<input type="text" />
<input type="text" disabled />
<input type="radio" name="sex" id="m" value="0" /><label>男</label>
<input type="radio" name="sex" id="f" value="1" /><label>女</label>
<p>
<button>提交</button>
</p>
<style>
input:disabled {
background-color: yellow;
}
input:enabled {
background-color: cyan;
}
/* 单选按钮选中后,将它的标签文本前景色设置为红色 */
input:checked + label {
color: red;
}
button {
width: 100px;
height: 30px;
border: none;
outline: none;
background-color: seagreen;
color: white;
}
button:hover {
background-color: coral;
cursor: pointer;
}
</style>
</body>
字体图标引入
1、字体图标下载
https://www.iconfont.cn/ 根据需要挑选自己需要的字体图标,并下载至本地项目根目录,根据需要设置字体图标目录名称(本项目设置为:font)。
2、字体使用
Font class方式插入
①引入字体CSS文件
<link rel="stylesheet" href="./font/iconfont.css" />
②字体使用
<body>
<p><span class="iconfont icon-cart"></span> </p>
<style>
.iconfont.icon-cart {
font-size: 30px;
color: red;
}
</style>
</body>
Symbol 方式插入
①引入字体JS文件
<script src="./font/iconfont.js"></script>
②字体使用
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fabulous"></use>
</svg>
</body>
盒模型的属性
盒子模型总共有5个属性分别为:width/height/border/padding/margin
<body>
<div class="box">Box</div>
<style>
/* 盒子模型的属性 */
.box {
width: 200px;
height: 200px;
background: violet;
border: 10px dashed currentColor;
background-clip: content-box;
box-sizing: border-box;
/* 值得顺序;上 右 下 左 */
padding: 5px 10px 15px 20px;
/* 三值语法:上 右 下 左 */
padding: 5px 10px 20px;
/* 双值:第一个上下,第二个左右 */
padding: 25px;
/* 单值:四个方向一样 */
}
.box {
border-top: 20px solid red;
border: 5px solid green;
}
/* 样式重置 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</body>
em/rem的区别
说明:em和rem都是相对单位,em当前或父级的font-size绑定,而rem是永远和html中的font-size绑定
<body>
<div class="box"></div>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
/* 1em = 当前或父级的font-size绑定 */
height: 5em;
background-color: green;
}
/* rem:永远和html中的font-size绑定 */
html {
font-size: 10px;
}
.box {
width: 20rem;
height: 15rem;
background-color: grey;
}
</style>
</body>