并选择器(HTML),关于css中选择器的小归纳（一）

关于css中选择器的小归纳

一、基本选择器

基本选择器是我们平常用到的最多的也是最便捷的选择器，其中有元素选择器(类似于a，div，body，ul)，类选择器(我们在HTML标签里面为其添加的class)，ID选择器(与类选择器类似)，普遍选择器(*)，并且选择器(类似“p.one#first”的写法)和并列选择器(类似“p,.one,#first”的写法)

1.元素选择器

范例：

你好，css

你好，css

css：

div{

border:1px solid #ededed;

background-color: lightblue;

}

只有div标签的内容样式发生改变

2.类选择器

范例：

你好，css

你好，css1

css：

.one{

border:1px solid #ededed;

background-color: lightblue;

}

只有class为“one”的p标签样式发生改变

3.ID选择器

范例：

你好，css

你好，css

css：

#first{

border:1px solid #ededed;

background-color: lightblue;

}

只有ID为“first”的p标签样式发生改变

4.普遍选择器

范例：

你好，css

你好，css

css：

*{

border:1px solid #ededed;

background-color: lightblue;

}

所有标签内的样式都发生改变

5.并且选择器

范例：

你好，css

你好，css

你好，css

css：

p.one#first{

border:1px solid #ededed;

background-color: lightblue;

}

只有ID为“first”且同时class为“one”的p标签样式发生改变

6.并列选择器

范例：

你好，css

你好，css

• 你好，css

css：

p,.one,#first{

border:1px solid #ededed;

background-color: lightblue;

}

p标签，class为“one”的标签和ID为“first”的标签样式都发生改变

二、层次选择器

层次选择器一般用于选择网页中某一个标签中子类众多的情况，在这个时候为每一个标签都加上class或者是ID不太现实，但是不加又难以选择需要添加样式的标签，此时层次选择器尤为合适。

1.后代选择器(可被后代继承)

范例：

你好，css

---

• one
• two
• three

css：

.content{

border:1px solid #ededed;

background-color: lightblue;

}

class为content的div标签里面所有的子代及孙代样式都发生改变

2.子代选择器(最直接的子代，不能被孙辈元素继承)

范例：

你好，css

---

• one
• two
• three

css：

.content > li{

border:1px solid #ededed;

background-color: lightblue;

}

class为content的div标签里面所有的子代(只有子代，不含孙代)样式都发生改变

3.下一个兄弟选择器

范例：

• one
• two
• three

1. one
2. two
3. three

onetwothree

css：

ul + ol{

border:1px solid #ededed;

background-color: lightblue;

}

ul及ol标签内容的样式发生改变，但是dl内容样未改变

4.之后所有兄弟选择器

范例：

• one
• two
• three

1. one
2. two
3. three

onetwothree

css：

ul ~ dl{

border:1px solid #ededed;

background-color: lightblue;

}

从ul到dl所有内容的样式都发生了改变

(未完，待总结...)