css選擇器

css最實用的五種選擇器:

元素選擇器

id選擇器

后代選擇器

群組選擇器

塊與內聯:

塊元素:獨占一行。如:div (可使一行文字擁有屬于自己的顏色背景),p ,h1~h6等。

內聯元素:只占自身大小,不會單獨占一行。

區分塊元素跟內聯元素:看是否獨占一行了。

元素選擇器 —— 標簽名{ }

元素選擇器(標簽選擇器),可以根據標簽的名字來從網頁中選取指定的元素。

比如P{ }則會選中頁面中的所有P標簽,h1{ }會選中頁面中的所有h1標簽。

類型選擇器:

class 選擇器,也就是“類選擇器”。我們可以對“相同的元素”或者“不同元素”定義相同的class屬性,然后針對擁有同一個class的元素進行css樣式操作。


通用選擇器:

通用選擇器,可以同時選中頁面中的所有元素。

后代選擇器

后代選擇器,可以根據標簽的關系,為處在元素內部的后代元素設置的樣式。

比如p? strong? 會選中頁面中所有的p 元素內的strong元素。

子元素選擇器 ? 父元素>子元素

子元素選擇器可以給另一個元素的子元素設置樣式

比如 body > h1 將選擇器body子標簽中的所有h1標簽

其他子元素選擇器

:fiest-child-------選擇第一個子標簽。

:last-child--------選擇最后一個子標簽。

:nth-child-------- 選擇指定位置的子元素。

:id選擇器:通過元素屬性,選擇改變元素。

對于id選擇器,前面必須加上前綴#,否則該選擇器無法生效。在id前面加上#,表示這是一個id選擇器。


群組選擇器,指的是同時對幾個選擇器進行相同的操作:


餐廳作業的選擇器:


?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容