css複雜選擇器及css字體樣式、顏色屬性

以前學習了css的一些基礎選擇器，然而今天要介紹css的複雜選擇器，複雜選擇器一共有三種[

1. 父子（派生）選擇器

   <div class="wrapper">
           <strong class="box">
               <em>234</em>
           </strong>
   </div>
   <em>123</em>
   複製代碼

   此時要使234有顏色，須要用到父子選擇器，雖然說用以前的標籤選擇器可讓它有顏色，可是123也會有顏色，因此用到爲父子關係的父子選擇器，這樣就能夠精確的讓234變色而不使123變色，使用的方法就是父級標籤+空格+子級標籤，例如

   div strong em{
       backgroud-color:red;
   }
   複製代碼

   這樣234所在位置背景顏色爲紅，可是123所在位置不知足父子關係，因此123所在背景不會變紅；（固然不必定只能用標籤選擇器鏈接，也能夠用class選擇器等，只取決因而否知足父子關係，與鏈接選擇器無關）

2. 直接子元素選擇器

   <div>
           <em>123</em>
           <strong>
               <em>456</em>
           </strong>
   </div>
   複製代碼

   表示直接一級關係的子元素，例如這裏的123是div下面直接的一個em裏面，因此稱這個em是div的直接子元素，經過這種方式修飾，只會讓123變色，而456不會變色，使用的方法是

   div > em {
   background-color:red;
   }
   複製代碼

   經過 「>」 鏈接，這表示對div的直接子元素em裏面的內容進行修飾。

3. 並列選擇器

   <div> 1 </div>
   <div class="demo"> 2 </div>
   <p class="demo"> 3 </p>
   複製代碼

   這個時候要想2變色而其餘的不變色，用標籤選擇器、屬性選擇器是辦不到的（固然能夠用加id選擇器），因此這個時候就須要並列選擇器，就是經過兩個並列的元素來找到修飾對象，從而進行修飾。使用方法以下：

   div.demo{
       background-color:red;
   }
   複製代碼

   並列選擇器（多個選擇條件選中一個對象）具備它的獨特性（與其餘元素不同），方法是兩個或兩個以上的選擇方法不加空格鏈接在一塊兒。

]

使用複雜選擇器須要考慮權重問題,同一排的標籤，權重值能夠直接相加

接下來是css字體樣式和顏色的一些簡單屬性；

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

其中字體屬性值可參考詞典www.css88.com，顏色屬性通常不會用純英文單詞式，由於它具備限制性（單詞是什麼，顏色就是什麼，不會有什麼乳白，象牙白之類的，它只有白色），顏色代碼和顏色函數相對靈活，改變範圍很大。顏色函數後面的值美工會提供給咱們前端，rgb調色表能夠在網上搜索。

今天就先介紹css的這兩種代碼，剛剛提供的那個網站對咱們前端學習者幫助不少，你們能夠直接點擊進入，其餘的之後會陸續寫上去，寫得很差，你們見諒！