CSS 常用的选择器

1.基础选择器：单个选择器构成的

标签选择器

<style>
    p {
        color: red;
        font-size: 30px;
    }

    div {
        color: red;
        font-size: 30px;
    }
</style>

<p>hello</p>
<p>hello</p>
<p>hello</p>
<div>hello</div>
<div>hello</div>
<div>hello</div>

优点：能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器

<style>
    .red {
        color: red;
    }
    .fontsize{
        font-size: 50px;
    }
</style>

<p class="red">hello</p>
<p class="red fontsize">hello</p>

优点：可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。

同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开。

id选择器

<style>
    #one{
        color: red;
        font-size: 500px;
    }
    #two{
        color: green;
        font-size: 500px;
    }
</style>

<p id="one">hello</p>
<p id="two">hello</p>

注意：大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

通配符选择器

//例子一
<style>
    * {
        font-size: 500px;
    }
</style>

<p>hello</p>
<p>hello</p>

//例子二

//使用该选择器定义样式，清除所有HTML标记的默认边距。常用来清除浏览器的默认样式

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<p>hello</p>
<p>hello</p>

        实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

2.复合选择器：把多种基础选择器综合起来

后代选择器

<style>
    ol li {
        color: red;
    }

    ul li {
        color: pink;
    }

    ol li a {
        color: green;
    }

    ol.one li#first {
        font-size: 100px;
    }
    /*等效*/
    .one #first{
        font-size: 100px;
    }
</style>

<ul>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

<ol>
    <li>aaa</li>
    <li>aaa</li>
    <li><a href="#">aaa</a></li>
</ol>

<ol class="one">
    <li id="first">aaa</li>
    <li>aaa</li>
    <li><a href="#">aaa</a></li>
</ol>

注意：
1、后代包括儿子，孙子，只要是放在指定标签的后代都是。
2、也可以用id和class名，分别用id和class来选择。
3、后代选择器可以无限衍生。

子选择器

<style>
  .one>#first{
    color: red;
  }
</style>

<ul>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ul>

<ol>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ol>

<ol class="one">
  <li id="first">aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ol>

注意：
1、只会查找儿子，不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。

3、子元素选择器也可以通过>符号一直延续下去。

并集选择器

<style>
    div,span,ul>.one{
        color: red;
    }
</style>

<div>水果</div>

<span>榴莲</span>

<ul>
  <li class="one">苹果</li>
  <li>香蕉</li>
  <li>火龙果</li>
</ul>

同时针对多个元素，设置相同的样式。与后代选择器相似，注意加逗号

伪类选择器

<style>
  /*访问之前的情况*/
  a:link{
    color: black;
  }
  /*访问过的情况*/
  a:visited{
    color: blue;
  }
  /*鼠标悬停的情况*/
  a:hover{
    color: red;
  }
  /*鼠标按下尚未放开*/
  a:active{
    color: grey;
  }

</style>

<a href="#">这是一个链接</a>

CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。