選擇器(重點)
要想將CSS樣式應用於特定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。
如上圖所以,要把裡面的小黃人分為2組,最快的方法怎辦?
很多, 比如 一隻眼睛的一組,剩下的一組
選擇器幹啥的? 選擇標籤用的
這就用到基礎選擇器組:
CSS基礎選擇器
標籤選擇器(元素選擇器)
標籤選擇器是指用HTML標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下:
標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。
標籤選擇器 可以把某一類標籤全部選擇出來 div span
類選擇器
類選擇器使用「.」(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤調用的時候用 class=「類名」 即可。
類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標籤
小技巧:
1.長名稱或詞組可以使用中橫線來為選擇器命名。 2.不建議使用「_」下劃線來命名CSS選擇器。
輸入的時候少按一個shift鍵; 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的) 能良好區分JavaScript變量命名(JS變量命名是用「_」)
3.不要純數字、中文等命名, 儘量使用英文字母來表示。
命名是我們通俗約定的,但是沒有規定必須用這些常用的命名。
案例:
<head>
<meta charset="utf-8">
<style>
span { font-size: 100px; }
.blue { color: blue; }
.red { color: red; }
.orange { color: orange; }
.green { color: green; }
</style>
</head>
<body>
<span>G</span>
<span>o</span>
<span>o</span>
<span>g</span>
<span>l</span>
<span>e</span>
</body>
多類名選擇器
我們可以給標籤指定多個類名,從而達到更多的選擇目的。
注意:
樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。 各個類名中間用空格隔開。
多類名選擇器在後期布局比較複雜的情況下,還是較多使用的。
<div>亞瑟</div>
<div>劉備</div>
<div>安其拉</div>
<div>貂蟬</div>
類名選擇器 :
< div class=「nav」> 這個 div 的名字 就是 nav nav 就是 div 這個 div 也是 nav
< 人 class = 紫霞仙子 > 我們想要吧div 找到 div {} .nav {}
id選擇器
id選擇器使用「#」進行標識,後面緊跟id名,其基本語法格式如下:
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中,id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應於文檔中某一個具體的元素。
用法基本和類選擇器相同。
id選擇器和類選擇器區別
W3C標準規定,在同一個頁面內,不允許有相同名字的id對象出現,但是允許相同名字的class。
類選擇器(class) 好比人的名字, 是可以多次重複使用的, 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號碼, 全中國是唯一的, 不得重複。 只能使用一次。
id選擇器和類選擇器最大的不同在於 使用次數上。
通配符選擇器
通配符 選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼,使用通配符選擇器定義CSS樣式,清除所有HTML標記的默認邊距。
* { margin: 0; /* 定義外邊距*/ padding: 0; /* 定義內邊距*/ }
注意:
這個通配符選擇器,就像我們的電影明星中的夢中情人, 想想它就好了,但是它不會和你過日子。
原文地址:https://blog.basnit.com/90.html