css基礎快速入門-14偽類first-letter

學生就可以看懂的css基礎實戰系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。

可能比較枯燥，但是再堅持一下，前端知識的大門就會大開了。

了::before 和::after，CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個，這三個相對來說就簡單得多，用法也較為純粹。沒看過前兩篇文章的，筆者建議大家看看：

CSS 偽元素基礎知識：before 與after （一）、CSS 偽元素基礎知識：content 與counter 實用技巧（二）

::first-line

::first-line顧名思義就是「第一行」，通過這個偽元素可以輕松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：

<p> 前端達人公眾號，已經有五年的歷史啦，目前有幾千名前端開發者訂閱，公眾號的宗旨是：分享當下最實用的前端技術。關注前端達人，與數千名達人們一起進步！期待你的訂閱和關注！
</p>

CSS 只要這樣寫，頁面呈現出來的第一行就會是綠色的，不論視窗如何縮放，只有第一行會是綠色的。

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

::first-letter

::first-letter顧名思義就是「第一個字」，通過這個偽元素，可以做出許多文章第一個字放大或變色的效果，我們這里就用剛剛上面那段文字為例，把第一個字用下段的CSS 來做變化，就可以看到第一個字放大且變色了的效果。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

雖然把第一個字放大了，但排版上仍然有點亂沒有美感，這時你可以加入line-height、float或padding等屬性進行修正，經過修正后，你會驚喜的發現很像報紙雜志會出經常用的效果（第一個字會跨行顯示）。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

不過很有趣的是，在實際應用的過程里，發現「有一些符號」是無法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符號，又會跟著一起放大...( 到底是怎樣？ )

經過查詢W3C的官網，發現了下面這段話，意思大概就是說網頁里面有定義一些所謂「包覆式、點綴式的標點符號」，如果是這些包覆式的標點符號，基本上就無法放大，反而需要搭配其它字符進行使用，因此，在使用第一個字進行特殊變化時，就要注意有這種特殊狀況會發生。

參考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

::selection 是個十分常見的偽元素，它就是負責一段選取文字的效果，以下面這段CSS來說，選取后的文字，就會是深色背景，黃色文字。

p::selection{
 color:yellow;
 background:#543;
}

延伸閱讀——用JavaScript操控偽元素

雖然我們能用CSS操控偽元素，但因為偽元素不存在于網頁元素內，所以無法通過JavaScript常規操控DOM的方式來修改或控制，不過JavaScript身為一個神通廣大的編程語言，仍然是有方法可以辦到的。

讀取偽元素屬性

一般來說使用JavaScript讀取某個元素DOM里的屬性不難，但相對來說要讀取一個不存在網頁里的元素就不容易，如果要讀取偽元素屬性，可以通過getComputedStyle來獲得，getComputedStyle是個可以獲取當前元素「所有的CSS屬性值」，讀取后會返回一個Object CSSStyleDeclaration，而這個屬性是只讀的，無法進行修改。

使用方法：window.getComputedStyle('元素', '偽元素')

舉例來說html 放入一個div 以及一個span，待會會用這個span 來顯示div 的::before 屬性。

<div id="d">我是 div</div>
<span id="s"></span>

CSS 的部分指定偽元素的content和color。

#d::before{
 content:'偽元素的content ';
 color:red;
}

JavaScript使用window.getComputedStyle(d,'::before')獲取div里頭偽元素使用的style，然后顯示在span里面。

var d=document.getElementById('d');
var s=document.getElementById('s');
var b=window.getComputedStyle(d,'::before');
s.innerHTML=b.content +'<br/>'+b.color;

最后頁面呈現的結果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內容，緊接著是偽元素的顏色屬性。

修改偽元素屬性

我們可以讀取屬性值也就一定要嘗試修改，不過修改偽元素的屬性其實比想像中的難，必須通過insertRule這個方法在指定的style里插入「預設的規則」，讓這個規則去影響偽元素的屬性表現。

用法：style 標簽元素.insertRule(樣式規則, 0)

舉例來說我們的網頁布局如下，一開始開頭的部分有兩組style，第一組是我們賦予元素的樣式屬性，第二組則是要來定義規則的style，因為要加入規則，所以讓第二組style有一個id。至于html就放入一個div。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
 <style>
 #d::before{
 content:'偽元素的 content ';
 color:red;
 }
 </style>
 <style id="css"></style>
</head>
<body>
 <div id="d">我是div</div>
</body>
</html>

在完全沒有編寫JavaScript的狀態，應該會呈現如下圖的樣子：

JavaScript開聲明一個變量css，通過id獲取style，然后使用在指定一個變量給css.sheet，就可以通過insertRule的方法修改了。需要注意的是，由于規則加入時會放在整串style的開頭(第二個值預設0 )，所以純粹使用一個#d是無法覆蓋原本的屬性( CSS權重問題)，所以這邊使用#d#d兩次，就可以在權重上壓過原本的屬性。(當然如果要用!important也是可以)

var css=document.getElementById('css');
var d=document.getElementById('d');
var c=css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);

如此一來，呈現出來的效果就是通過JavaScript修改的。

修改偽元素content

我們知道::before和::after的content可以通過attr獲取父元素的屬性，因此通過改變這個屬性，就能間接連帶改變content的內容，舉例來說有個div，我們指定它的data-text="我是預設文字"，然后放兩個按鈕，期望點選不同的按鈕，會更換content不同的內容。

<button id="b1">顯示 ABC</button>
<button id="b2">顯示 123</button>
<div data-text="我是預設文字">我是 div</div>

接著設定CSS，關鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通過setAttribute更改div的屬性，就會看到content的內容修改了。

var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var d=document.querySelector('div');
b1.addEventListener('click',function(){
 d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
 d.setAttribute('data-text','123');
});

雖然說我們可以通過JavaScript 來操控偽元素，但偽元素終究不是真正的網頁元素，也因此操作起來也不如基本操作網頁元素DOM 來的簡便，所以如果可以，還是盡量用正常的操控模式吧。

文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，把上述兩篇文章合成了一篇，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正

小結

關于偽元素的系列文章就介紹到這里，如果你喜歡此系列文章，麻煩各位點贊和轉發，謝謝啦。關于偽元素的用法，雖然說大部分的時候用不太到，但某些時候也不失為強化網頁效果、或是優化網頁結構的好方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

在線咨詢

上一篇：Vue.js v3.0 教程-模板語法
下一篇：21天學通HTML+CSS+JavaScript W

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。