零基础学习CSS(9)——:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type、:target、:lang、:not

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

:nth-child(n)：https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html
:nth-last-child(n)：https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html
:nth-of-type(n)：https://man.ilovefishc.com/pageCSS3/dotnth-of-type.html
:nth-last-of-type：https://man.ilovefishc.com/pageCSS3/dotnth-last-of-type.html
:target：https://man.ilovefishc.com/pageCSS3/dottarget.html
:lang：https://man.ilovefishc.com/pageCSS3/dotlang.html
:not：https://man.ilovefishc.com/pageCSS3/dotnot.html

*通过 nth-child(n) 和 nth-last-child(n) 设置父元素下第 n 个元素和倒数第 n 个元素的样式： *

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置第三个和倒数第三个的样式 */
        p:nth-child(3) {
            border: 2px solid green;
        }
        p:nth-last-child(3) {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <span>这是第一个</span>
    <p>I <strong>love</strong> <span>FishC</span></p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
</body>
</html>

image.png

:nth-of-type(n) 和 nth-of-type(n) 设置父元素下指定类型的第 n 个和倒数第 n 个元素：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置第三个和倒数第三个的样式 */
        p:nth-of-type(3) {
            border: 2px solid green;
        }
        p:nth-last-of-type(3) {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <span>这是第一个</span>
    <p>I <strong>love</strong> <span>FishC</span></p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <span>这是最后一个</span>
</body>
</html>

image.png

:target 可以实现送定义锚点并点击跳转的操作：

<!DOCTYPE html>
<html>
<head>
    <title>其他伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置锚点的样式 */
        :target {
            border: 2px solid green;
            background-color: #e5eecc;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p><a href="#fishc1">跳转至内容 1</a></p>
    <p><a href="#fishc2">跳转至内容 2</a></p>
    <p><a href="#fishc3">跳转至内容 3</a></p>
    <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
    <p id="fishc1"><b>内容 1...</b></p>
    <p id="fishc2"><b>内容 2...</b></p>
    <p id="fishc3"><b>内容 3...</b></p>
</body>
</html>

image.png

:lang 用于选定带有以指定值开头的 lang 属性的元素：

<!DOCTYPE html>
<html>
<head>
    <title>其他伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* :lang 为不同的 lang 属性赋值 */
        :lang(en) {
            border: 2px solid red;
        }
        :lang(ch) {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <p lang="en">I love FishC.</p>
    <p lang="ch">我爱鱼C。</p>
</body>
</html>

image.png

:not(select) 选定除指定元素外的所有元素：

<!DOCTYPE html>
<html>
<head>
    <title>其他伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 使用否定选择器 */
        span {
            color: red;
        }
        :not(span){
            color:green;
        }
    </style>
</head>
<body>
    <span>text</span>
    <p lang="en">I love FishC.</p>
    <p lang="ch">我爱鱼C。</p>
</body>
</html>

image.png

最后编辑于：2020.10.19 14:17:01