第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

:target選擇器稱為目標(biāo)選擇器，用來匹配文檔(頁面)的url的某個標(biāo)志符的目標(biāo)元素。我們先來上個例子，然后再做分析。

示例展示

點擊鏈接顯示隱藏的段落。

HTML代碼：

<h2><a?href="#brand">Brand</a></h2>
<div?class="menuSection"?id="brand">
????content?for?Brand
</div>

CSS代碼：

.menuSection{
??display:?none;
}:target{/*這里的:target就是指id="brand"的div對象*/
??display:block;
}

演示結(jié)果：

分析：

1、具體來說，觸發(fā)元素的URL中的標(biāo)志符通常會包含一個#號，后面帶有一個標(biāo)志符名稱，上面代碼中是：#brand

2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個div元素。

多個url（多個target）處理：

就像上面的例子，#brand與后面的id="brand"是對應(yīng)的，當(dāng)同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應(yīng)就可以了。
如下面例子：

:empty選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格。

:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：

form?{
??width:?200px;
??margin:?20px?auto;
}
div?{
??margin-bottom:?20px;
}input:not([type="submit"]){
??border:1px?solid?red;
}

相關(guān)HTML代碼：

<form?action="#">
??<div>
????<label?for="name">Text?Input:</label>
????<input?type="text"?name="name"?id="name"?placeholder="John?Smith"?/>
??</div>
??<div>
????<label?for="name">Password?Input:</label>
????<input?type="text"?name="name"?id="name"?placeholder="John?Smith"?/>
??</div>
??<div>
????<input?type="submit"?value="Submit"?/>
??</div>
</form>

屬性選擇器用法

要實現(xiàn)溢出時產(chǎn)生省略號的效果，還須定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果

響應(yīng)式布局注意事項

沒實行，后面再看

CSS3中調(diào)用動畫

@keyframes animation

所示：

(單擊可放大)

?實例展示：

html代碼：

<a?href="xxx.pdf">我鏈接的是PDF文件</a>
<a?href="#"?class="icon">我類名是icon</a>
<a?href="#"?title="我的title是more">我的title是more</a>

css代碼??

a[class^=icon]{
??background:?green;
??color:#fff;
}
a[href$=pdf]{
??background:?orange;
??color:?#fff;
}
a[title*=more]{
??background:?blue;
??color:?#fff;
}

使用border-radius實現(xiàn)圓角

使用box-shadow實現(xiàn)立體風(fēng)格

使用box-shadow實現(xiàn)立體風(fēng)格

background?：?[background-color]?|?[background-image]?|?[background-position][/background-size]?|?[background-repeat]?|?[background-attachment]?|?[background-clip]?|?[background-origin],...

可以把上面的縮寫拆解成以下形式：

background-image:url1,url2,...,urlN;

background-repeat?:?repeat1,repeat2,...,repeatN;
backround-position?:?position1,position2,...,positionN;
background-size?:?size1,size2,...,sizeN;
background-attachment?:?attachment1,attachment2,...,attachmentN;
background-clip?:?clip1,clip2,...,clipN;
background-origin?:?origin1,origin2,...,originN;
background-color?:?color;

注意：

1. 用逗號隔開每組 background 的縮寫值；

2. 如果有 size 值，需要緊跟 position 并且用 "/" 隔開；

3. 如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應(yīng)用該屬性值。

4. background-color?只能設(shè)置一個。

background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain

用來將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實際需要。

語法：

background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip

border-image的語法：

修改瀏覽器中選中字體顏色及背景顏色

::-moz-selection?{
??background:?red;
??color:?green;
??//firefox
}
::selection?{
??background:?red;
??color:?green;
}