«

选择器 定位 伪元素 继承 优先级

yang 发布于 阅读:383 HTML阶段


1.选择器相关:

    基本选择器:

        *{通用选择器}

        p{标签选择器}

        .类名{类选择器}

        #id名{id选择器}

        E1,E2{分组选择器}

    层次选择器:

        E1 E2{后代选择器}

        E1>E2{子选择器}

    伪类选择器:

        E:first-child{第一个子元素并且叫什么名字的}

        E:nth-child(n|2n|2n+1|6n)

        E:last-child{最后一个子元素并且叫什么名字}

2.伪元素:

    ::before  --  在元素之前添加

    ::after  --   在元素之后添加

    注意: 伪元素是行内元素,和标签之间是父子关系

    ::placeholder 

    ::first-letter

    ::first-line

    ::selection

3.继承:

理解:子元素拥有父元素的样式

哪些:文本相关 列表ul

4.优先级:

原则:就近原则 权值累加

权值: !important > 行内 > id > class > 标签

        无穷大     1000   100   10       1

5.定位:

相对定位: relative

    理解:相对于自己本来的位置进行偏移

    特征:不会脱离文档流,原位置会保留

绝对定位: absolute

    特征:会脱离文档流,原地升仙,会随着滚动条的滚动而滚动

    情况一:当父级元素没有定位的情况下,参照浏览器边缘进行定位

    情况二:当最近的父级元素有定位,那么就参照最近的父级元素来定位

固定定位: fixed

    特征:会脱离文档流,原地升仙,不会随着滚动条的滚动而滚动,参照浏览器边缘进行定位

    场景:小广告

定位技巧: 子绝父"相"(子元素一定要是绝对定位,父元素可以是3种定位方式中的任何一种)

层级:

    语法: z-index:n;

    注意: 层级高的会覆盖层级低的;

          不加单位

          必须结合定位使用

选择器 定位 伪元素 继承 优先级

版权所有:微4e
文章标题:选择器 定位 伪元素 继承 优先级
除非注明,文章均为 微4e 原创,请勿用于任何商业用途,禁止转载

推荐阅读:


扫描二维码,在手机上阅读
请先 登录 再评论