伪类选择器和盒模型常见属性 - 学习日记

首页 > 博客列表 > 伪类选择器和盒模型常见属性

博主信息

博文 29

粉丝 1

访问量 22624

专题推荐

更多>

伪类选择器

常用伪类选择器我们简单分为三种

结构伪类
- :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。参数是元素的索引。索引从1开始
- n可以是一个数字，一个关键字，或者一个公式
- 使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量
状态伪类
链接伪类

名称	用法
结构伪类	li:nth-of-type();p:nth-child()
状态伪类	input:disabled
链接伪类	a:link;a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <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>
    </ul>
</body>
</html>
/* CSS文件 */
/* 选择第一个 */
li:nth-of-type(1) {
    background-color: blue;
}
/* 选择最后一个 */
li:nth-last-of-type(1) {
    border: 5px solid violet;
}
/* 选择全部 */
li:nth-of-type(n) {
    background-color: blueviolet;
}
/* 选择奇数 */
li:nth-of-type(2n+1) {
    background-color: yellow;
}
/* 选择前三个 */
li:nth-of-type(-n+3) {
    background-color: cornflowerblue;
}
/* 选择最后三个 */
li:nth-last-of-type(-n+3) {
    background-color: aqua;
}
/* 选择偶数 */
li:nth-of-type(even) {
    color: brown;
}
/* 选择奇数 */
li:nth-of-type(odd) {
    border: 5px solid red;
}

盒模型常见属性

盒模型常用属性有

margin：外边距
border：边框
padding：内边距
box-sizing：定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等
background-clip：指定背景绘制区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <div class="box">我是盒子</div>
</body>
</html>
/* CSS代码 */
.box {
    height: 150px;
    width: 200px;
    background-clip: content-box;
    border: 3px dashed yellowgreen;
    box-sizing: border-box;
    margin: 0px;
    padding: 5px;
    background-color: blueviolet;
    color: burlywood;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown基础语法和emmet基础语法

2022-07-05 06:03:09