一、选择器

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