• CSS选择器


    一、CSS基本选择器

    1、标签选择器

    a <a href=”#”>word<a>
    p <p>p段落</p>
    h1 <h1>标题文本</h1>

    2、ID选择器

    #p1 <p id=”p1”></p>
    #p2 <p id=”p2”></p>

    3、类选择器

    .myclass <p class=”myclass”></p>
    .myclass2 <p class=”myclass”></p>

    二、CSS复合选择器

    1、交集选择器

    “交集”选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器直接不能有空格,必须连续书写。
    这种方式构成的选择器,将选中同时满足前后二者定义的元素,也就是前者所定义的标记类型,并且指定了后者的类别或者ID的元素,因此被称为“交集”选择器。

    h3.class#id
    p.#id.class
    a.class#id

    2、并集选择器

    与交集选择器相对应,并集选择器是多个选择器通过逗号连接而成的。

    p,.class,#id
    p,a,h1
    .class,p,#id,h1,
    #id,.class,p

    3、后代选择器

    后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,直接用空格分割
    当标记发生嵌套时,内层的标记就称为外层标记的后代
    需要注意:后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到它的“各级后代”。

    p div span
    p a div
    #id span
    .class #id span
    div p span

    4、子选择器

    只对直接后代有影响的选择器,区别是使用大于号连接

    p>span
    p>div>span
    p>a>div
    #id>span
    .class>#id>span
    div>p

    三、CSS的继承和层叠

    1、继承的特性

    CSS继承指的是子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记
    CSS的继承贯穿整个CSS设计的始终,每个标记都遵循着CSS继承的概念
    使用后代选择器的时候,不用每级标签都写,可以有简写的形式。
    Ul li ul li ul li {color:Green; font-weight:bold;}
    li li li {color:Green; font-weight:bold;}
    以上两种写法是结果相同

    2、层叠特性

    CSS的层叠特性很重要,但是注意,千万不要和前面介绍的“继承”相混淆,二者有本质的区别。实际上,层叠可以简单理解为“冲突”的解决方案

    总结:优先级的规则可以表述为
    行内样式>ID样式>类别样式>标记样式
    越特殊的样式,优先级越高。

    3、样式分类

    行内样式(内联样式)
    Style=“”


    内嵌样式
    <style type=“text/css”></style>


    外部样式
    <link type=“text/css” href=“URL” rel=“stylesheet” />


    导入样式
    @import url(filename);


    优先级
    行内>外部(链接)>内嵌>导入
    就近原则

  • 相关阅读:
    mac下完全卸载程序的方法
    Mac下检测NSTableView的滑动事件的方法
    一行代码起动全屏
    Unsupported compiler '4.0' selected for architecture 'i386'类错误解决办法
    编译错误“The run destination My Mac 64bit is not valid for Running the scheme '***',解决办法
    ios项目中导入百度地图SDK出错的问题
    Unable to resolve target 'android9'解决办法
    ios保存录制好的视频到相簿的方法
    NSTableView系列之代码创建(不用nib)
    谈内链优化不是每个站点都能做的
  • 原文地址:https://www.cnblogs.com/liuguangyin/p/4072393.html
Copyright © 2020-2023  润新知