資訊專欄INFORMATION COLUMN
摘要：目錄定義創(chuàng)建的三種方法元素內(nèi)嵌權(quán)重最高文檔內(nèi)嵌外部引用層疊和繼承瀏覽器樣式樣式表層疊樣式繼承選擇器選擇器的總匯基本選擇器復(fù)合選擇器偽元素選擇器偽類選擇器定義定義層疊樣式表創(chuàng)建的三種方法創(chuàng)建的三種方法元素內(nèi)嵌權(quán)重最高元素內(nèi)嵌權(quán)重最高文檔內(nèi)
目錄
::層疊樣式表
通過(guò)選擇器的方法調(diào)用指定的元素并設(shè)置相關(guān)的CSS
@charset "utf-8";
p{
color:red;
font-size: 30px;
}
大量HTML使用同一組CSS，就可以將這些樣式保存到一個(gè)多帶帶的.CSS文件中，通過(guò)link引用就可以了
b元素有加粗元素
span元素沒(méi)有加粗樣式，但是可以設(shè)置
b元素手動(dòng)取出加粗元素
我要疊加三個(gè)樣式
優(yōu)先級(jí)： 元素內(nèi)嵌 <- 文檔內(nèi)嵌 <- 外部引用 <- 瀏覽器
可以在不同樣式中添加!important關(guān)鍵字來(lái)強(qiáng)行設(shè)置優(yōu)先級(jí)
color: green !important
這是HTML5
此時(shí)顯示的是這是HTML5,我們只設(shè)置了p為紅色，但是b也為紅色了，因?yàn)閎是在p內(nèi)部
定位到你想要設(shè)計(jì)的樣式元素來(lái)設(shè)計(jì)元素
使用頻率最高的一些選擇器
**表示通用選擇器，匹配所有HTML元素包括可以為所有元素匹配并配置樣式，但是無(wú)法篩選不必要元素
定義一個(gè)CSS
@charset "utf-8"
* {
border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/
這是一個(gè)段落
這是一個(gè)加粗
這是一個(gè)什么都沒(méi)有
p
@charset "utf-8"
p {
border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/#adcID是唯一的，不可重復(fù)使用
@charset "utf-8"
#abc {
border: 1px solid red;
}
這是一個(gè)段落
這是一個(gè)加粗
這是一個(gè)什么都沒(méi)有
.
@charset "utf-8"
.abc {
border: 1px solid red;
}
這是一個(gè)段落
這是一個(gè)加粗
這是一個(gè)什么都沒(méi)有
也可以限定元素
@charset "utf-8"
p.abc {
border: 1px solid red;
}
/*只能適用于段落*/也可以使用多個(gè)class
@charset "utf-8"
.abc {
border: 1px solid red;
}
.def {
font-size: 30px;
}
這是一個(gè)加粗
[...]@charset "utf-8"
[href]{
color: red;
}這是一個(gè)百度也可以設(shè)置相關(guān)的屬性值
@charset "utf-8"
[type="password"]{
border: 1px solid red;
}通過(guò)正則表達(dá)式來(lái)設(shè)置匹配
@charset "utf-8"
[href^="http"]{
color: orange;
}
/*只能開(kāi)頭是http才能匹配*/百度
好搜通過(guò)精確匹配
@charset "utf-8"
[href*="baidu"]{
color: orange;
}
/*只能包含baidu才能匹配*/將不同選擇器進(jìn)行組合形成的新的特定匹配
多個(gè)選擇器逗號(hào)分隔，同時(shí)設(shè)置一組樣式
@charset "utf-8"
p,b,i,span {
color: orange;
}
#abc,.abc,i,span {
color: orange;
}
選擇元素內(nèi)部所有的元素，不在乎的層次深度
@charset "utf-8"
p b {
color: orange;
}這是一個(gè)HTML5教程
效果為： 這是一個(gè)HTML5教程
與后代選擇器類似，但是只能運(yùn)用于兒子，孫子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
匹配第一個(gè)元素相鄰的第二個(gè)元素
@charset "utf-8"
p+b {
color: orange;
}類似，只是靠的不是特別近
@charset "utf-8"
p~b {
color: orange;
}::::first-line、
等的首行文本選定
:: first-line {
color: orange;
}
2. 塊級(jí)首字母::first-letter
p:: first-letter {
color: orange;
}
3. 文本前插入::before
- 在文本前插入內(nèi)容
a:: before {
content: "點(diǎn)擊-";
}
3. 文本后插入::after
(4) 偽類選擇器
1. 結(jié)構(gòu)性偽類:
- 可以根據(jù)元素在文檔中的位置選擇元素
1.1. 根元素選擇器
:root {
border: 1px solid red;
}
1.2. 子類選擇器
ul>li:first-child {
color: red;
}
/*父類的第一個(gè)兒子*/
ul>li:last-child {
color: red;
}
/*父類的最后一個(gè)兒子*/
ul>li:only-child {
color: red;
}
/*選擇只有一個(gè)子元素的那個(gè)元素*/
dive>p: only-of-type {
color: red;
}
/*選擇只有一個(gè)指定類型的子元素的那個(gè)元素*/
1.3.nth-child(n)系列
ul>li:nth-child(2) {
color: red;
}
/*選擇第2個(gè)*/
ul>li:nth-last-child(2) {
color: red;
}
/*選擇倒數(shù)第2個(gè)*/
ul>li:nth-of-type(2) {
color: red;
}
/*特定類型第2個(gè)*/
ul>li:nth-last-of-type(2) {
color: red;
}
/*特定類型倒數(shù)第2個(gè)*/
2.UI偽類
用于匹配表單的數(shù)據(jù)
enabled
input:enabled {
border: 1px solid red;
}
/*選擇表單中的enable元素*/
checked
input:checked {
display: none;
}
default
input:default {
display: none;
}
valid和not valida
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
required
input:required {
border: 1px solid red;
}
3. 動(dòng)態(tài)偽類
根據(jù)條件改變匹配元素
link-超鏈接
/*Url沒(méi)有訪問(wèn)的顏色*/
a:link {
color: red;
}
/*Url被點(diǎn)擊的顏色*/
a:visited {
color: blue;
}
/*鼠標(biāo)懸停的顏色*/
a:hover {
color: orange;
}
/*鼠標(biāo)長(zhǎng)按的顏色*/
a:active {
color: green;
}
百度
focus-文本框獲取的
/*鼠標(biāo)獲取到文本框的顏色*/
input:focus {
border: 1px solid green;
}
其他偽類選擇器
not否定選擇器
/*選擇百度除外的URL*/
a:not([href*="baidu"]) {
color: green;
}
empty
/*空元素隱藏*/
:empty {
display: none;
}
target-定位到錨點(diǎn)
/*空元素隱藏*/
b:target {
color: red;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1276.html
摘要：目錄顏色建議就用十六進(jìn)制長(zhǎng)度的度量單位建議就用文本樣式字體屬性文本樣式顏色建議就用十六進(jìn)制顏色建議就用十六進(jìn)制長(zhǎng)度的度量單位建議就用長(zhǎng)度的度量單位建議就用文本樣式文本樣式字體的大小，樣式以及方位字體屬性字體屬性屬性名說(shuō)明例子目錄 1.CSS顏色-建議就用十六進(jìn)制 2.CSS長(zhǎng)度的度量單位-建議就用px 3.CSS文本...
摘要：每條屬性聲明實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素進(jìn)行某種特定格式的設(shè)置，由一個(gè)屬性和一個(gè)值組成，屬性和值之間使用冒號(hào)連接，不同聲明之間用分號(hào)分隔，所有屬性聲明放到一對(duì)大括號(hào)中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要：但是感覺(jué)還是需要一篇的教程，不然沒(méi)有一個(gè)總體的認(rèn)識(shí)。修飾器，表示每天會(huì)執(zhí)行一次，這樣就能抓到最新的電影了。不過(guò)更推薦使用選擇器。既然前端程序員都使用選擇器為頁(yè)面上的不同元素設(shè)置樣式，我們也可以通過(guò)它定位需要的元素。 雖然以前寫(xiě)過(guò) 如何抓取WEB頁(yè)面 和 如何從 WEB 頁(yè)面中提取信息。但是感覺(jué)還是需要一篇 step by step 的教程，不然沒(méi)有一個(gè)總體的認(rèn)識(shí)。不過(guò)，沒(méi)想到這個(gè)教程居...
摘要：變量作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。這是一個(gè)的新特性，和目前都還不支持。命名寫(xiě)法是變量名，在引用這個(gè)變量時(shí)寫(xiě)法是變量名。如何用改變屬性值在中即代表文檔根元素。 Day03 - CSS 變量 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是...
摘要：第一部分介紹了如何使用和開(kāi)發(fā)接口。由于系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。當(dāng)您第一次得知有預(yù)處理器和后處理器時(shí)，你很有可能在任何地方已經(jīng)使用它們。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 我記得我剛開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)的時(shí)候。我看到了很多文章及資料，被學(xué)習(xí)的資料壓得喘不過(guò)氣來(lái)，甚至不知道從哪里開(kāi)始。 本指南列出前端學(xué)習(xí)路線，并提供了平時(shí)收藏的一些...
閱讀 3887·2021-09-27 13:36
閱讀 4592·2021-09-22 15:12
閱讀 3067·2021-09-13 10:29
閱讀 1837·2021-09-10 10:50
閱讀 2365·2021-09-03 10:43
閱讀 526·2019-08-29 17:10
閱讀 449·2019-08-26 13:52
閱讀 3258·2019-08-23 14:37
