search

chenliqio / fe-interview

前端面试题型汇总
0 stars 0 forks source link

【CSS】Day2--CSS选择器有哪些？哪些属性可以继承？⭐️⭐️ #6

Open chenliqio opened 2 years ago

chenliqio commented 2 years ago

一、基本选择器

  1. 通用选择器：选择所有元素。

    • 语法：* 将匹配文档的所有元素

  2. 元素选择器：根据节点名称，选择所有匹配元素。

    • 语法：element

  3. 类选择器：根据给定的class属性的值，选择所匹配的元素。

    • 语法：.classname

  4. ID选择器：根据给定的id属性的值，选择所匹配的元素。

    • 语法：#idname

  5. 属性选择器：根据给定的属性，选择所有匹配的属性。

二、分组选择器

  1. 选择器列表：将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
    • 语法：A,B 同时匹配A元素和B元素。

三、组合器

  1. 后代组合器：组合器选择前一个元素的【后代】节点。

    • 语法：A B 选择A元素内的B元素

  2. 直接子代组合器：组合器选择前一个元素的【直接子代】的节点。

    • 语法：A>B 选择嵌套在A元素内的所有B元素

  3. 一般兄弟组合器：后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

    • 语法：A~B A~B匹配同一父元素下，A元素后的所有B元素

  4. 紧邻兄弟组合器：后一个元素紧跟在前一个之后，并且共享同一个父节点。

    • 语法：A+B 会匹配所有紧邻在A元素后的B元素

  5. 列组合器：选择属于某个表格行的节点。

    • 语法：A||B 会匹配A作用域内的B元素

      四、伪选择器

  6. 伪类：伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

    • 语法：a:visited 匹配所有曾被访问过的 元素。

  7. 伪元素：伪选择器用于表示【无法用 HTML 语义表达】的实体。

    • 语法：p::first-line 匹配所有

      元素的第一行。

五、可以继承的属性？

  1. 字体系列 font-size font-weight font-family font-style ...

  2. 文本系列 text-align text-indent text-shadow line-height color ...

  3. 其他 visibility cursor