• 技术文章 >web前端 >css教程

    详解CSS各种选择器和import导入样式表还有一些伪类选择器

    高洛峰高洛峰2017-03-06 14:32:18原创1165
    (一)CSS选择器:

          1.标签选择器:通过HTML的标签名直接选择该标签

          2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中

          3.ID选择器:通过#选择器的名称{} 来对添加了ID属性的标签进行选择,ID是在HTML文档中唯一的

          4.通用选择器:通过*{}来选择HTML文档中所有的标签

          5.后代选择器: 选择器1(空格)选择器2 来选择一个标签中对应的所有子标签

          6.子代选择器: 选择器1>选择器2 来选择一个标签中直接一代的子标签,对更深一层的不起作用

          7.交集选择器:选择器1(中间没有空格)选择器2 例如#li.li{} 选择一个ID=li并且class=li的标签

          8.并集选择器:选择器1,选择器2 例如:#li.li{} 选择ID=li或者class=li的标签

    (二)选择器的优先级:

          1.当作用于同一层的标签,比如都直接作用于标签li:ID选择器>类选择器>标签选择器>通用选择器

          2.最内侧的选择器比外层的优先:div ul li>#ul li标签在ul最内侧,所有能覆盖外层ID选择器的样式

          3.当作用于同一层,而且最后一层选择器一样,那么哪个精准哪个的优先级就高:div ul li>div li

          4.当优先级完全相同的时候,现在后面的样式会覆盖前面的样式

          补充:5.优先级的算法:style = 1000(行内样式表) id = 100(id选择器) class = 10(类选择器) element = 1(标签选择器) 用法:前提是作用在同一层:比如 #ul li{} 和ul #li{} 2者的优先级哪个高呢,#ul li{}优先级用数值表示为101(100+1),后者的优先级数值为101(1+100),所以优先级一样高,前提是2个选择器必须作用于同一层

    (三)三种方式链接样式表以import导入样式表

        1.行内样式表:写在HTML标签里面,通过style属性,优先级最高,但是把HTML代码和CSS代码糅合在一块,不符合CSS的标准“内容和样式相分离”,而且不利用后期的维护

        2.内部样式表:写在head的子标签style中,在一定程度上实现了内容与样式分离,但是无法实现样式复用 引用方式:<link rel="stylesheet" href=""/>

        3.外部样式表:实现了内容与样式的分离,方便后期的维护与复用,符合W3C的标准,优先级最低 引用:在head标签中通过<link rel="stylesheet" href="CSS资源地址"/>

        4.import导入样式表:在内部样式表style中,通过@import url(CSS资源地址)来导入CSS样式表

        注意:内部样式表和import导入的区别:

           1)link标签是html的标签,而import不是

           2)link可以链接各种资源,而import只能导入CSS样式表

           3)link标签相当于在hmtl代码和css样式中起到桥梁作用,链接css代码,而import是导入css样式表,会在文档加载时,导入CSS文件到HMTL中

           4)link方式是在文档边加载时,边链接CSS样式,而import是在html文档中完之后,在导入css样式

            终上所述:选择link标签链接好

    (四)伪类选择器:

          选择器名称:伪类{},伪类标签标签的一个状态,比如:a:link{}:标签a标签为方位是的样式;a:hover{}:当鼠标放在a标签时显示的样式;a:active{}:当鼠标在a标签按下时显示的样式;a:visited{}:当a标签访问后时显示的样式;也可以:a:first-chird{}表示a标签有父容器,而且是父容器下第一个子标签a被选中

    更多详解CSS各种选择器和import导入样式表还有一些伪类选择器相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS选择器 import
    上一篇:详解Bootstrap的纯CSS3箭头按钮样式 下一篇:div在另一个div里垂直居中的示例介绍
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 纯CSS3怎么实现波浪效果?(代码示例)• 深入探究CSS鼠标指针交互效果• CSS变量是怎么工作的?如何使用内联CSS变量进行布局?• css3怎样实现不是直角的菱形效果• 12个值得收藏的 CSS 技巧!!
    1/1

    PHP中文网