久久久久久三级人,久久久麻豆

高級選擇器及偽類

1. 回顧基礎(chǔ)選擇器

ID選擇器 #id
類名選擇器 .class
標(biāo)簽選擇器 tagname
通配符選擇器 *
.組合(多元素)選擇器 .class,#id
后代選擇器 .class #id
子元素選擇器 .class>#id
毗鄰選擇器 .class+#id (同層級)
關(guān)聯(lián)后選擇器 .class~#id (同層級)

10.多選擇器 div.aa.bb#cc(之間并且的關(guān)系)

2. 屬性選擇器

E[attr]匹配具有attr屬性的E元素

a[href]{ color:red; }

[href]{border:1px sold blue}/*只要具有href屬性的元素*/

E[attr=val匹配所有attr屬性等于“val”的E元素

a[href=”www.baidu.com”]{ color:red; }

~= 就是某個(gè)屬性包含或者等于屬性值

E[attr~=val]匹配所有attr屬性包含“val”或者等于“val”的E元素

img[src ~= “images aa”]{ margin:10px;}

  <style>
    [class~=box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box aa">
    BOX
  </div>
</body>

|= 就是屬性以‘val’整個(gè)開頭或'val-'的元素

E[attr|=val]匹配所有attr屬性以“val”整個(gè)開頭或'val-'的E元素

img[alt |= buy]{width:300px; }

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-1">
    BOX
  </div>
</body>

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

E[attr1][att2=val]匹配所有擁有attr1屬性同時(shí)具有attr2等于'val'的元素

a[href][title='圖片']{text-decoration:underline;}

^=就是以什么字符開頭

E[attr^=val]匹配所有attr屬性以“val”開頭E元素

img[src^='image'] {width:300px; }

  <style>
    [class^= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="boxdaa">
    BOX
  </div>
</body>

$=就是以什么字符結(jié)尾

E[attr$=val] 匹配所有attr屬性以“val”結(jié)尾E元素

img[src$='image'] {width:300px; }

  <style>
    [class$= e] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

  <style>
    [src$= jpg] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

E[attr*=val] 匹配所有attr屬性包含“val”E元素

img[src*='image'] {width:300px; }

  <style>
    [src*= mg] {
      width: 100px;
      height: 100px;
      border: 10px solid blue;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

3. CSS3新增的結(jié)構(gòu)偽類選擇器

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒陰影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:last-child {
      background-color: skyblue;
      /*結(jié)構(gòu)偽類選擇器  父級中最后一個(gè)元素*/
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">box1
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">box2
      <p>p21</p>
      <p>p22</p>
      <p>p23</p>
    </div>
  </div>
</body>

</html>

p:first-of-type

選擇p，這些p必須為它們各自父級的所有p子元素的第1個(gè)
p:last-of-type
選擇p，這些p必須為它們各自父級的所有p子元素的最后1個(gè)
p:only-of-type
選擇p，這些p必須為它們各自父級的唯一的p（父級中還有其他類型元素）
p:first-child
選擇p，這些p必須為它們各自父級的第一個(gè)子元素
p:last-child
選擇p，這些p必須為它們各自父級的最后一個(gè)子元素
p:only-child
選擇p，這些p必須為它們各自父級的唯一子元素 (父級中再無其他元素)
p:nth-child(2)
選擇p，這些p必須為它們各自父級的第2個(gè)子元素（
p:nth-last-child(2)
選擇p，這些p必須為它們各自父級的倒數(shù)第2個(gè)子元素沒有其他標(biāo)簽用找所有孩子
p:nth-of-type(2)
選擇p，這些p必須為它們各自父級的所有p子元素的第2個(gè) 有其他標(biāo)簽用只找p
p:nth-last-of-type(2)
選擇p，這些p必須為它們各自父級的所有p子元素的倒數(shù)第2個(gè)
E：first-line
表示E元素中的第一行
E：first-letter
表示E元素中的第一個(gè)字符
p:empty

選擇沒有內(nèi)容的p
p:target

選擇當(dāng)前被錨點(diǎn)激活的p，（點(diǎn)擊就被激活）

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒陰影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:target {
      background-color: purple;
      /*點(diǎn)擊錨點(diǎn)激活p標(biāo)簽*/
    }
  </style>
</head>

<body>
  <a href="#bb">點(diǎn)擊</a> <!--  錨點(diǎn)點(diǎn)擊激活 -->
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p id="bb">p23</p> <!--  錨點(diǎn)點(diǎn)擊激活 -->
    </div>
  </div>
</body>

</html>

p:not(.on)

選擇除了.on的p，括號中選選擇器

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒陰影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:not(.aa){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
    </div>
  </div>
</body>

</html>

E:nth-child(odd)

匹配奇數(shù)行同p:nth-child(2n-1)

E:nth-child(even)

匹配偶數(shù)行同p:nth-child(2n)

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒陰影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:nth-child(even){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
      <p>p14</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
      <p>p24</p> 
    </div>
  </div>
</body>

</html>

E:first-line 首行狀態(tài)
E::selection 被選中的文本的樣式被修改(兩個(gè)冒號)

    .text::selection{
      color:red;
    }

和表單有關(guān)的偽類

:focus 處于被聚焦的狀態(tài)

<!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>Document</title>
  <style>
    input:focus {
      border: 2px solid red;
    }

    .info {
      display: none;
    }

    input:focus+.info {
      /*  獲取焦點(diǎn).info顯示 */
      display: block;
    }
  </style>
</head>

<body>
  <input type="text">
  <div class="info">請輸入內(nèi)容</div>
</body>

</html>

:checked 表單被勾選的狀態(tài)(幾乎只有表單可以記錄狀態(tài))
:disabled 選擇不能被操作的input框
:enabled 選擇能被操作的input框

4. 偽元素的使用

一個(gè)盒子(非單標(biāo)簽)有兩個(gè)偽元素,叫before/after

正常的元素（標(biāo)準(zhǔn)的標(biāo)簽）是在標(biāo)簽的嵌套中使用添加內(nèi)容，偽元素在content中添加內(nèi)容，偽元素都是行內(nèi)元素

4.1 偽元素的寫法

E::before{
    content: "";  /* 激活偽元素 一定要有，內(nèi)容可以為空“”*/
}
E::after{
    content:"";
}

  <style>
    div::before {
      content: "大";
      color: red;
      font-size: 26px;
    }

    div::after {
      content: "有點(diǎn)不容易";
      /* display:block;偽元素都是行內(nèi)元素 */

      color: blue;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div>前端學(xué)習(xí)</div>
</body>

小三角
 <style>
    div::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: 30px solid transparent; 
      border-right-color: red;
    }
  </style>
</head>

<body>
  <div>前端學(xué)習(xí)</div>
</body>

content:（一定要加?。。。?/h5>
content是偽元素的內(nèi)容樣式,必須寫

`string`: 在節(jié)點(diǎn)之前插入文字

attr(attrname): 在節(jié)點(diǎn)中插入元素屬性的值

url(媒體文件): 比如圖片

content: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);

4.2 偽元素和偽類的區(qū)別:

偽元素是元素,偽類是狀態(tài)/條件

4.3 偽元素和普通元素的區(qū)別

錦上添花(本意是替換空標(biāo)簽,比如加小三角)

幾乎沒有區(qū)別

寫法不一樣,(css添加的)

需要css渲染完成才知道有無偽元素,不影響布局結(jié)構(gòu),

百度爬蟲爬不到偽元素，百度對空標(biāo)簽不友好

4.4 偽元素性質(zhì):

行內(nèi)元素
before在標(biāo)簽正文內(nèi)容前,可以理解為標(biāo)簽開始內(nèi)容的前面的元素
after在標(biāo)簽的結(jié)尾之前,可以理解為正文內(nèi)容之后
具有文本屬性,
CSS創(chuàng)建的抽象元素,是個(gè)虛擬的容器
多用于清除浮動

偽元素清除浮動
  <style>
    div {
      width: 500px;
      border: 3px solid red;
    }

    p {
      float: left;
      width: 100px;
      height: 50px;
      background-color: skyblue;
      font-size: 30px;
      margin: 0 20px;
      text-align: center;
    }

    /* span{  
      display:block;
      clear:both;
    } */
    div::after {
      /* 偽元素解決高度塌陷 清除浮動*/
      content: '';
      display: block;
      clear: both
    }
  </style>
</head>

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <!--   <span></span>之前解決高度塌陷在元素最后加一個(gè)塊元素 ，這里把span變成塊了 -->
  </div>

</body>

背景及圓角

1. 復(fù)習(xí)元素背景

背景屬性background

1.1. 背景顏色 `background-color`

屬性值:

顏色單詞 red
十六進(jìn)制 #f00
rgb r:red g:green b:blue取值范圍都是0-255
rgba a:Alpha取值范圍0-1,(透明度)
HSL H:Hue色調(diào) 取值范圍0-360 S:Saturation飽和度取值范圍0%-100% L:Lightness亮度取值范圍0%-100% .HSLA` Alpha透明度。取值0~1之間。
transparent: 默認(rèn),透明,不繼承
currentcolor: 當(dāng)前色, currentcolor等于當(dāng)前的color值

background-color:currentcolor;

1.2. 背景圖片 `background-image`

屬性值:

url(“圖片路徑“)
none 不使用背景圖片(初始默認(rèn)值)

多背景寫法:

多個(gè)背景以“，”隔開，不限個(gè)數(shù)

background-image: url(“1”) , url(“2”) ;

圖片格式:

.jpg 不支持動畫,不支持透明,漸進(jìn)顯示,顏色豐富,有損
.png 不支持動畫,支持透明度, 顏色更豐富,無損
.gif 支持動畫,256種顏色,2種透明度,漸進(jìn)顯示
.webp支持動畫,高壓縮率,高加載速率,點(diǎn)個(gè)贊

background-image:url('圖片路徑');

1.3. 背景圖片平鋪 `background-repeat`

屬性值:

no-repeat不平鋪,背景圖片只顯示一次
repeat-x水平方向平鋪
repeat-y垂直方向平鋪
repeat默認(rèn)值(水平垂直方向都平鋪)

可以分解成兩個(gè)屬性:

background-repeat-x
. background-repeat-y

background-repeat: repeat-x;

1.4. 背景圖片位置 `background-position`

可以設(shè)置兩個(gè)值,如果只設(shè)置一個(gè)值,另一個(gè)默認(rèn)為center

屬性值:

關(guān)鍵詞 top / right / bottom / right / center
屬性值是兩個(gè)關(guān)鍵詞,一個(gè)的話第二個(gè)就是默認(rèn)center
百分?jǐn)?shù) (水平% 豎直%) 百分比相對于父級容器

如果只提供一個(gè)百分?jǐn)?shù)值，所提供的這個(gè)值將用作水平值，垂直值將假設(shè)為50%
像素值 (水平px 豎直px)

可以分解成兩個(gè)屬性:

background-position-x
background-position-y

background-position:20px 30px;

1.5. 背景圖片大小 `background-size`

屬性值:

像素值,有兩個(gè),如果寫一個(gè),第二個(gè)就默認(rèn)auto
百分?jǐn)?shù),按原始比例縮放; 百分比相對于父級容器
cover 圖片縮放,直到整個(gè)背景圖片占滿背景框

保持寬高比不變，保證占滿盒子，但是不一定能看到全部圖
contain 圖片縮放,直到背景圖片有一邊觸碰到背景邊框就停止縮放

保持寬高比不變，保證看清全圖，但是不一定占滿盒子

數(shù)值可以寫一個(gè)可以寫兩個(gè),如果只有一個(gè)第二個(gè)就是默認(rèn)

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
    }

    .main div:nth-of-type(2) {
      background-size: 100px 50px;
    }

    .main div:nth-of-type(3) {
      background-size: 50% 50%;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>默認(rèn)背景圖片</p>
    <div></div>
    <p>background-size:100px 50px 的背景</p>
    <div></div>
    <p>background-size:50% 50% 的背景</p>
    <div></div>
    <p>background-size:cover的背景</p>
    <div></div>
  </div>
</body>

1.6. 背景圖片關(guān)聯(lián) background-attachment

屬性值:

scroll 默認(rèn)值,背景圖片隨著頁面滾動而滾動,背景圖片附著在容器里
fixed 固定值,背景圖片不隨著頁面滾動而滾動,背景圖片附著在瀏覽器窗口里

  <style>
    body {
      padding-left: 180px;
      background: url('http://www.hshkyl.com/uploads/allimg/20/1-20091H01623638.jpg') no-repeat 0 0/contain;
      background-attachment: fixed;    /* 背景圖片固定 */
    }
  </style>
</head>

<body>
  <div>
    <p>這是p標(biāo)簽1</p>
    <p>這是p標(biāo)簽2</p>
    <p>這是p標(biāo)簽3</p>
    <p>這是p標(biāo)簽4</p>
    <p>這是p標(biāo)簽5</p>
    <p>這是p標(biāo)簽6</p>
    <p>這是p標(biāo)簽100</p>
  </div>

1.7. 背景圖片顯示基點(diǎn)(起始域) `background-origin`

屬性值:

padding-box 默認(rèn)值，從padding區(qū)域起始
content-box 從內(nèi)容部分起始
border-box 從border區(qū)域起始

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div:nth-of-type(2) {
      background-origin: content-box;
      background-size: 100% 100%;
    }

    .main div:nth-of-type(3) {
      background-origin: border-box;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>background-origin默認(rèn)背景圖片的起始域?yàn)閜adding-box</p>
    <div></div>
    <p>background-origin從內(nèi)容區(qū)content-box顯示背景</p>
    <div></div>
    <p>background-origin從內(nèi)容區(qū)border-box顯示背景</p>
    <div></div>
  </div>
</body>

1.8. 背景圖片裁剪區(qū)域 `background-clip`

屬性值:

border-box 默認(rèn)值，從border區(qū)域開始顯示背景,背景被裁剪到盒子邊框
content-box 從內(nèi)部區(qū)域開始顯示背景.背景被裁剪到內(nèi)容區(qū)域
padding-box 從padding區(qū)域開始顯示背景,背景被裁剪到內(nèi)邊距
text 相對于文本

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: border-box;
    }

    .main div:nth-of-type(2) {
      background-clip: padding-box;
    }

    .main div:nth-of-type(3) {
      background-clip: content-box;
    }
  </style>
</head>

<body>
  <div class="main">

    <p>background-clip從border默認(rèn)</p>
    <div></div>
    <p>background-clip從padding</p>
    <div></div>
    <p>background-clip從content</p>
    <div></div>
  </div>
</body>

/*text相對于文本*/
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-size: 100px;
      text-align: center;
      font-weight: bolder;
      /* transition: 3s; */
      animation: run 3s infinite alternate;
    }

    /* .main div:nth-of-type(1):hover{
      background-position: -30px 0;
    } */
    @keyframes run {
      0% {
        background-position: 20px 0;
      }

      100% {
        background-position: -30px 0;
      }
    }
  </style>
</head>
<body>
  <div class="main">
    <p>background-clip從border默認(rèn)</p>
    <div>你好</div>
  </div>
</body>

1.9. 背景的綜合樣式

background:color image repeat position/size attachment origin clip;

省略部分會被默認(rèn)值替代,
position和size之間要用/分割

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

高級選擇器及偽類

高級選擇器及偽類

高級選擇器及偽類

1. 回顧基礎(chǔ)選擇器

2. 屬性選擇器

3. CSS3新增的結(jié)構(gòu)偽類選擇器

和表單有關(guān)的偽類

4. 偽元素的使用

4.1 偽元素的寫法

4.2 偽元素和偽類的區(qū)別:

4.3 偽元素和普通元素的區(qū)別

4.4 偽元素性質(zhì):

背景及圓角

1. 復(fù)習(xí)元素背景

1.1. 背景顏色 `background-color`

屬性值:

1.2. 背景圖片 `background-image`

屬性值:

多背景寫法:

圖片格式:

1.3. 背景圖片平鋪 `background-repeat`

屬性值:

可以分解成兩個(gè)屬性:

1.4. 背景圖片位置 `background-position`

屬性值:

可以分解成兩個(gè)屬性:

1.5. 背景圖片大小 `background-size`

屬性值:

1.6. 背景圖片關(guān)聯(lián) background-attachment

屬性值:

1.7. 背景圖片顯示基點(diǎn)(起始域) `background-origin`

屬性值:

1.8. 背景圖片裁剪區(qū)域 `background-clip`

屬性值:

1.9. 背景的綜合樣式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

高級選擇器及偽類

高級選擇器及偽類

1. 回顧基礎(chǔ)選擇器

2. 屬性選擇器

3. CSS3新增的結(jié)構(gòu)偽類選擇器

和表單有關(guān)的偽類

4. 偽元素的使用

4.1 偽元素的寫法

4.2 偽元素和偽類的區(qū)別:

4.3 偽元素和普通元素的區(qū)別

4.4 偽元素性質(zhì):

背景及圓角

1. 復(fù)習(xí)元素背景

1.1. 背景顏色 background-color

屬性值:

1.2. 背景圖片 background-image

屬性值:

多背景寫法:

圖片格式:

1.3. 背景圖片平鋪 background-repeat

屬性值:

可以分解成兩個(gè)屬性:

1.4. 背景圖片位置 background-position

屬性值:

可以分解成兩個(gè)屬性:

1.5. 背景圖片大小 background-size

屬性值:

1.6. 背景圖片關(guān)聯(lián) background-attachment

屬性值:

1.7. 背景圖片顯示基點(diǎn)(起始域) background-origin

屬性值:

1.8. 背景圖片裁剪區(qū)域 background-clip

屬性值:

1.9. 背景的綜合樣式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1.1. 背景顏色 `background-color`

1.2. 背景圖片 `background-image`

1.3. 背景圖片平鋪 `background-repeat`

1.4. 背景圖片位置 `background-position`

1.5. 背景圖片大小 `background-size`

1.7. 背景圖片顯示基點(diǎn)(起始域) `background-origin`

1.8. 背景圖片裁剪區(qū)域 `background-clip`