CSS3结构类选择器补充

时间 2020-02-04

标签 css3 css 结构选择器补充栏目 CSS 繁體版

原文原文链接

:empty 没有子元素（包括文本节点）的元素css

:not 否认选择器html

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    li:not(:last-of-type){color:red;}
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

css权重与权值测试

行内样式 1000spa

id选择器 100code

类、伪类、属性选择器 10htm

元素、伪元素 1blog

通配符 0it

权重相同时根据就近原则io

伪元素选择器，：：ast

::first-line 选取文本的第一行，只能用于块级元素

::first-letter 选取文本的第一个字，只能用于块级元素

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{width:100px;}
    p:first-line{color:red;}
    p:first-letter{background-color: #abcdef;font-size:20px;}
</style>
</head>
<body>
    <p>这是一段用于测试的文本哦~~~~~~~~~~~~~~~~~~~~</p>
</body>
</html>

::before 在指定元素内部的前面插入，且为行级元素

::after 同理

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p:before{
        content:"这是before文本+";
        color:orange;
    }
</style>
</head>
<body>
    <p>文本</p>
</body>
</html>

能够转为块级元素

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p:before{
        content:"这是before文本+";
        color:orange;
        display: block;
    }
</style>
</head>
<body>
    <p>文本</p>
</body>
</html>

::after 经常使用于清除浮动

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    header{background:#abcdef;}
    .left{float: left;width:50%;}
    .right{float: left;width:50%;}
    header:after{
        display: block;
        content:"";
        clear:both;
    }
</style>
</head>
<body>
    <header>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </header>
</body>
</html>

::selection 选中文本的效果

IE9以上支持，火狐须要加 -moz 前缀

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p::selection{color:orange;}
</style>
</head>
<body>
    <p>这是一段文本哦</p>
</body>
</html>