CSS選擇符的分類及用法

CSS選擇符?八■▲前言CSS：是CascadingStyleSheet的縮寫，譯作【層疊樣式表單】，是一組格式設(shè)置規(guī)則。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS的組成：CSS的定義是由三個部分組構(gòu)成：選擇符（Selector），屬性（properties）和屬性的取值（value）。語法：selector{proprety:value}（選擇符{屬性：屬性值}）注：1、CSS聲明塊由：選擇符+“{”+1個或者多個CSS屬性+“}”組成。2、 CSS是大小寫不敏感的，在CSS語法中推薦使用小寫。正文一、 CSS選擇符：就是CSS樣式的名字，當(dāng)在HTML文檔中表現(xiàn)一個CSS樣式的時候，就要用到一個CSS。怎么用呢？這時就通過CSS選擇符（CSS的名字）來指定此HTML標(biāo)簽使用此CSS樣式。二、 選擇符語法：一個CSS選擇符就定義了一個樣式。選擇符名稱{聲明;}比如：pp{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;#dreamdured{color:red;}P、dreamdublue、dreamdured都是選擇符。三、 選擇符命名規(guī)則：css選擇符可以使用英文字母的大寫與小寫，數(shù)字，連字號，下劃線，冒號，句號。?英文字母大寫與小寫A-Za-z?數(shù)字0-9連字號 -下劃線 _冒號:句號.注：1、CSS選擇符只能以字母開頭。四、 選擇符分類：CSS選擇符可以分為很多類，比如：類型選擇符，id選擇符，class選擇符，通用選擇符，分組選擇符，包含選擇符，元素指定選擇符，子對象選擇符，屬性選擇符，相鄰選擇符等，以下將一一介紹分析。1、 類型選擇符：類型選擇符就是網(wǎng)頁元素本身，定義時直接使用元素名稱。Body{/*定義頁面屬性*/}Div{Width:774px;/*把所有的div元素定義為寬度為774像素*/}2、 id選擇符：它是唯一的，不同元素的id值是不能重復(fù)的，id選擇符為每個元素的具體對象定義不同的樣式，方便用戶更加精細(xì)的控制頁面。使用id選擇符時要先為每個元素定義一個id屬性。<divid=”top”></div>使用id選擇符時，需要使用到#進行標(biāo)識：#top{Width:774px;/*把所有的div元素定義為寬度為774像素*/}3、 class選擇符：在一個文檔中可以為不同類型的元素定義相同的類名，class可以實現(xiàn)把相同樣式的元素統(tǒng)一為一類，使用class選擇符時要先為每個元素定義一個class屬性：<divclass=”red”></div><spanclass=”red”></span><pclass=”red”></p>使用class選擇符時，需要使用英文.（點）進行標(biāo)識：.red{Color:red;}4、通用選擇符：是一種特殊的選擇符，它用*表示，是一個使用但又容易忽略的選擇符。*{font-size:12pt;/*定義文檔中所有字體大小為12pt*/}5、分組選擇符：分組選擇符不是一種選擇符類型，而是一種選擇符方法。當(dāng)多個對象定義了相同的樣式時，我們可以把他們分為一組。這樣能夠簡化代碼讀寫，比如：.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}可以分組為：.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}使用分組有2原則：1.方面原則；2.就近原則（如果幾個元素相鄰，在一個模塊內(nèi)可以考慮使用分組選擇符）6、包含選擇符：最有用的一類選擇符，它能夠簡化代碼，實現(xiàn)大范圍的樣式控制。比如：.div1h2{/*定義類div1層中所有h2的標(biāo)題樣式*/font-size:18px;}.div1p{/*定義類div1層中所有p的標(biāo)題樣式*/font-size:12px;7、}元素指定選擇符：有時候我們希望控制某種元素在一定范圍內(nèi)對象的樣式，這時可以把class或id7、span.red{/*定義span元素中class為red的元素顏色為紅色*/color:red;}div#top{/*定義div元素中id為top的元素寬度為100%*/width:100%;}eg:<div><h2class="news"><h2><pclass="news"></p><spanclass="news"></span></div>在上面代碼中要使用news選擇符很顯然不行，直接使用P,h2類型選擇符也不太好這時便可以使用元素指定選擇符p.news{}h2.news{}span.news{}子對象選擇符：與元素選擇符一樣都是限制選擇符，即在一定元素范圍內(nèi)定義符合限制條件的元素樣式，元素制定選擇符是用class和id屬性作為限制條件的，而子對象選擇符是用id和子對象作為限制條件的。#main>table{/*定義id為main的主體模塊中子對象table的樣式*/width:788px;font-size:12px;#main>.title{/*定義id為main的主體模塊中子對象的class為title的樣式*/color:red;font-style:italic;}9、屬性選擇符：屬性選擇符是在元素后面加一個中括號，中括號中列出各種屬性，或者表達式。屬性選擇符存在7種具體形式：?存在屬性匹配：通過匹配存在的屬性來控制元素的樣式，一般要把匹配的屬性包含在中括號中，只列舉姓名并不賦值：h1[class]{coloured;/*作用任何帶class屬性的hl元素不管class的值是什么*/}img[alt]{border:none;/*作用任何帶alt屬性的img元素不管alt的值是什么*/}a[href][title]{font-weight:bold;/*作用同時帶href和title屬性的a元素*/}精準(zhǔn)屬性匹配：只有當(dāng)屬性值完全匹配指定的屬性值時才會應(yīng)用樣式，id和class選擇符實際上就是精準(zhǔn)屬性選擇。a[href=""][title="網(wǎng)易"]{font-size:12px;/*作用地址指向并且title提示字樣為"網(wǎng)易"的a元素*/}空白分個匹配：通過為屬性定義字符串列表，然后只要匹配其中任意一個字符串即可控制元素樣式。<spanclass="abc">誰來控制我的樣式</span>可以使用下面樣式來控制：[classA="a"]{color:red;}或：[classA="b"]{color:red;}或：[classA="c"]{}或：span[classA="c"]{color:red;}?連字符匹配：與空白匹配的功能和用法相同，但是連字符匹配中的字符串列表中用連字符進行分割.<spanclass="a-b-c">誰來控制我的樣式</span>可以使用下面樣式來控制：[class|="a"]{color:red;}或：[class|="a"]{color:red;}或：[class|="b"]{color:red;}或：[class|="c"]{color:red;}或：span[class|="c"]{color:red;}?前綴選擇符：只要屬性值的開始字符匹配指定字符串，即可對元素應(yīng)用樣式。前綴匹配使用卜=]形式來實現(xiàn)：<divclass="myTest">前綴匹配</div>可使用如下樣式控制[classA="my"]{color:red;}?后綴匹配：與前綴相反，只要屬性的結(jié)尾字符匹配指定字符，使用[$=]形式控制。<divclass="myTest">后綴匹配</div>可使用如下樣式控制[class$="Test"]{color:red;}子字符串匹配：只要屬性中存在指定字符串即應(yīng)用樣式，使用［*=］形式控制。<divclass="myTest">子字符串匹配</div>可使用如下樣式控制[class*="est"]{color:red;}10、10、div+p{font-size:24px;/*作用所有緊貼div元素之后的p元素，定義p元素的字體大小為14p