乐趣区

关于css:前端CSS高频面试题1CSS选择器优先级以及继承属性

jiezi

一、选择器

CSS 选择器是 CSS 规定的第一局部

它是元素和其余局部组合起来通知浏览器哪个 HTML 元素该当是被选为利用规定中的 CSS 属性值的形式

选择器所抉择的元素，叫做“选择器的对象”

咱们从一个 HTML 构造开始

<div id="box">
    <div class="one">
        <p class="one_1">
        </p>
        <p class="one_1">
        </p>
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>

对于 CSS 属性选择器罕用的有:

  • id 选择器（#box），抉择 id 为 box 的元素
  • 类选择器（.one），抉择类名为 one 的所有元素
  • 标签选择器（div），抉择标签为 div 的所有元素
  • 后辈选择器（#box div），抉择 id 为 box 元素外部所有的 div 元素
  • 子选择器（.one>one_1），抉择父元素为.one 的所有.one_1 的元素
  • 相邻同胞选择器（.one+.two），抉择紧接在.one 之后的所有.two 元素
  • 群组选择器（div,p），抉择 div、p 的所有元素

还有一些应用频率绝对没那么多的选择器:

  • 伪类选择器

    • :link：抉择未被拜访的链接
    • :visited：选取已被拜访的链接
    • :active：抉择流动链接
    • :hover：鼠标指针浮动在下面的元素
    • :focus：抉择具备焦点的
    • :first-child：父元素的首个子元素

  • 伪元素选择器

    • ::first-letter：用于向文本的首字母增加非凡款式
    • ::first-line：用于向文本的首行增加非凡款式
    • ::before : 可用于在元素内容之前插入一些内容
    • ::after : 可用于在元素内容之后插入一些内容
    • ::selection 伪元素匹配用户抉择的元素局部。

  • 属性选择器

    • [attribute] 抉择带有 attribute 属性的元素
    • [attribute=value] 抉择所有应用 attribute=value 的元素
    • [attribute~=value] 抉择 attribute 属性蕴含 value 的元素
    • [attribute|=value]：抉择 attribute 属性以 value 结尾的元素

二、优先级

!important > 内联 > ID 选择器 > 类选择器 > 标签选择器

具体可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

三、继承属性

在 css 中，继承是指的是给父元素设置一些属性，后辈元素会主动领有这些属性

对于继承属性，能够分成：

  • 字体系列属性

    • font: 组合字体
    • font-family: 规定元素的字体系列
    • font-weight: 设置字体的粗细
    • font-size: 设置字体的尺寸
    • font-style: 定义字体的格调
    • font-variant: 偏大或偏小的字体

  • 文字系列属性

    • text-indent：文本缩进
    • text-align：文本程度
    • line-height：行高
    • word-spacing：减少或缩小单词间的空白
    • letter-spacing：减少或缩小字符间的空白
    • text-transform：管制文本大小写
    • direction：规定文本的书写方向
    • color：文本色彩

  • 元素可见性

    • visibility

  • 表格布局属性

    • caption-side：定位表格题目地位
    • border-collapse：合并表格边框
    • border-spacing：设置相邻单元格的边框间的间隔
    • empty-cells：单元格的边框的呈现与隐没
    • table-layout：表格的宽度由什么决定

  • 列表属性

    • list-style-type：文字后面的小点点款式
    • list-style-position：小点点地位
    • list-style：以上的属性可通过这属性汇合

  • 援用

    • quotes：设置嵌套援用的引号类型

  • 光标属性

    • cursor：箭头能够变成须要的形态

继承中比拟非凡的几点：

  • a 标签的字体色彩不能被继承
  • h1-h6 标签字体的大下也是不能被继承的

无继承的属性

  • display
  • 文本属性：vertical-align、text-decoration
  • 盒子模型的属性：宽度、高度、内外边距、边框等
  • 背景属性：背景图片、色彩、地位等
  • 定位属性：浮动、革除浮动、定位 position 等
  • 生成内容属性：content、counter-reset、counter-increment
  • 轮廓款式属性：outline-style、outline-width、outline-color、outline
  • 页面款式属性：size、page-break-before、page-break-after
退出移动版