CSS元素选择器

这里我们先普及一下CSS的三种引用方法

1. 直接在一个元素上面加一个style

<div style="color:green;text-align: center">
    直接在一个元素上面加一个style属性

1. 在一个head标签加一个style标签/元素

 <style>

        p,h2{
            color: red;
            text-align: center;
        }
        ul li{
            color:red;
        }
        ol li{
            color:green;
        }
        /*id选择器*/
        #a1{
            color: red;
        }
    </style>

1. 引入一个CSS文件，在head标签上 加一个link标签，标签引用

  <link rel="stylesheet" href="b.css">

CSS文件
CSS语法特点：选择器{键：值；键：值；}

使用CSS的时候很重要的就是要选出我们要添加样式的元素，下面我们就来看看各个元素选择器
1、元素名称选择器

• h1,h2,h3{color: blue;text-align: center;}

h1,h2,h3{
     color: blue;
     text-align: center;
}

2、分组选择器，对元素进行分组

 p,h2{
            color: red;
            text-align: center;
        }

3、继承，CSS规定，子元素从父元素继承属性。元素的优先级：最近原则，离元素最近的规则优先级最高

4、后代选择器，例ul li 中间加空格控制后代元素

/* 只有ul的后代li才会有颜色变化*/

ul li{
     color: green;
}

 后代选择器
  <ul>
       <li>后代1</li>
       <li>后代2</li>
       <li>后代3</li>
       <li>后代4</li>
   </ul>

   <ol>
       <li>ol下的li</li>
       <li>ol下的li</li>
       <li>ol下的li</li>
       <li>ol下的li</li>
   </ol>

5、id选择器 #（id的名称）这个其实属性选择器的一种

  #d3{
            color:brown;
        }
<div id="d3" class="c1">我是c1</div>

6、ID选择器与后代选择器的混合使用 这里的后代可以直接选取名称，无论它是多少代

 #d1 li{
            color:rebeccapurple;
        }
<div id="d1">
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>
            <ol>
                <li>我是ol</li>
                <li>我是ol</li>
                <li>我是ol</li>
            </ol>
        </li>
    </ul>
    <ul id="my1">
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
</div>

7、相邻兄弟选择器

• li + li { color: red;}

<style>
    /*
        相邻兄弟选选择器
        只有li下面的标签才会生效
    */

    li + li{
        color: red;
    }
</style>


<div>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>
<div>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
</div>

8、子元素选择器

• #my1 > li {color: blue;}

/* 子元素选择器*/
  #my1 > li {
       color: blue;
   }

 <ul id="my1">
        子元素选择器
     <li>我是li</li>
     <li>我是li</li>
     <li>我是li</li>
     <li>我是li</li>

 </ul>

8、属性选择器