CSS 屬性 content 有什么作用? 有什么應(yīng)用?(瑣碎知識(shí)點(diǎn)整理)

之前有整理過(guò)一部分知識(shí)點(diǎn), 一直沒(méi)有發(fā)布, 因?yàn)槎际怯嘘P(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無(wú)論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗(yàn)證之后慢慢分享給你們, 現(xiàn)在看到感覺(jué)還挺有意思 芝发。

好了廢話不多說(shuō), 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗(yàn)證過(guò)程的一些圖片作為分享) 诵盼。

content 介紹

1. CSS 中主要的偽元素有四個(gè)：before/after/first-letter/first-line, 在 before/after 偽元素選擇器中, 有一個(gè)content 屬性, 能夠?qū)崿F(xiàn)頁(yè)面中的內(nèi)容插入 古程。

2. CSS 的 content 屬性專門應(yīng)用在 before/after 偽元素上, 用于來(lái)插入生成內(nèi)容 。

3. 該屬性用于定義元素之前或之后放置的生成內(nèi)容绿渣。默認(rèn)地，這往往是行內(nèi)內(nèi)容，不過(guò)該內(nèi)容創(chuàng)建的框類型可以用屬性 display 控制迹辐。

4. 可以配合自定義字體顯示特殊符號(hào) 枪孩。

content 使用的 7 中方式概要

1. 插入純文字

2. 嵌入文字符號(hào)

3. 插入圖片

4. 插入元素的屬性值

5. 插入項(xiàng)目編號(hào)

6. 項(xiàng)目編號(hào)修飾

7. 指定編號(hào)種類
1. 插入純文字
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}
/* 1. 插入純文字 */
.w_com-font {
  background-color: cadetblue;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_com-font p {
  font-size: 32px;
  line-height: 36px;
}
.w_com-font p::after {
  content: "演示插入內(nèi)容";
  font-size: 12px;
  color: brown;
}
.w_com-font p::after {
  /* content: none; */
  /* content: normal; */
  font-size: 12px;
  color: brown;
}
</style>
<body>
  <div class="w_content-shel">
    <!-- 1. 插入純文字 -->
    <div class="w_com-font">
      <p>插入純文字</p>
    </div>
  </div>
</body>
</html>
j-1.png
2. 嵌入文字符號(hào)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}

/* 2. 嵌入文字符號(hào) */
/* 第三種 */
.w_con-symbol {
  background-color: darkorange;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-symbol p {
  /* 利用元素的 quote s屬性指定文字符號(hào) */
  quotes:"("  ")";
}
.w_con-symbol p::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol p::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
/* 第二種 */
.w_con-symbol h3 {
  /* 添加雙引號(hào)要轉(zhuǎn)義 */
  quotes:"\"" "\"";
}
.w_con-symbol h3::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol h3::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
/* 第三種 */
.w_con-symbol h5 {
  quotes: '提問(wèn): "' '"' 'kjk';
  /* quotes: '"' 'kjk'; */
}
.w_con-symbol h5::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol h5::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
</style>
<body>
  <div class="w_content-shel">
    <!-- 2. 嵌入文字符號(hào) -->
    <div class="w_con-symbol">
      <p>嵌入文字符號(hào) --1 </p>
      <h3>嵌入文字符號(hào) -- 2</h3>
      <h5>嵌入文字符號(hào) -- 3</h5>
    </div>
  </div>
</body>
</html>
j-2.png
3. 插入圖片 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}

/* 3. 插入圖片 */
.w_con-img {
  background-color: chocolate;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-img p {
  font-size: 32px;
  line-height: 36px;
}
.w_con-img p::after {
  /*
    使用 content 設(shè)置圖片的時(shí)候, 無(wú)法設(shè)置圖片的大小, 如果想要實(shí)現(xiàn)圖片可設(shè)置大小,
    需要配合 background: url() 一起使用
  */
  content: url('./j-use-url.png');
  width: 20px;
  height: auto;
  /*
    在使用 ::after 的情況下使用 background: url(), 注意設(shè)置 display: inline-block;
    我在使用的過(guò)程中發(fā)現(xiàn)沒(méi)有設(shè)置之前, 圖片是無(wú)法正常顯示的, 這里真的挺坑的, 使用的時(shí)候需要注意 憔晒。
  */
  /* display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  content: "";
  background: url("./j-use-url.png") no-repeat 0 0;
  background-size: 20px auto; */
}


</style>
<body>
  <div class="w_content-shel">
    <!-- 3. 插入圖片 -->
    <div class="w_con-img">
      <p>插入圖片</p>
    </div>
  </div>
</body>
</html>
j-3.png
4. 插入元素的屬性值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}

/* 4. 插入元素的屬性值 */
.w_con-attr {
  background-color: deepskyblue;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-attr p {
  font-size: 32px;
  line-height: 36px;
}
.w_con-attr a::after {
  content:attr(href);
}
</style>
<body>
  <div class="w_content-shel">
    <!-- 4. 插入元素的屬性值 -->
    <div class="w_con-attr">
      <p>插入元素的屬性值</p>
      <a href="http://www.reibang.com/p/52b03fa70743"></a>
    </div>
  </div>
</body>
</html>
j-4.png
5. 項(xiàng)目編號(hào)修飾 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}

/* 5. 插入項(xiàng)目編號(hào) */
.w_con-number {
  background-color: yellow;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-number p {
  font-size: 32px;
  line-height: 36px;
  /*
    我們可以 counter-reset: number 4; 4 這個(gè)數(shù)字的設(shè)置, 去控制顯示的
    數(shù)字大小, 可以根據(jù)注釋的代碼, 去體驗(yàn)具體的效果
  */
  /* counter-increment: number; */
  counter-reset: number 4;
}
.w_con-number p::before {
  /* content: counter(number)'. '; */
  content: counter(number)'. ';
}

</style>
<body>
  <div class="w_content-shel">
    <!-- 5. 插入項(xiàng)目編號(hào) -->
    <div class="w_con-number">
      <p>插入項(xiàng)目編號(hào)</p>
    </div>
  </div>
</body>
</html>
j-5.png
6. 項(xiàng)目編號(hào)修飾 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>

/* 6. 項(xiàng)目編號(hào)修飾 */
.w_con-adorn {
  background-color: teal;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-adorn p {
  font-size: 32px;
  line-height: 36px;
  counter-increment: my 6;
}
.w_con-adorn p::after {
  content:'第'counter(my)'節(jié)';
}
</style>
<body>
  <div class="w_content-shel">
    <!-- 6. 項(xiàng)目編號(hào)修飾 -->
    <div class="w_con-adorn">
      <p>項(xiàng)目編號(hào)修飾<br></p>
    </div>
  </div>
</body>
</html>
j-6.png
7. 指定編號(hào)種類
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}

/* 7. 指定編號(hào)種類 */
.w_con-type {
  background-color: tomato;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-type p {
  font-size: 32px;
  line-height: 36px;
  counter-increment: my;
}
.w_con-type p::after {
  content: counter(my, upper-alpha);
}

</style>
<body>
  <div class="w_content-shel">
    <!-- 7. 指定編號(hào)種類 -->
    <div class="w_con-type">
      <p>指定編號(hào)種類<br></p>
    </div>
  </div>
</body>
</html>
j-7.png
8. 完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 屬性 content 有什么作用? 以及應(yīng)用 (瑣碎知識(shí)點(diǎn)整理) </title>
</head>

<style>
.w_content-shel {
  background-color: burlywood;
  padding: 36px 0;
}
/* 1. 插入純文字 */
.w_com-font {
  background-color: cadetblue;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_com-font p {
  font-size: 32px;
  line-height: 36px;
}
.w_com-font p::after {
  content: "演示插入內(nèi)容";
  font-size: 12px;
  color: brown;
}
.w_com-font p::after {
  /* content: none; */
  /* content: normal; */
  font-size: 12px;
  color: brown;
}

/* 2. 嵌入文字符號(hào) */
/* 第三種 */
.w_con-symbol {
  background-color: darkorange;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-symbol p {
  /* 利用元素的 quote s屬性指定文字符號(hào) */
  quotes:"("  ")";
}
.w_con-symbol p::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol p::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
/* 第二種 */
.w_con-symbol h3 {
  /* 添加雙引號(hào)要轉(zhuǎn)義 */
  quotes:"\"" "\"";
}
.w_con-symbol h3::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol h3::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
/* 第三種 */
.w_con-symbol h5 {
  quotes: '提問(wèn): "' '"' 'kjk';
  /* quotes: '"' 'kjk'; */
}
.w_con-symbol h5::before {
  content: open-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
.w_con-symbol h5::after {
  content: close-quote;
  font-size: 12px;
  color: #FFF;
  font-weight: 900;
}
/* 3. 插入圖片 */
.w_con-img {
  background-color: chocolate;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-img p {
  font-size: 32px;
  line-height: 36px;
}
.w_con-img p::after {
  /*
    使用 content 設(shè)置圖片的時(shí)候, 無(wú)法設(shè)置圖片的大小, 如果想要實(shí)現(xiàn)圖片可設(shè)置大小,
    需要配合 background: url() 一起使用
  */
  content: url('./j-use-url.png');
  width: 20px;
  height: auto;
  /*
    在使用 ::after 的情況下使用 background: url(), 注意設(shè)置 display: inline-block;
    我在使用的過(guò)程中發(fā)現(xiàn)沒(méi)有設(shè)置之前, 圖片是無(wú)法正常顯示的, 這里真的挺坑的, 使用的時(shí)候需要注意 。
  */
  /* display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  content: "";
  background: url("./j-use-url.png") no-repeat 0 0;
  background-size: 20px auto; */
}


/* 4. 插入元素的屬性值 */
.w_con-attr {
  background-color: deepskyblue;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-attr p {
  font-size: 32px;
  line-height: 36px;
}
.w_con-attr a::after {
  content:attr(href);
}

/* 5. 插入項(xiàng)目編號(hào) */
.w_con-number {
  background-color: yellow;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-number p {
  font-size: 32px;
  line-height: 36px;
  /*
    我們可以 counter-reset: number 4; 4 這個(gè)數(shù)字的設(shè)置, 去控制顯示的
    數(shù)字大小, 可以根據(jù)注釋的代碼, 去體驗(yàn)具體的效果
  */
  /* counter-increment: number; */
  counter-reset: number 4;
}
.w_con-number p::before {
  /* content: counter(number)'. '; */
  content: counter(number)'. ';
}

/* 6. 項(xiàng)目編號(hào)修飾 */
.w_con-adorn {
  background-color: teal;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-adorn p {
  font-size: 32px;
  line-height: 36px;
  counter-increment: my 6;
}
.w_con-adorn p::after {
  content:'第'counter(my)'節(jié)';
}

/* 7. 指定編號(hào)種類 */
.w_con-type {
  background-color: tomato;
  padding: 10px 24px;
  margin-bottom: 24px;
}
.w_con-type p {
  font-size: 32px;
  line-height: 36px;
  counter-increment: my;
}
.w_con-type p::after {
  content: counter(my, upper-alpha);
}

</style>
<body>
  <div class="w_content-shel">
    <!-- 1. 插入純文字 -->
    <div class="w_com-font">
      <p>插入純文字</p>
    </div>

    <!-- 2. 嵌入文字符號(hào) -->
    <div class="w_con-symbol">
      <p>嵌入文字符號(hào) --1 </p>
      <h3>嵌入文字符號(hào) -- 2</h3>
      <h5>嵌入文字符號(hào) -- 3</h5>
    </div>

    <!-- 3. 插入圖片 -->
    <div class="w_con-img">
      <p>插入圖片</p>
    </div>

    <!-- 4. 插入元素的屬性值 -->
    <div class="w_con-attr">
      <p>插入元素的屬性值</p>
      <a href="http://www.reibang.com/p/52b03fa70743"></a>
    </div>

    <!-- 5. 插入項(xiàng)目編號(hào) -->
    <div class="w_con-number">
      <p>插入項(xiàng)目編號(hào)</p>
    </div>

    <!-- 6. 項(xiàng)目編號(hào)修飾 -->
    <div class="w_con-adorn">
      <p>項(xiàng)目編號(hào)修飾<br></p>
    </div>

    <!-- 7. 指定編號(hào)種類 -->
    <div class="w_con-type">
      <p>指定編號(hào)種類<br></p>
    </div>

  </div>
</body>
</html>
j-8-wanzheng.png

如果對(duì)你有所幫助蔑舞，希望大家喜歡點(diǎn)個(gè)關(guān)注拒担；整理知識(shí)點(diǎn)不易, 每次都是在工作繁忙之余夜深人靜之時(shí)整理, 每次整理時(shí)都在思考如何讓大家更容易理解, 更容易找到、看到自己想看到的內(nèi)容; 無(wú)論知識(shí)點(diǎn)是大是小, 我都會(huì)驗(yàn)證后再分享, 以防自己發(fā)表的文章給大家造成誤導(dǎo)攻询。如有問(wèn)題還望不吝賜教从撼，本人會(huì)及時(shí)更改 (本文原創(chuàng), 如需轉(zhuǎn)載，請(qǐng)注明出處) 钧栖。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末低零，一起剝皮案震驚了整個(gè)濱河市婆翔，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌掏婶，老刑警劉巖啃奴，帶你破解...
    沈念sama閱讀 212,454評(píng)論 6贊 493
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異气堕，居然都是意外死亡纺腊，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門茎芭，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)揖膜，“玉大人，你說(shuō)我怎么就攤上這事梅桩∫妓冢” “怎么了？”我有些...
    開(kāi)封第一講書人閱讀 157,921評(píng)論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵宿百，是天一觀的道長(zhǎng)趁仙。 經(jīng)常有香客問(wèn)我，道長(zhǎng)垦页，這世上最難降的妖魔是什么雀费？ 我笑而不...
    開(kāi)封第一講書人閱讀 56,648評(píng)論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮痊焊，結(jié)果婚禮上盏袄，老公的妹妹穿的比我還像新娘。我一直安慰自己薄啥，他們只是感情好辕羽，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著垄惧，像睡著了一般刁愿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上到逊，一...
    開(kāi)封第一講書人閱讀 49,950評(píng)論 1贊 291
  • 城市分裂傳說(shuō)
    那天铣口，我揣著相機(jī)與錄音，去河邊找鬼觉壶。 笑死枷踏，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的掰曾。 我是一名探鬼主播旭蠕，決...
    沈念sama閱讀 39,090評(píng)論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了掏熬？” 一聲冷哼從身側(cè)響起佑稠，我...
    開(kāi)封第一講書人閱讀 37,817評(píng)論 0贊 268
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎旗芬，沒(méi)想到半個(gè)月后舌胶，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡疮丛，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年幔嫂，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片誊薄。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡履恩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出呢蔫，到底是詐尸還是另有隱情切心，我是刑警寧澤，帶...
    沈念sama閱讀 34,409評(píng)論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布片吊，位于F島的核電站绽昏，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏俏脊。R本人自食惡果不足惜全谤，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3贊 316
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望爷贫。 院中可真熱鬧认然，春花似錦、人聲如沸沸久。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,815評(píng)論 0贊 21
  • 一樁弒父案余蟹，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)卷胯。三九已至，卻和暖如春威酒，著一層夾襖步出監(jiān)牢的瞬間窑睁，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,043評(píng)論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工葵孤， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留担钮，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2贊 361
  • 代替公主和親
    正文 我出身青樓尤仍，卻偏偏與公主長(zhǎng)得像箫津，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2贊 350

推薦閱讀更多精彩內(nèi)容