前端小白的学习之路(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*/

相关推荐
Chef_Chen30 分钟前
从0开始学习机器学习--Day13--神经网络如何处理复杂非线性函数
神经网络·学习·机器学习
lulu_gh_yu1 小时前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
Re.不晚2 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
幼儿园老大*2 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
3 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
ctrey_3 小时前
2024-11-4 学习人工智能的Day21 openCV(3)
人工智能·opencv·学习
黎金安3 小时前
前端第二次作业
前端·css·css3
啦啦右一3 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
霍格沃兹测试开发学社测试人社区3 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
今天我又学废了4 小时前
Scala学习记录,List
学习