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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。