css復(fù)雜選擇器
-
父子選擇器（派生選擇器）
我們來看下面的結(jié)構(gòu)<div class="demo"> <p>111</p> <span>222</span> </div> <p>333</p>此時(shí)我們想選出第一個(gè)
<p>111</p>，用之前的知識就解決不了。
我們選擇div下的所有p標(biāo)簽div p{ } 給div下面的p加樣式 這時(shí)候的p的權(quán)重值是加和的結(jié)果牢裳。 .demo p{ } 與上面完全相同我們來看下面結(jié)構(gòu)
<div class="demo"> <p> <strong> <em>1</em> </strong> <em>2</em> </p> <span>3</span> <em>4</em> </div>我們要選擇第一個(gè)
<em>1</em>div p strong em{ }<span style="color:#ff0000">注意：在實(shí)際開發(fā)中，我們因?yàn)橐⒁鉃g覽器尋找時(shí)候的耗能绷杜，一般這樣的嵌套關(guān)系不超過4層垃瞧。<span>
-
直接子元素選擇器
<div class="demo"> <p> <em>1</em> </p> <em>4</em> </div>如果我們只想選擇第二個(gè)
<em>4</em>標(biāo)簽div > em{ } 這樣就只能選出div的直接子元素 -
并列選擇器
<div>1</div> <div class="demo">2</div> <span class="demo">3</span>我們想選出類名是
demo的divdiv.demo{ }<span style="color: #ff000">注意：div和.demo之間沒有空格，標(biāo)簽選擇器要寫在最前面</span>
-
分組選擇器
<p></p> <strong></strong> <em></em> <div></div>我們要想同時(shí)給四種標(biāo)簽都加上
color: red的樣式船庇，不可能把四個(gè)標(biāo)簽都寫一遍樣式吭产，因此要用分組選擇器。div, p, em, strong {}這樣的寫法鸭轮，我們可以把前面寫的所有的標(biāo)簽都選擇出來加上樣式臣淤，中間是用逗號連接的。這個(gè)樣子四種標(biāo)簽就全都被選擇出來并且都加上了統(tǒng)一的樣式窃爷。
一個(gè)很重要的問題邑蒋，那就是父子選擇器的時(shí)候?yàn)g覽器是怎么檢索的姓蜂？
div p strong em span 這樣的選擇器，瀏覽器是從右往左檢索的
- 因?yàn)槿绻菑淖笸覍ふ业脑捯降酰空业揭粋€(gè)父級標(biāo)簽钱慢，都要把它下面的所有標(biāo)簽都遍歷一遍，看看有沒有我們下一個(gè)標(biāo)簽卿堂，上面那個(gè)選擇器中束莫，瀏覽器會先找到div這個(gè)標(biāo)簽，然后把div下面所有的子元素都遍歷一遍后草描，找到strong這個(gè)標(biāo)簽览绿，然后再把strong這個(gè)標(biāo)簽下面的所有元素遍歷一遍，找到em這個(gè)標(biāo)簽穗慕，以此類推挟裂，這樣是十分消耗性能并且速度非常慢的。
- 而如果是從右往左的話揍诽，那么瀏覽器只需要先找到span標(biāo)簽诀蓉，然后從span這個(gè)節(jié)點(diǎn)向上尋找，只要找到em就可以停止尋找暑脆，以此類推渠啤，不必遍歷所有的節(jié)點(diǎn)，而且需要遍歷的點(diǎn)非常的少添吗，這樣的好處顯而易見沥曹，速度非常快碟联，而且不耗性能妓美。
權(quán)重的計(jì)算問題
凡是寫在同一橫行的選擇器，把他們的權(quán)重相加
看下面一個(gè)例子
<div class="wrapper" id="wrapper">
<p class="content" id="content">
111
</p>
</div>
/*1 100 = 101權(quán)重*/
div #content{
background-color: red;
}
/*1 10 1 10 = 21權(quán)重*/
div.wrapper p.content{
background-color: green;
}
此時(shí)p標(biāo)簽呈現(xiàn)<span style="color: #ff000">紅色</span>鲤孵。
CSS基礎(chǔ)屬性
css有很多很多的樣式壶栋，我們不可能一一記住每一個(gè)樣式的值，其實(shí)我們只需要記住一些常用的樣式的意思普监，然后去http://www.css88.com這個(gè)網(wǎng)站去查詢樣式的具體的值就可以了
首先我們介紹一下樣式的構(gòu)成贵试，樣式都是由屬性名和屬性值構(gòu)成的，名和值之間用: (冒號)分隔凯正，屬性和屬性之間用; (分號)分隔毙玻。
我們首先來寫幾個(gè)樣式
p {
font-size:20px;
font-weight: bold;
font-family: arial;
font-style: italic;
color: red;
}
-
font-size屬性
這條屬性是設(shè)置文字的大小的，文字大小默認(rèn)是
16px廊散，我們在例子中就是將p標(biāo)簽里面的文字設(shè)置成20px大小
<span style="color: #ff000">這條屬性其實(shí)是設(shè)置的文字的高度而不是寬度桑滩。</span>這里我們要介紹一下px
px是像素的意思，這是一種相對大小允睹，并不是絶対大小运准，因?yàn)槊恳粋€(gè)像素點(diǎn)的大小都是不同的往声，我們的屏幕都是由很多個(gè)像素點(diǎn)組成的。 -
font-weight屬性
這條屬性是設(shè)置的文字的粗細(xì)程度的戳吝，默認(rèn)值是
normal浩销，當(dāng)我們設(shè)置成bold的時(shí)候，這個(gè)p標(biāo)簽就和strong標(biāo)簽沒什么區(qū)別了听哭，這就是為什么很多標(biāo)簽我們都不用慢洋，因?yàn)橥ㄟ^修改樣式就可以達(dá)到和其他標(biāo)簽一樣的效果。這條屬性常用的值有
lighter陆盘、normal普筹、bold、bolder隘马，其次我們還可以寫100-900的數(shù)字太防，其中lighter大概是100左右，normal大概是400左右酸员，bold應(yīng)該是700左右蜒车。 -
font-family屬性
這個(gè)屬性的作用是設(shè)置文字的樣式，默認(rèn)是arial字體幔嗦，其他還有很多很多的字體酿愧，我們可以到css88上面去查找。
不過我們寫英文字體的時(shí)候邀泉，屬性值是不需要加引號的嬉挡，寫中文的時(shí)候則需要加引號。font-family: '黑體'; font-style屬性
這個(gè)屬性的作用是設(shè)置文字是否斜體汇恤，italic就是斜體的意思庞钢，通過設(shè)置這個(gè)屬性我們就可以讓p標(biāo)簽達(dá)到和em標(biāo)簽一樣的效果了。-
color屬性
這個(gè)屬性的作用是設(shè)置文字的顏色因谎，并不是font-color基括。
文字顏色的色值有三種表達(dá)方式- 英文單詞，比如red蓝角、black阱穗、blue等等。
- 三位十六進(jìn)制組成光學(xué)三原色紅綠藍(lán)
每一個(gè)的值都是00-ff使鹅，00代表空，ff代表滿昌抠，例如#000000就是黑色的意思患朱。其中，如果每連續(xù)的兩位都是一樣的并且3組數(shù)字都是這種情況的時(shí)候炊苫，我們就可以兩兩合并只寫一個(gè)數(shù)值就可以了裁厅，比如#ffffff —> #fff冰沙、 #55ffcc —> #5fc; - 通過rgb(xx,xx,xx)屬性值來設(shè)置顏色，其實(shí)和第二種是一個(gè)意思执虹，只是把十六進(jìn)制換成了十進(jìn)制拓挥，rgb就是red、green袋励、blue的縮寫侥啤，其中的三個(gè)數(shù)值每一項(xiàng)的范圍都是0-255，例如紅色就是rgb(255, 0, 0)茬故。
對文字的處理大概就這么多盖灸，我們再來介紹一下其他的一些簡單的樣式
-
text-indent屬性
這個(gè)屬性的作用是設(shè)置首行文字的縮進(jìn)，值有兩種單位磺芭，一種是px赁炎，一種是em。
這里就要提一下em和px的區(qū)別了-
px雖然是一個(gè)相對長度單位钾腺，但是我們可以變相地理解為它是一個(gè)差不多固定長度的單位徙垫，我們設(shè)置100px的時(shí)候，基本上每一個(gè)寬度被設(shè)置成100px的元素都是一樣的寬度放棒。 -
em則是一個(gè)真正的相對長度單位松邪，它相對的是當(dāng)前元素內(nèi)的文字的大小，也就是說1em = 1 * font-size;如果我們設(shè)置font-size是20px的話那么1em也就是20px的大小哨查，我們只要將text-indent設(shè)置成2em就可以首行縮進(jìn)2個(gè)文字大小了逗抑。
-
-
border屬性
border: 1px solid red;border是邊框的意思，這個(gè)屬性也是設(shè)置元素邊框的屬性寒亥。
這其實(shí)是一個(gè)復(fù)合屬性 由border-width邮府、border-style、border-color三個(gè)屬性復(fù)合而成的溉奕。分別設(shè)置的邊框的寬度褂傀，邊框的樣式，邊框的顏色加勤，其中邊框的樣式有很多種仙辟，基本常用的只有solid實(shí)線、dotted短虛線鳄梅、dashed長條虛線三種樣式叠国。
border-width也是一個(gè)復(fù)合屬性
它可以按照上右下左的順序來分別設(shè)置四個(gè)邊框的寬度值。 text-align屬性
這個(gè)屬性是設(shè)置文字的位置的屬性戴尸，它的值也是有三種粟焊，分別是center文字左右居中、left文字左對齊、right文字右對齊项棠。-
line-height屬性
這個(gè)屬性是設(shè)置一行文字所占的高度的屬性悲雳，默認(rèn)狀態(tài)是和字體大小一樣的值。- 當(dāng)我們想要讓單行文字在容器內(nèi)部上下居中的時(shí)候香追，我們只需要讓height = line-height即可合瓢。
- 多行文字居中我們現(xiàn)在還沒有專門的屬性可以做到這一點(diǎn)，不過我本人一般是在文字部分外面包裹一層div標(biāo)簽透典，然后讓div標(biāo)簽在父級元素水平上下居中來實(shí)現(xiàn)的晴楔。（并不知道這么做對不對…）
text-decoration屬性
這個(gè)屬性的意思是文字裝飾的意思，可以來設(shè)置文字是否有下劃線掷匠、上劃線滥崩、中劃線，分別對應(yīng)的屬性值是underline讹语、overline钙皮、line-through。-
cursor屬性
這個(gè)屬性則是設(shè)置我們的鼠標(biāo)移入到這個(gè)元素中的時(shí)候顽决，鼠標(biāo)會變成什么樣子短条。它的值有很多很多，我們同樣可以到css88上去查看才菠。不過一般常用的是cursor: pointer;這一條屬性茸时，它會讓我們鼠標(biāo)移入這個(gè)元素的時(shí)候，鼠標(biāo)變成可以點(diǎn)擊的小手的狀態(tài)赋访。
現(xiàn)在我們就可以來模擬一下a標(biāo)簽的樣式了可都。<p>www.baidu.com</p>p { color: rgb(0, 0, 238); text-decoration: underline; cursor: pointer; }
這個(gè)時(shí)候www.baidu.com的樣式和我們直接用a標(biāo)簽寫一個(gè)www.baidu.com的樣式基本是一模一樣的。
