常见CSS选择器

前言：博客中的CSS都是采用内部样式引入，方便大家的观看，学习

1.标签选择器

<style>
        p {
            color:red;
            font-size: 25px;
        }
    </style>
    <p>hello world</p>

在html中引入css需要一个style标签。标签选择器的格式就是

标签名 {

}

效果图： 

2.类选择器

标签选择器将同一类型的标签都选择出来，但是不能差异化选择，而类选择器能够实现

<style>
        .one {
            color:green;
            font-size: 20px;
        }

    </style>
    <p class="one">hello world</p>
    <p>hello world</p>

.类名 {

} 

效果图：

两者都是p标签，但是通过类选择器能够实现上图效果

3.id选择器 

id选择器和类选择器类似，其中最大的区别就是一个页面中的id是独一无二的，也就意味着id选择器只能被一个标签使用。

<style>
        .one {
            color: green;
            font-size: 20px;
        }
        #the-id {
            color: aqua;
            font-size: 10px;
        }

    </style>
    <p class="one">hello world</p>
    <p>hello world</p>
    <div class="one">hello world</div>
    <div id="the-id">hello css</div>

#id名 {

}

效果图 

4.通配符选择器

<style>
        * {
            color: blue;
        }

    </style>
    <p>hello world</p>
    <p>hello world</p>
    <div>hello world</div>
    <div>hello css</div>

上面代码使页面中所有内容都改成蓝色，因此通配符选择器常用于页面的初始化。

* {

}

效果图：

 5.后代选择器

作用：选择父元素中的某个子元素

<style>
        ol li {
            color: red;
        }
        ol div {
            color: green;
        }
    </style>
    <ol>
        <li>aaa</li>
        <li>
            <div>bbb</div>
        </li>
        <li>ccc</li>
    </ol>

父元素 后代元素 {

}

效果图：

 bbb之所以是绿色是因为后面的那个后代选择器把bbb从红色变成绿色了。

 6.子选择器

和后代选择器类似，但是只能选择子标签。

<style>
        .one {
            color: blue;
        }
        .one>a {
            color: brown;
        }
    </style>
    <div class="one">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

通过类选择器把div标签变成蓝色，后又通过子选择器把a标签变成棕色，链接2属于div的孙子辈，故仍是蓝色。

效果图：

7.并集选择器

作用：选择多组标签

   <style>
        div, 
        p,
        ul>li {
            color: blue;
            font-size: 20px;
        }
    </style>
    <div>hello css</div>
    <p>hello world</p>
    <ul>
        <li>aaa</li>
    </ul>

格式：通过逗号分开，建议竖着写。

效果图： 

8.伪类选择器

第一种

<style>
        div:hover {
            color: blue;
        }
    </style>
    <div>hello css</div>
    <p>hello world</p>
    <ul>
        <li>aaa</li>
    </ul>

把鼠标放在hello css上颜色从黑色变成蓝色。 

第二种

<style>
        p:active {
            color: red;
        }
    </style>
    <div>hello css</div>
    <p>hello world</p>
    <ul>
        <li>aaa</li>
    </ul>

效果图：

用鼠标点击hello world（长按，不松手）颜色就从黑色变红色。