关于css中选择器的小归纳（一） - 走看看

关于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所有内容的样式都发生了改变
（未完，待总结...）