第十三节：CSS选择器

选择器

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

简单选择器

1、ID选择器
2、元素选择器
3、类选择器
4、通配符选择器
*，选中所有元素

    
    
    
    


    
Lorem.
    
Lorem.
    
Lorem.

5、属性选择器
根据属性名和属性值选中元素 具体更多可以查阅mdn，点击这里直接跳转查看

    
    
    
    


    
这是一个标题
    百度
    新浪
    斗鱼

6、伪类选择器
选中某些元素的某种状态

• hover 鼠标悬停移动的状态

    
    
    
    


    
这是一个标题
    百度
    新浪
    斗鱼

这个就是鼠标悬停到文字上的颜色样式改变

• activate 鼠标按下的时候发生改变

    
    
    
    


    
这是一个标题
    百度
    新浪
    斗鱼

• link 超链接未访问时的状态

    
    
    
    


    
这是一个标题
    百度
    新浪
    斗鱼

• visited 访问过的颜色

    
    
    
    


    
这是一个标题
    百度
    新浪
    斗鱼

但是如果四个伪类都需要用到的话需要按照
1、link
2、visited
3、hover
4、activate
的顺序来书写，这种也叫做 爱恨法则（love hate）

7、伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
写法是加2个::

• before
• after

还可以添加color等元素

    
    
    
    


    
这是我们学习HTML和CSS的一门练习课程

样式如下：

image.png

选择器的组合

1、并且

首先p元素是有公共样式的，首行缩进了2个字，行高为2，同时red类的字体需要为红色

    
    
    
    


    
Lorem ipsum dolor sit amet.
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet laboriosam, sunt quisquam earum commodi facilis dolor perspiciatis et saepe eius ratione maiores aperiam magnam? Totam sint temporibus accusantium voluptate consequatur?

image.png

2、后代元素 - 空格
比如我们想实现选择 div里面的li元素，修改他的元素，而不影响外面的li元素，则可以用一个空格间隔开

    
    
    
    


    
Lorem ipsum dolor sit amet.
    

        Lorem ipsum dolor sit amet.
        

            
Lorem.
            
Voluptate?
            
Iste?
            
Illo.
            
Eligendi?
        
    
   
    

        
Lorem, ipsum.
        
Odio, id!
        
Deserunt, nesciunt.
        
Commodi, deserunt.
        
Nemo, iusto.
        
Quae, quas?
        
Asperiores, facilis?
        
Ad, iusto!
        
Aperiam, libero.
        
Omnis, beatae.
    
 

image.png

3、子元素 - >
上面的例子，如果改写一下css 则如下(样式不变)

4、相邻兄弟元素 -
可以选择相邻兄弟元素

    
    
    
    


    

        
Lorem, ipsum.
        
Doloribus, eveniet.
        
Quae, voluptate.
        
Facilis, autem?
        
Quas, numquam!
        
Officiis, itaque!
        
Nemo, quod.
        
Recusandae, a?
        
Ea, error!
        
A, officia.
    
 
    

image.png

5、 兄弟元素 - ~
选中元素后面出现的所有元素

    
    
    
    


    

        
Lorem, ipsum.
        
Doloribus, eveniet.
        
Quae, voluptate.
        
Facilis, autem?
        
Quas, numquam!
        
Officiis, itaque!
        
Nemo, quod.
        
Recusandae, a?
        
Ea, error!
        
A, officia.
    
 
    

image.png

选择器的并列

多个选择器，用逗号分割

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

以上代码通过使用语法糖可以修改为如下,实现的效果是一致的

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