第五章截短文本创建水平滚动面板 CSS3选择器nth css3变量

本文链接：https://blog.youkuaiyun.com/nullccc/article/details/125771876

5.4 断字

word-wrap: break-word;

它可以把容器内长连接截短。

5.4.1 截短文本

<p class="truncate">OK, listen up, I've figured out the key eternalhappiness. All you need to do is eat lots of scones.</p>

truncate {
width: 520px;
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
}

text-overflow: ellipsis; 截断文本

white-space: nowrap声明是为了确保长出来的文本不会折行显示在外部元素中。

5.4.2 创建水平滚动面板

<head>
    <style>
        .wrap{
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        }

        .item{
            display: inline-flex;
            width: 500px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>


<body>
    <div class="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

这里的 white-space: nowrap 意思是有空白的时候不折行。为了把所有内容都保持在一行，我们设置了所有子元素为行内元素。虽然使用的是inline-flex，其实 inline-block 或 inline-table 都可以。

5.6 新 CSS3 选择符

5.6.1 CSS3 属性选择符

<head>
    <style>
        p[alt]{
            color:blue;
        }
        p[alt="supper"]{
            color: brown;
        }
    </style>
</head>

<body>
    <p alt="supper">5555</p>
</body>

两种方式，可选择属性和属性的值。

5.6.2 CSS3 子字符串匹配属性选择符

<head>
    <style>
        /* 以……开头 */
       p[alt^="film"] {
            color:blue;
        }
        /* 包含…… */
        p[alt*="value"] {
            color: brown;
        }
        /*  以……结尾 */
        p[alt$="value"] {
            color: bisque;
        }
    </style>
</head>

<body>
    <p style="font-weight: bold;" alt="film-1">111</p>
    <p style="font-weight: bold;" alt="a-value-a">222</p>
    <p style="font-weight: bold;" alt="a-value">333</p>
</body>

除了这三种，还有空格分割的属性选择符。

<head>
    <style>
        p[alt~="film"] {
            color: red;
        }
    </style>
</head>

<body>
    <p style="font-weight: bold;" alt="a film">111</p>
</body>

5.7 CSS3 结构化伪类

5.7.1 :last-child

<head>
    <style>
        p:first-child{
            font-weight: bold;
        }
        p:last-child{
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>11111</p>
    <p>11111</p>
    <p>11111</p>
</body>

css2 提供了first-child 可以让我们选择第一个匹配的元素，css3新增了 last-child 选择最后一个元素。

5.7.2 nth-child

选奇数个
.nav-Link:nth-child(odd) {
/* 样式 */
}
或者像这样选择偶数个：
.nav-Link:nth-child(even) {
/* 样式 */
}

nth-child 功能强大，首先可以选奇偶。

5.7.3 理解 nth

CSS3 提供了以下几个基于 nth 的规则：

传入整数。比如 nth-child(2) 会选择第二项

传入数值表达式。例如 nth-child(3n) 会从第一项开始，然后每三个选一个

span:nth-child(2n+3) 会按表达式结果选择

span:nth-child(n+3) 选择三个之后的元素

span:nth-child(n+3) 选择三个之前的元素

:empty 伪类选择器

如果选择的是空标签，便会匹配。

<head>
    <style>
        .thing {
            padding: 1rem;
            background-color: violet;
        }
        
        .thing:empty {
            display: none;
        }
    </style>
</head>

<body>
    <div class="thing"></div>
</body>

5.8 CSS 自定义属性和变量

<head>
    <style>
        :root {
        --a: 12px;
        }

        div{
            width: var(--a);
            height: var(--a);
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="thing"></div>
</body>

变量可以定义在伪类上root，也可以在任何地方。

自定义属性以两个短划线开头，接着是自定义属性的名字，然后结尾与常规CSS属性一样，
都是一个冒号。

.Title {
font-family: var(--MainFont);
}

这样使用即可。

5.9 CSS calc

.thing {
width: calc(50% - 10px);
}

使用calc可以计算值。

5.10.2 相对视口的长度

vw：视口宽度
vh：视口高度
vmin：视口中的最小值，等于vw或vh中较小的值
vmax：视口中的最大值，等于vm或vh中较大的值

.modal {
height: 90vh;
}

/*  高度为浏览器窗口高度90% */