css选择器

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器
   #选中的是对应id值的元素，选中范围太窄，不常用
2. 元素选择器
   选中元素范围太广，不常用
   例如：h1{ }
3. 类选择器
   .用的最多，非常灵活
4. 通配选择器
   *表示选中所有元素
5. 属性选择器
   根据属性名和属性值选中元素
6. 伪类选择器
   例如：元素名：hover{}，没有元素名就表示对于所有元素的样式
   选中某些元素的某种状态
   (1)link:超链接未被访问过的状态
   (2)visited:超链接访问过后的状态
   (3)hover表示鼠标悬停的状态，鼠标移动上去的状态
   (4)active:表示激活状态，鼠标按下状态
   前两种只有a元素适用
   如果要写这四个属性，必须按照以上顺序书写，否则会出问题，这种被称为“爱恨法则”love hate
7. 伪元素选择器
   生成并选中某个元素内部的第一个子元素或最后一个子元素
   写法：元素名+：：{}
   before:相当于在一个元素里面的前面在一个元素before,为它设置内容和样式
   after:相当于在一个元素里面的后面在一个元素after,为它设置内容和样式
   例如：

   <p>
       <span>html+css</span>>课程真的不错啊 
    </p>
   

   span::before{
    content:"《";
    color:red;
   }
   span::after{
    content:"》";
    color:red;
   }
   

选择器的组合

1. 并且 两个选择器连起来 比如：p.red{}

2. 后代元素 ——空格 （用的最多）

   <div class="red">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus magnam iste nihil, a soluta velit!</p>
        <ul>
            <li>Lorem.</li>
            <li>Iusto!</li>
            <li>Totam.</li>
            <li>Dolorem?</li>
            <li>Quia!</li>
        </ul>
    </div>
   

   .red li{
    color: #008c8c;
   }
   

   <div class="abc">
        <P>Lorem.</P>
        <P class="bcd">Expedita.</P>
        <P>Doloribus!</P>
    </div>
    <p class="bcd">
        Lorem ipsum dolor sit amet.
    </p>
   

   .abc .bcd{
    color:red;
   }
   

3. 子元素 —— >

   <div>
        <ul>
            <li>Lorem.</li>
            <li>Nostrum!</li>
            <li>In!</li>
        </ul>
    </div>
   

   div>ul>li{
    color: red;
   }
   

4. 相邻兄弟元素 —— +

   <div>
        <ul>
            <li>Lorem.</li>
            <li class="special">Ullam.</li>
            <li>Ab!</li>
            <li>Aliquid?</li>
            <li>Quo.</li>
        </ul>
    </div>
   

   .special{
    color:red;
   }
   .special+li{
    color: #008c8c;
   }
   

5. 后面出现的所有兄弟元素 —— ~

   .special{
   color:red;
   }
   .special~li{
   color: #008c8c;
   }
   

选择器的并列

多个选择器，用逗号分隔

.special{
 color:red;
 }
.special+li,p{
 color: #008c8c;
}

一渡教育公开课学习笔记