深探CSS选择器🚄

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

选择器

• 简单选择器

  1. ID选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

     #text{
         text-align:center;
         color:red;
     }
     

  2. Class选择器：class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

     .center {
         text-align:center;
     }
     

  3. 元素选择器：根据元素名称来选择 HTML 元素

     h1 {
         text-align:center;
     }
     

• 组合器选择器

  1. 后代选择器：选择后代中某个元素

     div p{
         color:red;
     }
     

  2. 子选择器：选择后代所有的某个元素

     div > p {
         background-color: yellow;
     }
     

  3. 相邻兄弟选择器:选择相邻之后的所有元素

     div + p {
         background-color: yellow;
     }
     

  4. 通用兄弟选择器:选择所有同级的某元素

     div ~ p {
         background-color: yellow;
     }
     

• 伪类选择器

  1. 伪类：通常向选择器加入一些特殊的效果

     伪类	作用
     :first-child	为元素第一个子元素添加样式
     :visited	访问过后的链接添加样式
     :hover	鼠标浮在元素上方，向元素添加样式
     :focus	当键盘输入焦点的元素添加样式
     :link	为未访问过的链接添加样式

  2. 锚伪类

     /* 未访问的链接 */
     a:link {
         color: #FF0000;
     }
     
     /* 已访问的链接 */
     a:visited {
         color: #00FF00;
     }
     
     /* 鼠标悬停链接 */
     a:hover {
         color: #FF00FF;
     }
     
     /* 已选择的链接 */
     a:active {
         color: #0000FF;
     }
     

  3. 伪元素

     伪元素	作用
     ::first-letter	文本首字母
     ::first-line	文本首行
     ::before	元素之前插入某些内容
     ::after	元素之后插入某些内容
     ::selection	匹配突出显示文本

• 属性选择器

  1. [attribute] 选择器:选择带有某属性值的元素

     a[href] {
         background-color: yellow;
     }
     

  2. [attribute="value"] 选择器：选择某属性值为某值得元素

     img[alt="qlstudio"] { 
         background-color: yellow;
     }
     

  3. [attribute|="value"] 选择器:选取某属性值为value开头的元素（value-top）

     [class|="top"] {
         background: yellow;
     }
     

  4. [attribute^="value"] 选择器:选取某属性值为value开头的元素（valuetop)
  5. [attribute$="value"] 选择器:选取某属性值为value结尾的元素（botvalue)
  6. [attribute*="value"] 选择器:选取某属性值含有value的元素

• 其他

  1. 通用选择器：全部元素

     * {
         padding: 0;
     }
     

  2. 组合选择器：当某几个元素样式相同

     h1,p,h2 {
         color:red;
     }
     

选择器权重

加载顺序

之前我们讲了选择器的引入方式以及选择器的类别大家有没有想过若我们给一个元素用不同的引入设置相同属性不同属性值的样式会发生什么呢 举个列子

p{
    color:green;
}
link

link
p{
    color:green;
}

我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式

权重计算

大家都了解二进制吧 0010>0001

形式	值	值	值	值
内嵌	1	0	0	0
ID	0	1	0	0
class	0	0	1	0
元素	0	0	0	1
*	0
!import	权利无上

div span {
    /* 0,0,0,2 */
}
p #span_one{
    /* 0,1,0,1 */
}

浏览器会执行权重最大的样式

注意：组合选择器由相加计算得到且选择器权重不会满十进一 0,1,0,0>0,0,28,0

层叠与继承

层叠

如果优先级相等，对于同一元素，后面的css样式会覆盖前面的css样式

继承

子元素会继承父元素的一些特定的属性值

• 常用默认继承：
  1. 字体系列：font-family,font-size;
  2. 文本系列：text-indext.line-height,color;
  3. 元素可见性：visbility;
• 常用默认不继承：
  1. 高度与宽度：height,width;
  2. display
  3. 文本阴影：text-shadow
  4. 背景属性：background
  5. 浮动属性：float
  6. 定位属性：position，left，top；