當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS中的选择器之类选择器和id选择器

發(fā)布時間：2024/4/13 CSS 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS中的选择器之类选择器和id选择器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.css中的選擇器：

1.類選擇器，又叫class選擇器
2.id選擇器
3.html元素選擇器(又叫標(biāo)簽選擇器)
4.通配符選擇器
5.偽類選擇器
6.組合選擇器(多元素選擇器,子元素選擇器,后代選擇器)
簡單來說，選擇器就是在css中創(chuàng)建，而在網(wǎng)頁頁面(html,jsp,php,asp.net)中使用
選擇器的名稱命名規(guī)范:
一般使用中劃線形式:xxx-yyy,一般是小寫字母

2.類選擇器

基本語法:

.類選擇器名稱{ CSS屬性:屬性值; CSS屬性:屬性值; }

一般來說,類選擇器是提供給多個html元素來使用的.

實(shí)例代碼:

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">.span-news{font-weight:bold;background-color:pink;color:black;}</style> </head> <body> 新聞一 新聞二 新聞三 新聞四 新聞五 </body> </html>

刷新瀏覽器后顯示效果如下:

3.id選擇器

基本語法:

#id選擇器名稱{ CSS屬性:屬性值; CSS屬性:屬性值; }

在類選擇器代碼的基礎(chǔ)上增加一行字體,并設(shè)置其自己的樣式.
實(shí)例代碼如下:

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">.span-news{font-weight:bold;background-color:pink;color:black;}#span-news-tb{font-weight:bold;font-size:25px;background-color:silver;}</style> </head> <body> 新聞一 新聞二 新聞三 新聞四 新聞五 <hr> 這是一個比較重要的新聞 </body> </html>

刷新瀏覽器后顯示的效果:

關(guān)于id選擇器的一些說明 :
1.一般來說,id選擇器是提供給某一個html元素來使用
2.當(dāng)不確定時,有多個html元素來使用該樣式時,請使用類選擇器.

總結(jié)

以上是生活随笔為你收集整理的CSS中的选择器之类选择器和id选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【Lucene4.8教程之二】索引
下一篇： CSS3 box-reflect 属性