关于css中选择器的小归纳

一、基本选择器

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

1.元素选择器

范例：

<p>你好，css</p>

<div>你好，css</div>

css：

div{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

2.类选择器

范例：

<p class="one">你好，css</p>

<p class="two">你好，css1</p>

css：

.one{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

3.ID选择器

范例：

<p id="first">你好，css</p>

<p id="second">你好，css</p>

css：

#first{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

4.普遍选择器

范例：

<p>你好，css</p>

<div>你好，css</div>

css：

*{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

5.并且选择器

范例：

<p class="one" id="first">你好，css</p>

<p class="one">你好，css</p>

<p id="first">你好，css</p>

css：

p.one#first{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

6.并列选择器

范例：

<p>你好，css</p>

<div class="one">你好，css</div>

<ul id="first">你好，css</ul>

css：

p,.one,#first{

            border:1px solid #ededed;

            background-color: lightblue;

        }

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

二、层次选择器

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

1.后代选择器（可被后代继承）

范例：

<div class="content">

        <p>你好，css</p>

        <hr>

        <ul>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ul>

</div>

css：

.content{

    border:1px solid #ededed;

    background-color: lightblue;

}

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

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

范例：

<div class="content">

        <p>你好，css</p>

        <hr>

        <ul>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ul>

</div>

css：

.content > li{

    border:1px solid #ededed;

    background-color: lightblue;

}

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

3.下一个兄弟选择器

范例：

<div>

        <ul>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ul>

        <ol>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ol>

        <dl>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </dl>

</div>

css：

ul + ol{

    border:1px solid #ededed;

    background-color: lightblue;

}

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

4.之后所有兄弟选择器

范例：

<div>

        <ul>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ul>

        <ol>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </ol>

        <dl>

            <li>one</li>

            <li>two</li>

            <li>three</li>

        </dl>

</div>

css：

ul ~ dl{

    border:1px solid #ededed;

    background-color: lightblue;

}

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