首页 > > 网页制作 > css >

CSS3结构类选择器补充

2020-02-02 16:01:02来源：博客园阅读 ()

CSS3结构类选择器补充

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

:not 否定选择器

<!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权重与权值

行内样式 1000

id选择器 100

类、伪类、属性选择器 10

元素、伪元素 1

通配符 0

权重相同时根据就近原则

伪元素选择器，：：

::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>