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

42次阅读

共计 1877 个字符，预计需要花费 5 分钟才能阅读完成。

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：箭头能够变成须要的形态