簡(jiǎn)介

今天是web開發(fā)筆記-css介紹(1)后續(xù)介紹.

內(nèi)容

• 屬性選擇器
  1. [attribute], 匹配所有指定屬性.

-css:
  [title] {
            color: red;
        }
-html:
    <div>你好,我是p標(biāo)簽</div>
    <div title="title"> 你好,我是帶有title屬性div標(biāo)簽</div>
    <p>你好,我是p標(biāo)簽</p>
    <p title="title"> 你好,我是帶有title屬性p標(biāo)簽</p>

eg1.png

2. [title=one], 匹配所有title屬性等于“one”的標(biāo)簽元素。

-css:
 [title=one] {
            color: lightskyblue;
        }
-html:
    <div title="Nick">title屬性是one</div>
    <div title="Hello">title屬性是two</div>

eg2.png

3.[title~=Nick], 設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。

-css:
 [title~=Nick] {
            color: red;
        }

-html:
    <div title="One Nick">title的屬性有Nick.(One Nick)</div>
    <div title="Nick One">title的屬性有Nick.(Nick One)</div>
    <div title="Hello One">title的屬性沒有Nick.(Hello One)</div>

eg3.png

4.[title^=Nick],設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔的值、其中設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。

-css:
 [title^=Nick] {
            color: red;
        }
-html:
   
![Uploading eg4_777608.png . . .]
 <div title="One Nick">title的屬性以O(shè)ne開頭.(One Nick)</div>
    <div title="Nick One">title的屬性有以Nick開頭.(Nick One)</div>

eg4.png

5.[title=Nick]*, 設(shè)置屬性值中包含指定值的每個(gè)元素.

-css:
 [title*=Nick] {
            color: red;
        }
-html:
    <div title="OneNick">title的屬性是OneNick</div>
    <div title="Nick">title的屬性是Nick</div>
    <div title="One">title的屬性是One</div>

DFB7692F-1D53-4B88-AE28-DB8CAB45E776.png

• 偽類選擇器：

1. **link、hover、active、visited **
   a:link（未訪問的鏈接狀態(tài)）,用于定義了常規(guī)的鏈接狀態(tài)。
   a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
   a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）。
   a:visited（已訪問過的鏈接狀態(tài)）,可以看出已經(jīng)訪問過的鏈接。

-css:
 a:hover {
            color: red;
        }
        
        a:link {
            color: deepskyblue;
        }
        
        a:active {
            color: lightcoral;
        }

-html:
    <a href="">link</a>
    <a href="">hover</a>
    <a href="">active</a>
    <a href="">visited</a>

5.png

6.png

-css:
p::after {
            content: "我是after";
            display: block;
            color: paleturquoise;
        }
 p::before {
            content: "我是before";
            display: block;
            color: springgreen;
        }
-html:
 <p>我是p標(biāo)簽</p>

eg7.png

結(jié)束