前端小白的学习之路(CSS3 一)

提示:CSS3 是 Cascading Style Sheets(层叠样式表)的第三个主要版本,引入了许多新的特性和增强功能,用于设计和布局网页。本章记录CSS3新增选择器,盒子模型。


目录

一、C3新增选择器

1) 属性选择器 属性选择器)

1.[class^='className']

2.tag[class^='className']

[3.tag[class='className'\]](#3.tag[class='className'])

4.tag[class*='className']

5.input[type='typeName']

2)伪类选择器伪类选择器)

1.first-child

2.last-child

[3.nth-child(n) 与 nth-of-type(n)](#3.nth-child(n) 与 nth-of-type(n))

3)其他选择器其他选择器)

1.empty

2.not('className')

3.+相邻选择器

4.~兄弟选择器

二、盒子模型box-sizing

1.content-box

2.border-box


一、C3新增选择器

1) 属性选择器

1.[class^='className']

html 复制代码
<style>
/*选中所有class属性以box开头的标签*/
        [class^="box"] {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

2.tag[class^='className']

html 复制代码
<style>
    /* 选中所有class属性以box开头的div标签 */
    div[class^="box"] {
        background-color: red;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

3.tag[class$='className']

html 复制代码
<style>
    /* 选中所有class属性以bbb结束的div标签 */
    div[class$="bbb"] {
        border-radius: 20px;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

4.tag[class*='className']

html 复制代码
<style>
   /* 选中所有class属性包含aaa的div标签 */
    div[class*="aaa"] {
        opacity: .2;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

5.input[type='typeName']

html 复制代码
<style>
    /* 选择文本输入框标签 */
    input[type="text"] {
        height: 40px;
        border: 2px solid blue;
        box-sizing: border-box;
        float: left;
    }

    /* 选择submit按钮标签 */
    input[type="submit"] {
        height: 40px;
        border: 2px solid deeppink;
        cursor: pointer;
        float: left;
    }
</style>
</head>

<body>
    <div class="clearfix">
        <input type="text">
        <input type="submit">
    </div>
</body>

2)伪类选择器

1.first-child

选择第一个标签

html 复制代码
<style>
    ul {
        margin-top: 10px;
    }

    /*选择ul下的第一个li标签*/
    ul li:first-child {
        font-size: 40px;
        color: red;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

2.last-child

选择最后一个标签

html 复制代码
<style>
    ul {
        margin-top: 10px;
    }

    /*选择ul下的第最后一个个li标签*/
    /*如果最后一个不是li标签就会选择到那个标签*/
    ul li:last-child {
       font-size: 40px;
       color: green;
    }
    /*这才是最后一个标签*/
    ul div:last-child {
       font-size: 40px;
       color: green;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

3.nth-child(n) 与 nth-of-type(n)

选择第n个标签

html 复制代码
<style>
    ul {
        margin-top: 10px;
    }

    /* 选择第2个 */
    ul li:nth-child(2) {
        color: purple;
        font-weight: bold;
        font-size: 30px;
    }
    /* 选择第3个 */
    ul li:nth-of-type(3) {
        color: yellowgreen;
        font-weight: bold;
        font-size: 20px;
    }
    /* 选择偶数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
    ol li:nth-child(2n) {
        background-color: red;
    }

    /* 选择奇数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
    ol li:nth-child(2n-1) {
        background-color: blue;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

3)其他选择器

1.empty

没有任何内容的标签

html 复制代码
<style>

    /* 选择没有任何内容的标签 */
    ul li:empty {
        height: 40px;
        width: 100px;
        background-color: pink;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

2.not('className')

选择除了包含className类名的其他标签

html 复制代码
<style>
/* 选择除了类名叫.demo的所有其他li标签 */
    ol li:not(.demo) {
        list-style: none;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li class='demo'>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

3.+相邻选择器

选择相邻的标签

html 复制代码
<style>
    /* 相邻选择器 */
    .current+li {
        height: 100px;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

4.~兄弟选择器

选择兄弟标签

html 复制代码
<style>
    /* 兄弟选择器 */
    .current~li {
        opacity: .3;
    }
</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

二、盒子模型box-sizing

box-sizing 是一个 CSS 属性,用于指定元素的盒子模型的计算方式。它有以下几种取值:

1.content-box

css 复制代码
box-sizing: content-box;
/*默认属性,表示内容盒子,盒子模型总宽高=width/height+左右/上下padding+左右/上下border*/

2.border-box

css 复制代码
box-sizing: border-box;/*表示怪异盒子,盒子模型总宽高=width/height*/

相关推荐
Bald Baby20 分钟前
JWT的使用
java·笔记·学习·servlet
心怀梦想的咸鱼1 小时前
UE5 第一人称射击项目学习(四)
学习·ue5
AI完全体1 小时前
【AI日记】24.11.22 学习谷歌数据分析初级课程-第2/3课
学习·数据分析
Mephisto.java2 小时前
【大数据学习 | Spark-Core】Spark提交及运行流程
大数据·学习·spark
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
yuwinter2 小时前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
red_redemption2 小时前
自由学习记录(23)
学习·unity·lua·ab包
幽兰的天空3 小时前
默语博主的推荐:探索技术世界的旅程
学习·程序人生·生活·美食·交友·美女·帅哥
沐泽Mu4 小时前
嵌入式学习-C嘎嘎-Day05
开发语言·c++·学习
你可以叫我仔哥呀4 小时前
ElasticSearch学习笔记三:基础操作(一)
笔记·学习·elasticsearch