css3学习篇之选择器

css3学习篇之选择器

---

1 基本选择器

 

*{}

说明：选择所有元素

 

ID选择器:

#box1{}

说明：选择id为 “box1”的元素

 

类选择器:

.box1{}

说明：选择所有类为“box1”的元素

 

元素选择器：

div{}

说明：选择所有div元素

 

后代选择器：

#box .smallBox{}

说明：选择所有id为“box”下类为“box1”的元素

 

子元素选择器（直接后代选择）

#box>.smallBox{}

说明：选择id为“box”下类为“smallBox”的所有元素

 

相邻兄弟选择器

.box .smallBox+.smallBox2{}

说明：选择类为“box”下类为“smallBox”下一个相邻的类为“smallBox”的兄弟元素（条件：1.下一个兄弟元素 2.相邻）

 

通用兄弟选择器

.box .smallBox~.smallBox2{}

说明：选择类为“box”下类为“smallBox”后面的类为“smallBox2”的所有元素（条件：1.兄弟元素 2.元素后面）

 

分组选择器

.box,.smallBox{}

说明：选择所有类为“box”和类为“smallBox”的所有元素

---

2 属性选择器

2.1 存在和值选择器

存在选择器

div[name]{background: chocolate}

说明