重学CSS基础知识-CSS选择器的那些事儿

敲代码的小提琴手
329 阅读3分钟

1.CSS选择器与选择器的优先级

知识前瞻

image.png 另外 设置在父元素上的CSS属性是可以被子元素继承的

image.png 这里老师讲的还是比较基础的 我们来看几个面试经典问题——

【1】CSS选择器有哪些？

首先来看看 都有哪些CSS选择器呢！

  • 【1】id选择器 # myId

  • 【2】类选择器 .myclassname

  • 【3】标签选择器 div h1 p

  • 【4】相邻选择器 h1 + p

这个选择器我以前是没见过~ 具体作用是 选择紧贴在第一个选择器后面那个元素（在本例中 只要出现h1 p相邻的情况 p就会被选择！）

image.png 当然 有多个相邻的 就可以选择多个相邻元素嗷~

image.png 一个li和4个li相邻 li+li就会选择后面的那四个li！

  • 【5】子选择器 ul > li

  • 【6】后代选择器 li a

以前我一直很好奇 不是有了后代选择器嘛 那还要子选择器干啥

然后MDN文档就无情地嘲讽了我“早料到你这粗心鬼会忘掉子选择器的特殊性”——

使用 > 选择器分隔两个元素时 它只会匹配那些作为第一个元素的直接后代的第二元素

而由后代选择器相连的时候 它表示匹配存在的所有由第一个元素作为祖先元素（不只是子元素）的第二元素 无论它在DOM中“跳跃”多少次

image.png

  • 【7】通配符选择器 *

  • 【8】属性选择器 a[href="www.juejin.cn"] —— 存在href属性并且属性值匹配"www.juejin.cn"的<a> 元素

这个之前也没见过欸！详情戳这里

上面举的例子选择的元素是”所有href属性为 www.juejin.cn 的a标签“

  • 【9】伪类选择器

    • a:hover 鼠标悬浮样式

    • li:nth-child(n) 选择属于li父元素的第n个子元素中的每个li

    • :not() 用来匹配不符合一组选择器的元素

      /* 选择所有不是段落（p）的元素 */
:not(p) {
  color: blue;
}

  • 【10】伪元素选择器

    • ::after(CSS3两个冒号 CSS2一个冒号）用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容

要注意伪类选择器（左面那部分）和伪元素选择器（右面那部分）的区别哦！

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进行对元素的改变。伪元素和伪类都不会出现在源文档或者文档树中。 image.png

【2】哪些属性可以继承？

上面说到了 有些CSS属性是可以被子元素继承的 有些不能 那么 到底哪些能 哪些不能捏~

  • 可继承的样式

    • font-size

    • font-family

    • color

  • 不可继承的样式

    • border

    • padding

    • margin

    • width

    • height

    那肯定的啊~这些样式如果都可以继承的话 页面岂不是大乱了

    所以大家也不用刻意地去背

    就想一下开发的时候哪些属性是绝不可能由父元素往下传递的就好~

    【3】CSS优先级

很有趣的一张图👇

image.png

简单总结下——

!important > 内联样式 > id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器 > 浏览器默认样式

用数字形象地描述下（上图也是这么描述地）就是——

!important = 10000

内联样式 = 1000

id选择器 = 0100

类选择器 伪类选择器 属性选择器 = 0010

标签选择器 伪元素选择器 = 0001

通配符选择器 = 0000

这里要注意 100个id选择器的权重也是比不上内联样式的哦！这里的 1000 100只是举个例子 实际上 这个效果是一锤定音的 看上面的例子就知道了 100只小鱼也还得乖乖被鲨鱼吃掉啊~

avatar
文章
阅读
粉丝