ID选择器
CSS:#name { }
HTML:id="name"
注:
1.在一个页面中,ID之前是唯一的,只能出现一次。
2.命名规范:字母,下划线,中划线,数字(命名第一位不能是数字)
3.命名方式:驼峰式,下划线式,短线式。
例如:
searchButton(小驼峰)
SearchButton(大驼峰)
search-small-button(短线式)
search_small_button(下划线式)
CLASS选择器
. name{ }
class="name"
注:
- class选择器可以复用。
- 可以添加多个class样式。
- 多个样式的时候,样式的优先级是根据CSS决定,而不是class属性中的顺序决定。
- 标签+类的写法。
这是给这个盒子同时添加两个样式的时候也可以实现。
这是标签+类的写法。
标签选择器(tag选择器)
div{ }
<div> </div>
可以去掉某些标签的默认样式,或者一次性给某一类标签加上特定的某种样式。
群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。
通配选择器
*{ }
给所有的标签加上样式
注:尽量避免使用。
层次选择器
后代选择器
M N { }
在指定的条件下找到指定的需求,如下图给ul标签下的li加上指定的样式:
父子
M > N { }
只给某个元素的子元素添加样式,其后代的后代不能添加。
兄弟
M ~ N { }
给当前M下的所有兄弟N标签加上样式
这个给div下面的h2标签就加上了背景色,而它上面的h2就没有加上。
相邻
M + N { }
作用的是当前M相邻的N标签(挨在它下面的一个)
这个就给div下面的h2加上了背景。