iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 8

偽類與偽元素-30天學會HTML+CSS,製作精美網站

昨天介紹了各種選擇器,今天介紹偽類及偽元素樣式設定,可以讓畫面有更多的樣式變化,也減少html code的撰寫。讓我來為你一一介紹各種屬性使用方式吧~

偽類選擇器

偽類選取器是特殊的效果加到特定選擇器上,已經存在的東西,是以單冒號「:」作為開頭,偽類分為狀態偽類、結構性偽類、語言偽類、表單偽類、目標偽類

狀態偽類

是標籤常見的

  • :link:未訪問過的連結
  • :visited:已訪問過的連結
  • :hover:滑鼠滑入
  • :focus:選取具有焦點的輸入元素
  • :active:被點擊的那一刻

結構性偽類

:root根元素

在html中根元素是html元素,也可以寫body或html

/*使用根元素*/
:root{
    background:#efefef;
}
/*使用html*/
html{
    background:#efefef;
}
/*使用body*/
body{
    background:#efefef;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053CgKbQuVRVS.png

:first-child 選擇第一個子元素

針對ul元素裡的第一個li元素

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
ul li:first-child{
	background-color:#d1e1ff;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053DPOKjv7wf4.png

:last-child 選擇最後一個子元素

針對ul元素裡的最後一個li元素

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
ul li:last-child{
	background-color:#d1e1ff;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053BL41zQFt42.png

:nth-child(n)

用來定位父元素裡的一個或多個特定的子元素。
n是參數,可以是是整數(1,2,3….)、表達式(2n+2)、關鍵詞(odd, even)。
通常會用在列表,間隔填色或是item的間距設定

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
</ul>

選擇ul元素裡的第七個li元素

ul li:nth-child(7){
	background-color:#d1e1ff;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053fuQkAKw5Jx.png
選擇ul元素裡的三倍數

ul li:nth-child(3n){
	background-color:#ffe893;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053WL57nag0Jc.png
選擇ul元素裡的奇數

ul li:nth-child(odd){
	background-color:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053aGekstXxWf.png
選擇ul元素裡的偶數

ul li:nth-child(even){
	background-color:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053DedbDXeDXr.png

:nth-last-child(n)

在父元素裡倒數第n個位置或特定某元素。用法與:nth-child同,方向不同而已。

:first-of-type

指定元素的類型的第一個元素。

<div>
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p>item4</p>
</div>
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>
/*選擇p元素的第一個*/
p:first-of-type{
	background:#efefef;
}
/*選擇li元素的第一個*/
li:first-of-type{
	background:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053k8QouubeaR.png

  • :last-of-type
    指定元素的類型的最後一個元素。與:first-of-type相反。
<div>
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p>item4</p>
</div>
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>
/*選擇p元素的最後一個*/
p:last-of-type{
	background:#efefef;
}
/*選擇li元素的最後一個*/
li:last-of-type{
	background:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053x27bQSO9cR.png

:nth-of-type(n)

指定父元素內中的某種類型的子元素,n可以是整數、關鍵詞、表達式

<div>
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p>item4</p>
</div>
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>
/*選擇p元素的2的倍數*/
p:nth-of-type(2n){
	background:#efefef;
}
/*選擇li元素的奇數行*/
li:nth-of-type(odd){
	background:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053q69VPjPaO8.png

:nth-last-of-type(n) 選擇

在父元素裡倒數第n個位置或特定某類型元素。與:nth-of-type相反。

:only-child

在父元素裡只有一個子元素
範例:box2裡面只有一個span子元素,所以背景色會是綠色

<div class="box1">
  <p>item</p>
  <span>content</span>
</div>
<div class="box2">
  <span>content2</span>
</div>
span:only-child{
	background:#b1ffab;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053VjknDYygF3.png

:only-of-type

在父元素內只有一個類型的子元素
範例:box2裡面只有一個p元素,所以box2背景色為藍色

<div class="box1">
  <p>item</p>
  <p>item2</p>
</div>
<hr>
<div class="box2">
  <p>item</p>
</div>
p:only-of-type{
	background:#bfdbff;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053NuQyXXLg3P.png

:empty

用來設定沒有任何元素的內容,連一個空白都不行
範例:在表格資料沒有內容時

<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td></td>
    <td>600</td>
  </tr>
</table>
table{
	border-collapse:collapse;
}
table td{
	padding:5px 10px
}
table td:empty{
	background-color:#efefef
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053HIM5YC2MaH.png

語言偽類

:lang

選擇指定語言的元素
範例:lang屬性為"tw"的元素

<p lang="en">English lang</p>
<p lang="tw">中文語言區塊</p>
p:lang(tw){ 
	background:#efefef;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053GCfmeTjaEZ.png

表單偽類

:checked

常用在表單的單選與複選,下面以radio自訂樣式

radio:
<div class="select-item radio-item">
  <input type="radio" id="man" name="sex" checked>
  <label for="man"></label>男
</div>
<div class="select-item radio-item">
  <input type="radio" id="woman" name="sex">
  <label for="woman"></label>女
</div>
.select-item {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}
.select-item input {
  vertical-align: middle;
  width: 14px;
  height: 14px;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  margin: 0 5px 0 0 ;
}
.select-item label {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: -1;
  width: 14px;
  height: 14px;
  border: 1px solid #409eff;
  border-radius: 50%;
}
.select-item input:checked + label {
  background-color: #409eff;
}
.select-item input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
}

:disabled/:enabled

不可用/可用,常用在輸入框

 enabled: <input type="text"  /><br>
 disabled: <input type="text" disabled="disabled"  />
input[type="text"]:enabled{
	background:#fff;
	border:1px solid #d4d9de;
}
input[type="text"]:disabled{
	background:#d4d9de;
    border:1px solid #d4d9de;
}

https://ithelp.ithome.com.tw/upload/images/20210923/201120539CYGABZbAL.png

否定偽類

:not:某元素之外的元素,範例樣式指的是.not區塊內不是p的元素

<div class="not">
    <div>div</div>
    <p>paragraph</p>
    <p>paragraph</p>
</div>
.not div:not(p) {
    background-color: #efefef;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053jRJAdZAeSu.png

偽元素選擇器

偽元素不是真正的網頁元素,是透過CSS樣式創造新的假元素,以兩個冒號「::」作為開頭,偽元素有

::before

元素之前加入內容,有content屬性,才會顯示在畫面上

<span>內容</span>
```css
div::before{
    content:"我是 before,";
    color:blue;
}
```

https://ithelp.ithome.com.tw/upload/images/20210923/20112053D19vWWts2M.png

::after

元素之後加入內容,有content屬性,才會顯示在畫面上

<span>內容</span>
```css
div::after{
    content:",我是 after。";
    color:blue;
}
```

https://ithelp.ithome.com.tw/upload/images/20210923/20112053EZZ1HJ0Frr.png

::first-line:

p元素的第一行

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

https://ithelp.ithome.com.tw/upload/images/20210923/20112053RBaZiDty0U.png

::first-letter:

元素的第一個字

p::first-letter{
  font-weight:bold;
  font-size:38px;
  color:green;
  margin-right:5px
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053wQW9tfLrgs.png

::selection

選取文字反白後

p::selection{
  color:#fff;
  background:#ccc;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053ZBg3oK41zd.png

偽元素運用

偽元素內放字串

<div class="tips">提示訊息!</div>
.tips::before {
  content: 'tips:';
  color: red;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053UFURQW4PCx.png

偽元素內放圖片

  • url
    範例:是將li前面放置小圖
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
ul{
	list-style:none;
}
li::before{
	content:url(img.gif);
    display:inline-block;
    margin-right:5px;
}
  • 背景圖
    範例:在li前面放置小圖,以背景圖方式設定
ul{
	list-style:none;
}
li::before{
	content:"";
    display:inline-block;
    margin-right:5px;
    background-image:url(img.gif);
    width:16px;
    height:16px;
    
}

https://ithelp.ithome.com.tw/upload/images/20210923/201120534iwa1quMG4.png

偽元素內放attr

<div id="checked" class="text">選擇div的id:</div>
.text::after {
  content: '#' attr(id);
  color: red;
}

https://ithelp.ithome.com.tw/upload/images/20210923/20112053R3JDMdQmRI.png


上一篇
網頁選擇器-30天學會HTML+CSS,製作精美網站
下一篇
網頁常用單位-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言