css選擇器2——僞類選擇器

時間 2019-11-17

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

一.僞元素選擇器css

1. E:first-letter/E::first-letter(css3時代兩個冒號) 設置元素內的第一個字符的樣式。html

例如：css3

p::first-letter{font-size:50px;}

2. E:first-line/E::first-line 設置元素內的第一行的樣式。ui

例如：url

p::first-line{color:green;}

3. E:before/E::before在每一個E元素的內容以前插入內容。用來和content屬性一塊兒使用。spa

例如：htm

a::before{
    content:"點擊";
    color:green;
}

4. E:after/E::after在每一個E元素的內容以後插入內容。用來和content屬性一塊兒使用。對象

例如：blog

a::after{
    content:"詩句";
    color:red;
}

a::after{
    content:url(images/4.jpg);
    color:red;
}

CSS3新增：文檔

5. E::selection 設置對象被選擇時的顏色。

例如：

p::selection{background:red;}

test2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
    <p>
        錦瑟———李商隱<br><br>
        錦瑟無故五十弦，一弦一柱思華年。<br><br>
        莊生曉夢迷蝴蝶，望帝春心託杜鵑。<br><br>
        滄海月明珠有淚，藍田日暖玉生煙。<br><br>
        此情可待成追憶？只是當時已惘然。<br><br>
    </p>
    <a href="">搜索</a><br>
</body>
</html>

style2.css:

p::first-letter{font-size:50px;}
p::first-line{color:green;}
a::before{
    content:"點擊";
    color:green;
}
a::after{
    content:url(images/4.jpg);
    color:red;
}
p::selection{background:red;}

二. 僞類選擇器

1. 結構僞類選擇器

1）E:first-child 父元素的第一個子元素E。

例如：

li:first-child{background:red;}

ul>li:first-child{color:red;}

td:first-child{color:red;}

CSS3新增：

2）:root 選擇文檔的根元素。

例如：

:root{background:red;}

3）E:last-child 最後一個子元素E。

例如：

td:last-child{color:red;}//td的父元素中最後一個元素

4）E:only-child 僅有的一個子元素E。

例如：

li:only-child{color:red;}//li的父元素中只有一個li

5）E:only-of-type 只有一種類型的子元素。

例如：

p:only-of-type{color:green;}//p的父元素中只有一種類型的子元素

6）E:nth-child(n) 匹配父元素的第n個子元素E。

能夠直接用數值：好比2

能夠用奇數（odd）偶數（even）

能夠用公式3n

例如：

tr:nth-child(2){color:red;}

7）E-nth-last-child(n) 匹配父元素的倒數第n個元素E。

例如：

tr:nth-last-child(2){color:red;}

tr:nth-last-child(odd){color:red;}

tr:nth-last-child(even){color:red;}

tr:nth-last-child(3n-1){color:red;}

8）E:first-of-type 匹配同類型中的第一個同級兄弟元素E。

例如：

p:first-of-type{color:red;}//p元素同一級別中的第一個，在同一個父元素下幾個p中的第一個

9）E:last-of-type 匹配同類型中的最後一個同級兄弟元素E。

例如：

p:last-of-type{color:green;}

10）E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E。

例如：

p:nth-of-type(2){color:green;}

11）E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E。

例如：

p:nth-last-of-type(2){color:red;}

12）E:empty 匹配沒有任何子元素（包括text節點）的元素E。

例如：

div:empty{border: 1px solid;  width:300px;height:200px; }//div中不能有任何內容

test2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
<ul>
    <li>我是ul的子元素1</li>
    <li>我是ul的子元素2
        <ol>
            <li>我是ul的孫元素1</li>
            <li>我是ul的孫元素2</li>
            <li>我是ul的孫元素3</li>
            <li>我是ul的孫元素4</li>
            <li>我是ul的孫元素5</li>
        </ol>
    </li>

    <li>我是ul的子元素3
        <ul>我只有一個子元素
            <li>我是li元素的內容</li>
        </ul>
    </li>
    <li>我是ul的子元素4</li>
</ul><hr>
<div>
    <h2>我是標題1</h2>
    <p>我是段落p1</p>
    <p>我是段落p2</p>
    <p>我是段落p3</p>
    <p>我是段落p4</p>
    <h3>我是標題2</h3>
    <p>我是段落p5</p>
    <p>我是段落p6</p>
    <p>我是段落p7</p>
    <p>我是段落p8</p>
</div>
<div id="div3"></div>
<div>
    <p>
        錦瑟———李商隱<br><br>
        錦瑟無故五十弦，一弦一柱思華年。<br><br>
        莊生曉夢迷蝴蝶，望帝春心託杜鵑。<br><br>
        滄海月明珠有淚，藍田日暖玉生煙。<br><br>
        此情可待成追憶？只是當時已惘然。<br><br>
    </p>
    <a href="">搜索</a><br>
</div>

<table style="width:400px;height:80px;padding:15px">
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
    <tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr>
</table>
<a href="#">搜索</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

style2.css:

/*:root{background:red;}*/
/*li:first-child{background:red;}*/
/*ul>li:first-child{color:red;}*/
/*p:first-child{color:red;}*/
/*td:last-child{color:red;}*/
/*li:only-child{color:red;}*/
/*p:only-of-type{color:green;}*/

/*tr:nth-child(2){color:red;}*/

/*tr:nth-last-child(3n-1){color:red;}*/

/*p:first-of-type{color:red;}*/
/*p:last-of-type{color:green;}*/
/*p:nth-of-type(2){color:green;}*/
/*p:nth-last-of-type(2){color:red;}*/
div:empty{border: 1px solid;  width:300px;height:200px; }

2.UI僞類選擇器及其餘選擇器

E:active 向被激活的元素添加樣式。

例如：

a:active{background:green;} //當鼠標點擊時就處於激活狀態

E:hover 當鼠標懸浮在元素上方時，向元素添加樣式。

例如：

a:hover{color:red;}

E:link 向未被訪問的連接添加樣式。

例如：

a:link{color:lightseagreen;}

E:visited 向已被訪問的連接添加樣式。

例如：

a:visited{color:yellow;}

E:focus 向擁有鍵盤輸入焦點的元素添加樣式。

例如：

input:focus{background:yellow;}

E:lang 向帶有指定lang屬性的元素添加樣式

例如：

p:lang(en){color:red;}

CSS3新增：

input:checked 選擇每一個被選中的input元素。

例如：

input:checked{width:50px; height: 60px;}//被選中的時候添加樣式

input:disabled 選擇每一個禁用的input元素。

例如：

input:disabled{background:gray;}//要將表單改爲禁用的

input:enabled 選擇每一個啓用的input元素。

例如：

input:enabled{background:green;}

#E:target 選擇當前活動的錨點元素。

例如：

<style type="text/css">
    a:target{color:green;}
</style>

:not(E) 選擇E元素以外的每一個元素。

例如：

:not(input){color:yellow;}

text2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
    <style type="text/css">
        a:target{color:green;}
    </style>
</head>
<body>
    <a href="http://www.t" target="_blank">51自學網</a>
        <fieldset>
            <legend>註冊用戶</legend>
            <p lang="en">
                <input type="text" name="user" id="user" placeholder="帳號" required="">
                <label for="user">帳號</label>
            </p>
            <p>
                <input type="password" name="password" id="password" placeholder="密碼">
                <label for="password">密碼</label>
            </p>
            <p>
                <label for="tel">電話號碼</label>
                <input type="tel" disabled="" name="tel" id="tel" placeholder="電話">
            </p>
            <p>
                <label for="email">電子郵件</label>
                <input type="email" name="email" id="email" placeholder="電子郵箱">
            </p>
            <p>
                <input type="radio" name="fwtk" value=""><span>贊成服務條款：</span><br>
                <input type="radio" name="fwtk" value=""><span>不一樣意服務條款：</span><br>
                <a href="">閱讀服務條款</a>
            </p>
                <button type="submit" value="註冊" title="加入會員">註冊用戶</button>
        </fieldset>
<a href="#">百度</a>
</body>
</html>

style2.css:

/*a:active{background:green;}*/

/*a:hover{color:red;}*/

/*a:visited{color:yellow;}*/

/*a:link{color:lightseagreen;}*/

/*p:lang(en){color:red;}*/

/*input:checked{width:50px; height: 60px;}*/

/*input:enabled{background:green;}*/

/*input:focus{background:yellow;}*/

/*input:disabled{background:gray;}*/

:not(input){color:yellow;}

other notes:

placeholder屬性提供可描述輸入字段預期值的提示信息（hint）。

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。

placeholder屬性適用於如下的<input>類型：text,search,url,telephone,email以及password。