[04] css 選擇器

1.元素選擇器

常見的html標籤元素

h1 {
   color: red;
}
body {
   background: red;
}

2.分組選擇器

例如body和h2標籤的字體顏色都是red,使用逗號將其隔開。

body, h1 {
    color: red;
}

3.通配符選擇器

* {
    color: red;
}

4.類選擇器

　在html標籤中使用class屬性,而後使用樣式屬性。

<a class="customClassName1'>hello,world</a>
<a class="customClassName2'>hello,world</a>
<a class="nameOne nameTwo">hello,world</a>

　樣式表：

.customClassName1 {
    color: red;
    background: blue;
}
a.customClassName2 {
    font-weight: bold;
}
.nameOne.nameTwo {
    background: silver;
}

//不能匹配到，沒有nameThree
.nameOne.nameThree {
    font-weight: bold;
}

5.Id 選擇器

id選擇器前面使用#。id是html元素惟一標識符

<a id="customId">hello, use id selector</a>

css文件

#customId {
    font-size: 12px;
}

6.屬性選擇器

經過標籤屬性來設置樣式。兩種方式：

1.具體屬性名稱的值,屬性值須要全值匹配：標籤名[屬性名=‘屬性值’] 

2.屬性名稱： 標籤名[屬性名]

<a name="attrName">hello, world</a>

<a name="attrName2">hello, world</a>

css樣式：

a[name] {
    background: red;
}
a[name="atriName2"] {
    background: red;
}

7.文檔結構方面選擇器

7.1 後代選擇器

html是文檔結構模型的，都有父子節點。能夠經過節點關係進行選擇。

<div>
    <h1>1</h1>
    <span>
        <b>2</b>
    </span>
</div>

css編寫：

div h1 {
    color: red;
}
div span b {
    color: blue;
}

7.2 選擇子元素

<div>
    <h1>this is first h1</h1>
    <h2>this is second h2</h2>
</div>

子元素css

div > h1 {
    font-weight: bold;
}

7.3 選擇相鄰兄弟元素

<div>
    <h1 class="target">1</h1>
    <h2 class="getTarget">2</h2>
<div>

css:

.target + .getTarget {
    color: red;
}

8 僞類和僞元素

8.1 a連接僞類

a連接相關的僞類有5個：

a.靜態僞類： :link , :visited

b.動態僞類 ： :focus, :hover , :active

使用順序通常爲： link - visited - focus-  hover - active

8.2 選擇第一個子元素

<div>
    <h1>first </h1>
    <h2>second</h2>
<div>

css:

div:first-child {
    color: red;
}

8.3 僞元素選擇器

<p>first line</p>

<p>first letter</p>

css: 

//a. 設置首字母樣式p:first-letter {
    font-size: 20px;
}//b.設置首行p:first-line {    color: purple;}