关于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
        

one
            
two
            
three
        

one
            
two
            
three
        
        

css：

ul + ol{
    border:1px solid #ededed;
    background-color: lightblue;
}

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

4.之后所有兄弟选择器

范例：

        

one
            
two
            
three
        

one
            
two
            
three
        

one
            
two
            
three
        
        

css：

ul ~ dl{
    border:1px solid #ededed;
    background-color: lightblue;
}

从ul到dl所有内容的样式都发生了改变
（未完，待总结...）