一、CSS3

发表于 | 更新于: | 分类于 ， |
| 字数: 2.1k | 时长 ≈ 10 分钟

一、CSS3

1.1 css3

css3一些改变：

1
2
3
4
5
6
7
8
9
10
盒模型
弹性盒
媒体查询
background的改变
transition 过渡
transform 变形
animation 动画
圆角
盒子阴影和文字阴影
选择器的增加

css3 的使用不用进行任何声明，HTML可以使用css3 ，html 5 也可以使用css3 。只要浏览器支持就能渲染。

浏览器对于css3不认识的新属性不会报错，采用静默不处理方式。

1.2 属性选择器

之前学习的选择器有：

1
2
基础选择器：div{}   #box{}   .box{}   *{} 
高级选择器：div p{}   div.box{}   h3, div, p{}

1.2.1 属性选择器：[]

css 3 中通过标签属性进行选中元素

[]

1
2
3
4
5
6
7
8
9
10
11
12
13
img {
    width: 200px;
    border: 10px solid #eee;
}
/* 属性选择器 */
img[src="images/02.jpg"] {
    border-color: red;
}

<img src="images/01.jpg" alt="">
<img src="images/02.jpg" alt="">
<img src="images/04.jpg" alt="">
<img src="images/05.jpg" alt="">

NnPDmQ.png

1.2.2 开头匹配：^=

1
2
3
4
5
6
7
8
9
/* 开头匹配  选择href中以 html开头的 a 标签*/
a[href ^="html"] {
        color: red;
    }

<a href="html/01.page">html/01.page</a>
<a href="html/02.page">html/02.page</a>
<a href="page/01.html">page/01.html</a>
<a href="page/02.html">page/02.html</a>

NnPjXD.png

1.2.3 结尾匹配：$=

1
2
3
4
5
6
7
8
9
/* 结尾匹配  选择href中以 html结尾的 a 标签*/
    a[href $="html"] {
        color: red;
    }

<a href="html/01.page">html/01.page</a>
<a href="html/02.page">html/02.page</a>
<a href="page/01.html">page/01.html</a>
<a href="page/02.html">page/02.html</a>

Nnil90.png

1.2.4 任意匹配：*=

1
2
3
4
5
6
7
8
9
/* 任意匹配  选择href中有 2 的 a 标签*/
    a[href *="2"] {
        color: red;
    }

<a href="html/01.page">html/01.page</a>
<a href="html/02.page">html/02.page</a>
<a href="page/01.html">page/01.html</a>
<a href="page/02.html">page/02.html</a>

NnFV8x.png

1.2.5 分组匹配：~=

表示含义：属性值必须是独立单位（只存在一个属性值，或者有其他属性值但必须用空格隔开）

html 5 可以自定义属性，以data- 开头

1
2
3
4
5
6
7
8
9
10
11
/* 分组匹配 */
        div[data-xi ~="box"]{
            /* 选中元素属性值必须具有box 并且box是独立成分 */
            background-color: red;
        }

<!-- 分组匹配 -->
    <div data-xi="box">box</div>
    <div data-xi="box box2">box box2</div>
    <div data-xi="box2 box">box2 box</div>
    <div data-xi="box2-box">box2-box</div>

NnF7z6.png

1.2.6 短横匹配：|=

选中元素必须以属性值开头，如果还有其他属性值必须以短横隔开

1
2
3
4
5
6
7
8
9
10
11
/* 短横匹配 */
    div[data-xi |="box"]{
    /* 选中元素属性值必须是box开头 如果有其他属性值必须以短横隔开 */
        background-color: red;
    }

<div data-xi="box">box</div>
<div data-xi="box box2">box box2</div>
<div data-xi="box2 box">box2 box</div>
<div data-xi="box2-box">box2-box</div>
<div data-xi="box-2box">box-2box</div>

NnnD29.png

1.2.7 注意：可以省略标签名

属性选择器并不是必须以标签开头。省略标签名也是合法的。

1
2
3
4
5
6
7
8
9
10
/* 省略标签名 */
    [data-xi ^="box2"]{
        background-color: red;
    }

<div data-xi="box">box</div>
<div data-xi="box box2">box box2</div>
<div data-xi="box2 box">box2 box</div>
<div data-xi="box2-box">box2-box</div>
<div data-xi="box-2box">box-2box</div>

NnnRUO.png

1.2.8 注意：属性选择器也可以使用连续交集

1
2
3
4
5
6
7
8
9
10
/* 属性选择器可以使用交集 中间不能有空格 */
    img[src="images/02.jpg"][alt="图片加载失败"] {
        border-color: red;
    }

<img src="images/01.jpg">
<img src="images/02.jpg" alt="图片加载失败">
<img src="images/02.jpg">
<img src="images/04.jpg">
<img src="images/05.jpg">

NnnvGQ.png

1.3 儿子序选择器

儿子序选择器：

通过儿子在父级元素排名进行选中，只关心儿子在父亲盒子排名是老几，不关心儿子标签类型。

1.3.1 :first-child { }

元素：first-child {选中父级元素中第一个儿子}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box h3:first-child {
            /* 表示h3是box中的老大 */
            color: red;
        }

<div class="box">
        <h3>我是h3</h3>
        <h3>我是h3</h3>
        <h3>我是h3</h3>
        <h3>我是h3</h3>
        <h3>我是h3</h3>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
    </div>

NnuyWQ.png

1
2
3
.box p:first-child {
            color: red;
        }

Nnu4oT.png

1.3.2 :last-child { }

元素：last-child {选中父级元素中最后一个儿子}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box p:last-child {
        /* 表示p是box中的最后一个 */
        color: red;
        font-weight: bold;
    }

<div class="box">
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
</div>

NnK6AK.png

1.3.3 :nth-child(n) {}

元素：nth-child(n) {任意一个儿子} n 是从 1 开始数的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box h3:nth-child(3) {
        /* 表示h3是box中第3个 */
        color: red;
    }

<div class="box">
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
</div>

NnM3gH.png

1.3.4 :nth-child(an+b) {}

元素：nth-child(an+b) { 连续多个} n 是从0开始

an 表示2、4、6……

an+b 表示1、3、5……

1
2
3
4
.box h3:nth-child(2n) {
    /* 表示h3是box中第 2、4、6、8、……个 */
    color: red;
}

NnQFdP.png

1
2
3
4
.box h3:nth-child(2n+1) {
    /* 表示h3是box中第 1、3、5、7、……个 */
    color: red;
}

NnQfeI.png

1
2
3
4
5
6
7
8
9
10
11
12
table, tr, td {
        border: 1px solid #000;
        /* 成为单线表格 */
        border-collapse: collapse;
    }
    td {
        width: 100px;
        height: 20px;
    }
    table tr:nth-child(3n+2) {
        background-color: lightblue;
    }

tr20 20行 td10 10列

NJoFit.png

1.3.5 nth-last-child(n) { }

元素：nth-last-child(n) {倒数第几个儿子} n 从倒数第一开始

1
2
3
.box p:nth-last-child(3) {
            color: red;
        }

NJoJQU.png

1.3.6 :nth-last-child(an+b) { }

元素：nth-last-child(an+b) { 倒数连续多个} n 是从0开始（倒数）

an 表示2、4、6……

1
2
3
.box p:nth-last-child(3n+2) {
            color: red;
        }

NJT17d.png

1.4 儿子类型序选择器

强调同种标签（类型的含义）中排名

:first-of-type 同种标签的老大

:last-of-type 最后一个

:nth-of-type(n) 任意 序号是从1 开始

:nth-of-type(an+b) 任意连续 n从0开始

:nth-last-of-type(n) 任意 n从倒数第一开始

:nth-last-of-type(an+b) 任意连续 n从0开始（倒数）

1
2
3
4
/* 关注的是同种标签中的排名，而不是所有儿子标签中的整体的排名 */
        .box p:first-of-type {
            color: red;
        }

NJTc90.png

1.5 关系节点选择器

1.5.1 后代选择器 div p { }

1.5.2 子代选择器 >

选中元素必须是儿子节点，不能选中孙子等其他元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box > p {
        /* 子代选择器 选中 p 必须是.box 的儿子 */
        color: red;
        font-size: 30px;
    }

<div class="box">
    <p> 我是p标签</p>
</div>
<div class="box">
    <div>
        <div>
            <p>我也是p标签</p>
        </div>
    </div>
</div>

NJ7CCt.png

1.5.3 + 后面第一个亲兄弟（同一个父节点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* + 表示后面第一个亲兄弟 */
    h3 + p {
        color:green;
        font-size: 50px;
    }

<div class="box2">
    <p>我是p</p>
    <p>我是p</p>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <p>我是p</p>
    <p>我是p</p>
    <p>我是p</p>
</div>

NJ7lvT.png

1.5.4 ~ 表示后面所有的亲兄弟

1
2
3
4
5
/* ~ 表示后面所有亲兄弟 */
    h3 ~ p {
        color:green;
        font-size: 50px;
    }

NJ7RPI.png

相关文章
点击查看

本文标题:一、CSS3

文章作者:Mango

发布时间:2020年06月30日 - 21:22:47

最后更新:2020年06月30日 - 21:44:19

原始链接:https://mango185.github.io/post/14671be9.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️