之前學(xué)習(xí)了css的一些基礎(chǔ)選擇器，然而今天要介紹css的復(fù)雜選擇器，復(fù)雜選擇器一共有三種

1.父子（派生）選擇器

<div class="wrapper">
        <strong class="box">
            <em>234</em>
        </strong>
</div>
<em>123</em>

此時要使234有顏色，需要用到父子選擇器，雖說用之前的標(biāo)簽選擇器可以讓它有顏色，但是123也會有顏色，所以用到為父子關(guān)系的父子選擇器，這樣就可以精確的讓234變色而不使123變色，使用的方法就是父級標(biāo)簽+空格+子級標(biāo)簽，例如

div strong em{
    backgroud-color:red;
}

這樣234所在位置背景顏色為紅，但是123所在位置不滿足父子關(guān)系，所以123所在背景不會變紅；（當(dāng)然不一定只能用標(biāo)簽選擇器連接，也可以用class選擇器等，只取決于是否滿足父子關(guān)系，與連接選擇器無關(guān)）

2.直接子元素選擇器

<div>
        <em>123</em>
        <strong>
            <em>456</em>
        </strong>
</div>

表示直接一級關(guān)系的子元素，例如這里的123是div下面直接的一個em里面，所以稱這個em是div的直接子元素，通過這種方式修飾，只會讓123變色，而456不會變色，使用的方法是

div > em {
background-color:red;
}

通過 “>” 連接，這表示對div的直接子元素em里面的內(nèi)容進(jìn)行修飾。

3.并列選擇器

<div> 1 </div>
<div class="demo"> 2 </div>
<p class="demo"> 3 </p>

這個時候要想2變色而其他的不變色，用標(biāo)簽選擇器、屬性選擇器是辦不到的（當(dāng)然可以用加id選擇器），所以這個時候就需要并列選擇器，就是通過兩個并列的元素來找到修飾對象，從而進(jìn)行修飾。使用方法如下：

div.demo{
    background-color:red;
}

并列選擇器（多個選擇條件選中一個對象）具有它的獨(dú)特性（與其他元素不一樣），方法是兩個或兩個以上的選擇方法不加空格連接在一起。

]

使用復(fù)雜選擇器需要考慮權(quán)重問題,同一排的標(biāo)簽，權(quán)重值可以直接相加
接下來是css字體樣式和顏色的一些簡單屬性；

div{
    font-size:30px;      <!--字體大小(改變的是高度)-->
    font-weight:bold;    <!--字體粗細(xì)（strong標(biāo)簽自帶font-weight屬性）-->
    font-style:italic;   <!--em標(biāo)簽的css樣式--> 
    font-family:arial;   <!--字體樣式-->
    color:green;         <!--純英文單詞式-->
    color:ff00ff;        <!--顏色代碼-->
    color:rgb(25,25,25); <!--顏色函數(shù)-->
}

其中字體屬性值可參考詞典www.css88.com，顏色屬性一般不會用純英文單詞式，因?yàn)樗哂邢拗菩裕▎卧~是什么，顏色就是什么，不會有什么乳白，象牙白之類的，它只有白色），顏色代碼和顏色函數(shù)相對靈活，改變范圍很大。顏色函數(shù)后面的值美工會提供給我們前端，rgb調(diào)色表可以在網(wǎng)上搜索。

今天就先介紹css的這兩種代碼，剛剛提供的那個網(wǎng)站對我們前端學(xué)習(xí)者幫助很多，大家可以直接點(diǎn)擊進(jìn)入，其他的以后會陸續(xù)寫上去，寫得不好，大家見諒！

總結(jié)

以上所述是小編給大家介紹的css復(fù)雜選擇器及css字體樣式、顏色屬性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論