2021-07-12 CSS笔记 css选择器

css外联样式表

如果写了外联样式再叠标签的内部样式，优先显示标签的（但是我感觉也不怎么写在标签里面的了）

基本语法：

选择器

元素选择器 直接用元素

直接通过选中页面里面的所有同类元素

 h1{
 	 color: pink;
    }

2. id选择器#id
   只能选中一个
3. 类选择器.class
   能够选择多个使用同一样式 class赋值的时候 赋多个值 值之间要用空格隔开
4. 通配选择器 *
   选择当前页面所有元素 统一使用css

复合选择器

1. 交集选择器 直接写在一起
   一般是元素+类或者类+类
   如果是元素加类，元素要写在前面

 h1.c2{
          color: aqua;
       }

2. 并集选择器 使用逗号隔开

 h1,p{
                color: aqua;
            }

关系选择器

1. 子代选择器 父>子 （只改变紧跟着的那个）

 div > p{
                color: aqua;
            }

2.后代选择器 祖先 后代 （改变所有后代）

 div  p{
                color: aqua;
            }

3. 兄弟选择器 哥哥+弟弟/哥哥~弟弟（只改变紧跟着的那个）

p~span{
                color: aqua;
            }

+是只选择后面那个
~是选择后面全部

属性选择器[属性] 有就被选择

伪类

nth-of-type(n)与nth-child(n)的区别：
nth-of-type(n)：这个是在同类里面排第几个
nth-child(n)：这个是在所有同辈后代排第几个
https://zhuanlan.zhihu.com/p/126681521

<style>
           li:nth-of-type(2){
               color: aquamarine;
           }
           li:nth-child(2){
               color: rgb(201, 154, 26);
           }
</style>

 <ul>
            <span>span1</span>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

超链接
没有兄弟
兄弟里面只有一个独苗

伪元素

我觉得可以理解成在特殊状态/位置的元素
::first-letter是对块级元素的第一个字母进行操作
::before
eg:

::before跟::after都是css里面的内容，因此不能被选中。

伪元素 关系选择器

.xxx:hover{}直接选中元素本身
.xxx：hover yyy{} 悬停是选中的是yyy 悬停在yyy上也算选中yyy 可以理解成还是后代选择器的一种，只是祖先元素是在悬停状态下的xxx，而这个选择器是它的后代yyy，就是给祖先元素加了:hover这个限制条件而已啦。这个跟物理空间也没有关系，用display：none跟visibility：hidden的效果是一样的（display：none是不保留元素的物理空间，visibility：hidden是保留元素的物理空间，还在那里只是不显示）。
看了一下别的思路，觉得用继承解释比较能解释通。子元素继承了:hover状态下的父元素的hover状态，所以当在父元素悬停，子元素继承了就显示了，移入子元素时子元素本身也是hover，也能显示。（还是没能讲明白为什么移入子元素离开父元素的时候子元素还能显示。。）

选择器权重

加是累加，比如两个类选择器就肯定比只有一个类选择器的高，而且相同权重选择器的后面的会覆盖前面的。
：nth-child（an+b）选的是当前元素的所有兄弟元素，再根据前后进行排列。