精华内容
下载资源
问答
  • 而class属性本身没有语义,它纯粹是用来为CSS服务属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...

            对HTML页面中的元素使用CSS实现一对一,一对多或者多对一的控制,要用到CSS选择器。在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以CSS3中提倡使用选择器来将样式与元素直接绑定起来,这样的话,在样式中什么样式与什么元素相匹配就会变得一目了然,修改起来也很方便。不仅如此,通过css3选择器我们还可以实现各种复杂的指定, 同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。


    基本选择器

    说明

    *

    通用元素选择器,匹配任何元素

    E

    标签选择器,匹配所有使用E标签(所有HTML元素)的元素

    .info

    class选择器,匹配所有class属性中包含info的元素

    #footer

    id选择器,匹配所有id属性等于footer的元素

    selector1,selector2


    群组选择器,将每一个选择器匹配的元素集合并



    层次选择器

    层次选择器
    类型 功能描述

    E    F
    后代选择器 选择匹配的F元素,且F元素被包含在匹配的E元素内

    E > F
    子选择器 选择匹配的F元素,且F元素是E元素的子元素

    E + F
    相邻兄弟选择器 选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素

    E ~ F
    通用选择器 选择匹配的F元素,且F元素是E元素后面的所有兄弟元素

    属性选择器


    属性选择器

    功能描述

    E[attr]
    选中具有attr属性的E元素

    E[attr=val]
    选中具有attr属性,并且属性值为val的E元素

    E[attr|=val]
    选中具有attr属性,并且属性值为val或以val-开头

    E[attr~=val]
    选中具有attr属性,并且属性值包含val的E元素,该属性值必须以空格隔开

    E[attr*=val]通配符
    选中具有attr属性,并且属性值包含val的E元素

    E[attr^=val]起始符
    选中具有attr属性,并且属性值以val开始的E元素

    E[attr$=val]结束符
    选中具有attr属性,并且属性值以val结束的E元素


    具体实例分析:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    
    *{margin: 0;padding: 0;}
    p{height:30px;border:1px solid #000;margin-bottom: 2px;}
    
    </style>
    </head>
    <body>
        <p cat="leold">leo</p>
        <p cat="dp">杜鹏</p>
        <p cat="zM">子鼠</p>
        <p cat="xm">小美</p>    
        <p cat="leo old">leo</p>
        <p cat="old dp">杜鹏</p>
        <p cat="zM">子鼠</p>
        <p cat="xm">小美</p>
    </body>
    </html>
    上面的代码结构运行后 的 效果显示如下:



    选中具有 cat  属性的 P元素,并将其背景色设置为红色, 就需要用到 CSS3的属性选择器, 代码如下:


    选中选中具有 cat 属性,并且属性值包含 old 的P元素,属性值包含有 old这个单独的单词   并且old必须是连写的不能拆开   代码及效果图如下:



    选中具有 cat 属性,并且属性值包含 old 的P元素, 代码及效果图如下:






           

     

        

    
    展开全文
  • 而class属性本身没有语义,它纯粹是用来为CSS服务属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...

    对HTML页面中的元素使用CSS实现一对一,一对多或者多对一的控制,要用到CSS选择器。在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以CSS3中提倡使用选择器来将样式与元素直接绑定起来,这样的话,在样式中什么样式与什么元素相匹配就会变得一目了然,修改起来也很方便。不仅如此,通过css3选择器我们还可以实现各种复杂的指定, 同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。

     

    层次选择器
    类型 功能描述

    E    F
    后代选择器 选择匹配的F元素,且F元素被包含在匹配的E元素内

    E > F
    子级选择器 选择匹配的F元素,且F元素是E元素的子元素

    E + F
    兄弟选择器 选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素

    E ~ F
    通用选择器 选择匹配的F元素,且F元素是E元素后面的所有兄弟元素

    后代选择器
    格式:祖先元素+空格+后代元素

    子级选择器
    格式:父级元素+大于号+子级元素

    可以说后代选择器包含了子级选择器

    兄弟选择器
    格式:兄弟元素A+"+"+兄弟元素B
    注:选择A元素后的B元素,并且AB必须是紧邻的,即AB之间不许有其他元素

    通用选择器
    格式:兄弟元素A+"~"+兄弟元素B
    选择匹配的B元素,即A元素后面的所有B元素

    转载于:https://www.cnblogs.com/qingyijie/p/8052837.html

    展开全文
  • 又继续读angular文档,发现自己...demo英雄编辑给我误导了,好像service是从component里拆出去,属于component一样。 问题提出:svg拆分粒度选择 主要问题就是拆分粒度问题: 1 1个svg图对应1个ngcom...

    又继续读angular文档,发现自己之前理解还是有误。按官方文档的思路service不是属于component的,是属于module的。module才是负责完整领域逻辑的单位。demo的英雄编辑器给我误导了,好像service是从component里拆出去,属于component一样。

    问题提出:svg拆分粒度选择

     

    主要问题就是拆分的粒度问题:

    1 1个svg图对应1个ng的component

    2 1个svg图对应多个compoent, 如<g>里定义若干元素如node,link各自作为组件node-component,link-component

    这个和ng和d3本身无关。要看怎么做最符合领域本身的复杂度。然后才是复用的问题。

    总的来说:

    越是复杂领域复杂问题,越要用大刀阔斧,切记用小刀,过度切分,过度设计

     

    Visualizing Data with Angular and D3的作者的选择是2。他的demo是有点复杂的力导向图,把node link都单独提出去建模了。

    是不是也要这样拆分呢?

    辨析过程 

    前端的战场是页面。核心域是"基于dom元素的交互<->更新数据模型"。

    D3的计算与展现也是分开的。

    如果用ng负责核心域,那么d3就会退居外围service。

     

    ng大概用module负责不同页面的大区(或者顶部/底部这种):每个module内部:

    多个component,每1个component负责屏幕上1个特定区域。官方文档摘抄:

    每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

    组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括模型的某些概念)之间。 设计良好的组件为数据绑定提供属性和方法,把其它琐事都委托给服务。

    服务没有什么特别属于 Angular 的特性。 Angular 对于服务也没有什么定义。 

     

    从Domain Driven Design角度:

    ng的module是aggregate root,service对应repository factory service,那么component对应的是entry,ts原生class用于value object

    从军事领域编制角度看:

    module类似本级司令部(战役军团或者高级战术兵团),而component类似下1级的作战编组,承担命令,负责某个地段区域;service是分队,具体实现,更细的class,function类似兵力与兵器。

    团以上才称部队,有司政后装,能相对独立地完成任务。

    对应ng里module,component都是部队:

    module 下辖多个component/service/全套待遇,component也有自己的css/template 负责屏幕上一个地段。

    部队负责组织调度分队,分配资源;分队负责执行实现细节。属性方法类似兵力兵器(用值对象表示)

    对应 这句话:

    组件为数据绑定提供属性和方法,把其它琐事都委托给服务。

     

    我目前理解的系统切分的大的粒度:

    每1个作战序列直辖7±2个带HQ的编组比较合适。本级HQ直辖超过10个的没有HQ的分队是明显不合适的,直辖超过10个有HQ的部队,就更离奇了。

    这时候,应该像《重构》里说的那样,增加抽象级别。把数量多的部/分队作为自己的下2级,而在下1级建立几个新HQ,把下2级的部/分队分配给新增加的下1级HQ里。

    保证自己直接指挥的还是数量有限的下1级HQ,把宝贵的/有限数量的HQ用在这里,不建立过多的HQ,浪费指挥与参谋人员。

    这也就是《孙子兵法》里的“分“和”数”了。

     

    我的应用中要有多个svg叠加,更适合用每个component负责一个svg,类似每个作战编组负责一个作战地域,

    结论

    军队编制 部队(拥有司政后装/承担较完整独立的任务) 分队(函数式的任务)
    领域驱动设计 聚合根(拥有相应的service repository 完成较完整的领域逻辑) 实体类,值对象
    angular module, component service,class
    svg <svg>根节点 <g>下辖的div元素

    心得体会:

    1表面上是设计问题,技术问题;背后的本质是领域概念切分粒度的分析问题,领域概念理解问题。

     

    2 核心域分析模型的复用:在一个领域和层面想不清楚(D3和angular还没学明白)的时候,从别的自己理解比较清楚的领域,借鉴分析模型(军事指挥中的部队-分队)有奇效。同样之前在军事领域想不清的问题(情报与作训),参考了设计领域的方案(读写分离,CQRS。Command Query Responsibility Segregation)一下就容易理解了。

    在复杂度高的领域,长期实践形成的分析模式(行内“条块分割”的通行做法,分工方式/关注点分离的思路),一定是可以借鉴参考的。

    前端复杂吧?但是军事更复杂啊。

    架构无非就是如何“条块分割”,让系统用起来更顺手,更禁得住各种风险冲击的问题

    那么借鉴一下以“条块分割”著称的军队,准没错。(不要借鉴德日这种军阀与地主的l败者组军队,要借鉴鼎盛时期中美苏家的军队架构)

     

    3 不光要有分析模型,设计用的概念模型也要丰富。

    "一切皆对象”或者“一切皆函数",“一切皆数据”,抽象粒度太单薄了,语言太贫乏了。

    自己脑子也要有军队的部/分队,军团/兵团,基本/高级战术单位,有对应的几级层次才好。

     

    所以增补class上的 namespace,文件级的module之类。不同的语言与框架还提供了 component  blueprint,DDD也增补了聚合根以及配套的(service,repository factory,类似部队的司政后装),确实是有必要的。

     

    比如站在本级的角度,要想着对接上下各2级HQ的方式。对上,要掌握上2级的意图和任务;对下:

    命令与事件下1级的HQ部队负责,而兵器兵力数字状态在下2级分队

    那么在ng里,本级如果是module:

    module->component是命令式指挥,表示目的

    component->service是函数式的封装调用,完成实现细节

    ——在此放一炮:DDD的设计思路如果核心域封装目的,在内;而技术实现在支持域,在外;

    那么显然风格应该是  命令式内核,函数式外壳。而不是某些书上说的“函数式内核,命令式外壳”。

    内核是领域逻辑的目的,而不是具体实现

     

    军队的级别晋升,不是从基层到高层,而是从实现->意图,从技术->艺术,从控制->指挥,从外围->核心的过程。 

    基层重视实现过程,用动词抽象,对应函数式

    高层重视意图和目的,用名词抽象,对应面向对象与命令式

    ——函数式用得多的地方,主要也是基础设施,编译器之类。从高层调用的时候,根本不去考虑复杂实现过程。

     

    service作为分队,class作为兵力兵器,不独立承担领域任务,本级没有司令部,所以不判断情况,只负责执行上级明确赋予的战术任务(函数式),本级只负责掌握部队(有错报异常)。分队级的世界观非常符合函数式了:

    函数式编程在使用的时候的特点就是,你已经再也不知道数据是从哪里来了,每一个函数都是为了用小函数组织成更大的函数,函数的参数也是函数,函数返回的也是函数,最后得到一个超级牛逼的函数,就等着别人用他来写一个main函数把数据灌进去了。

    来自 <https://www.zhihu.com/question/28292740>

    恶搞一下:战法(行动)式的分队指挥:

    战法式作战在使用的时候的特点就是,你已经再也不知道兵力兵器是从哪里来了,每一个战法都是为了用小战法组织成更大的战法,战法的参数也是战法,战法返回的也是战法,最后得到一个超级牛逼的战法,就等着别人用他来写一个想定把兵力兵器灌进去了。

    ——其实,用动词建模,不就是活动图么。BPRM

     

    module和component作为部队,拥有自己的司政后装(但不必须):repository,factory,service。承接较独立完整复杂的任务,命令式为主,状态机也会用到。

    app->module这个级别,CQRS,领域事件啊该上就上。

    ——微服务,扁平化,不意味着没有部队,只有分队。高级HQ直接领导数量庞大但琐碎平级的战术分队,那是蒋介石领导的国军(越过自己的战区HQ,总司令指挥到每个战术分队,甚至连)。

    所以系统里也不能是app下直接大量的component 大量的class到底。

    系统不是多个平级对象互相协作完成任务,而是多个对象在上1级统一指挥下协作,多级HQ形成层次,不要统称class。最终写出来的系统容易变成蒋介石的军队。

    不能把负责统一指挥的那个上1级HQ推到设计开发之外,好像“服务编排”之类。那可能才是核心域,写那些脚本才是核心域编码工作。是要精心设计的层次和约束数量的。

    必须有要有清晰合理的层级划分。学到的各种设计技巧,因为OO领域抽象语言还是比较贫乏,只能自己强制划分,每级只有某些特性(class分队级没有service,repository这样ER OR的司政后装)

    转载于:https://www.cnblogs.com/xuanmanstein/p/7759759.html

    展开全文
  • 所谓层叠,就是可以将整个网页想象成是一层一层结构,层次将会覆盖层次。而CSS可以分别为网页各个层次设置样式。 书写位置: 1、内联样式:可以将css样式表书写到元素(标签)style属性中,只对当前...

    一、概念

      CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰。

    所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。而CSS可以分别为网页的各个层次设置样式。

    书写的位置:

    1、内联样式:可以将css样式表书写到元素(标签)的style属性中,只对当前标签中的内容起作用,不方便复用。属于结构与表现耦合,不推荐使用。

    2、内部样式:可以将css样式编写的head中style标签中,然后通过css选择器选中指定的元素,然后可以同时为这些元素设置同样的样式,提高样式的复用性。

    3、外部样式:可以将css样式表编写到外部的css文件,然后通过link标签引入外部的css文件到当前的HTML文件中,最大限度提高复用性,利用浏览器缓存,加快用户

            的访问速度,提升用户体验。开发中推荐使用外部样式。

     语法:选择器,通过选择器可以选择页面中的指定标签,并且将声明块的样式应用到对应的标签中。

        声明块,紧跟选择器的后边,使用大括号括起来,声明块中就是一组名值对结构,这一组一组名值对称为声明。一个声明块中可写多种声明,中间用分号隔开。声明的

           样式名和样式值使用冒号连接。

    IDE(Integrated Development Environment,集成开发工具):Hbuilder ,Alt+/ 代码提示 Ctrl+enter 换行 Ctrl+d 删除当前行

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>css基础</title>
            
            <!--一2、内部样式:将css样式设置到head标签中,可以同时给这些元素设置同样的样式,提高复用性。-->
            <style type="text/css"> /*这里边写的全是css的代码,不能出现HTML的代码*/
                p{/*表示给body中的所有p标签设置这种样式*/
                    color: greenyellow;
                    font-size:20px ;
                }
            </style>
            
            <!-- 一3、外部样式:引入外部的css文件中,按照代码的执行顺序这里把上边的样式给替代了-->
            <link rel="stylesheet" type="text/css" href="../css/04-01 外部样式.css"/>
            
            
        </head>
        <body>
            <!--一 1、内联样式:标签内部的style属性,只对当前标签起作用
                这里虽然在上边设置了样式,但是这里对他个性化设置,按照代码执行顺序,使用个性设置
            -->
            <p style="color: red; font-size:30px ;"> 锦瑟无端五十弦,一弦一柱思华年。</p>
            
            <p>庄生晓梦迷蝴蝶,望帝春心托杜鹃。 </p>
            <p>沧海月明珠有泪,蓝田日暖玉生烟。</p>
            <p>此情可待成追忆?只是当时已惘然。</p>
    
    
        </body>
    </html>

     二、块元素(块标签)

      就是可以独占一行的标签,不管它内容多少,宽度多窄,它都独占一行。

      1、div元素:这个标签没有任何语义,就是个纯粹的块元素,它不会为它里边的元素设置任何默认的样式,主要用来对网页进行布局的。可以表示一块区域。

      2、p元素:

      3、h1-h6元素

      4、hr 和 br 元素

    三、内联元素(内联标签,行内标签)

      所谓内联元素,指的是只占自身大小的元素,不会独占一行。

      1、span元素:没有任何语义,专门用来选择一段文字,为它设置样式。英文:范围的意思

      2、a元素、img元素、iframe元素:

    区别:块元素用来做页面的布局,内联元素主要用来选中文本为它设置样式。一般只使用块元素去包含内联元素,不会用内联去包含块元素。

        但是a元素可以包含任何元素除了a元素,即a元素不能包含a元素。

        p元素不能包含其他任何的块元素,尽管它是个块元素。 

    四、常用的选择器

      1、元素选择器:通过元素选择器选中页面中所有的指定元素   语法:元素名{  ....}

      2、id选择器:通过元素的id值选择到唯一的一个元素。语法:#id号{.....}

      3、类选择器:通过元素的class值选择一组元素,可以同时为一个元素设置多个class值,中间用空格隔开。语法: .class值{......}

      4、分组选择器(并集选择器):通过分组选择器同时选择多种选择器对应的元素。语法:选择器1,选择器2....{.....} 中间逗号隔开

      5、通配选择器:选择页面中的所有元素。语法:*{.....}

      6、复合选择器(交集选择器):选中同时满足多个选择器的元素。 语法:选择器1选择器2..{....}  中间无空格。id选择器不建议是复合选择器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>常用的选择器</title>
            <style type="text/css">
                /*四 1、元素选择器  */
                p{
                    color: goldenrod;
                }
                h3{
                    color: red;
                }
                /*四2、id选择器*/
                #p3{
                    color: green;
                }
                /*四3、类选择器 class
                 * class属性和ids属性类似,可以同时给多个同一种元素设置样式
                   class值可以相同,id值不能相同。
                   
                 * */
                .p1{
                    color: blue;
                }
                .p2{
                    font-size:30px ;
                }
                /*四4、分组选择器(并集选择器)*/
                .p1,h3{
                    background: darkgrey;
                }
                /*四5、通配选择器*/
                *{
                    font-size: 35px;
                }
                /*四6、复合选择器*/
                span.p4{
                    background:gold ;
                }
            </style>
        </head>
        <body>
            <h3>锦瑟</h3>
            <p class="p1">锦瑟无端五十弦,一弦一柱思华年。</p>        
            <p class="p1 p2">庄生晓梦迷蝴蝶,望帝春心托杜鹃。 </p>
            <p id="p3">沧海月明珠有泪,蓝田日暖玉生烟。</p>
            <p class="p4">此情可待成追忆?只是当时已惘然。</p>
            <span class="p4"> 《锦瑟》是唐代诗人李商隐的代表作之一。诗题“锦瑟”,但并非咏物,
                不过是按古诗的惯例以篇首二字为题,实是借瑟以隐题的一首无题诗。
                </span>
        </body>
    </html>

    五、元素之间的关系

      父元素:直接包含子元素的元素

      子元素:直接被父元素包含的元素

      祖先元素:直接(如:父亲元素)或间接(如:爷爷元素往上)包含后代的元素。

      后代元素:直接(如:子元素)或间接(如:孙子辈元素往下)被祖先元素包含的元素。

        兄弟元素:拥有相同父元素的元素叫(亲)兄弟元素。

      7(上接 四1-6)、后代元素选择器:选中我们指定元素的指定后代元素。语法:祖先元素 后代元素 {.....}。中间是空格

      8、子元素选择器:选中父元素的指定子元素。 语法:父元素 > 子元素{....} 。中间是空格,大于号,空格。IE6及以下的浏览器不兼容这种选择器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>元素之间的关系</title>
            <style type="text/css">
                /*后代元素选择器*/
                div span{ /*包括子元素span和后代元素span。例子中2个div如果没有id号,2个div都会选中*/
                    color: red;
                }
                #d2 span{ /*给祖先元素加id*/
                    color: green;
                }
                div > span{ /*没有指定id的情况*/
                    background-color: yellow;
                } 
                
                #d2 > span { /*指定id的情况*/
                    background-color: blue;
                }
                
            </style>
        </head>
        
        <body>
            <div id="d1">
                <p>  <span > 我是第1个div中p标签中的span标签,是div的孙子,p的儿子 </span> </p>
                <span>    我是第1个div中的span标签,是div的儿子</span>    
            </div>
            <div id="d2">
                <span> 我是第2个div元素中的span元素,是div的儿子 </span>
            </div>
            
            <span>
                我是body中的span元素,与div平辈
            </span>
            
        </body>
    </html>

       9、伪类选择器:

            专门用来表示元素的一种特殊的状态。比如,访问过的超链接、普通的超链接、获取焦点的文本框当。我们需要为这些处于特殊状态的元素设置样式时

    就可以使用伪类。

    定义链接的访问状态: a:link     正常链接(没访问过的链接);

               a:visited   访问过的链接; 浏览器是根据历史记录看网站是否访问过,由于涉及用户隐私,所以此设置只能设置字体的颜色。

               a:hover  鼠标滑过的链接; 它和active不仅能设置超链接也可以设置其他标签,如p标签。(但IE6不支持,其他可以)

               a:active 正在点击的链接:

     其他状态:标签名:focus ,获取焦点,指当鼠标在文本框中时。失去焦点,指鼠标在文本框之外。格式:标签名 冒号 focus{.....} (IE6不支持)

           标签名::selection,选中的元素 。中间2个冒号。但是在火狐中需要这样写, 标签::-moz-selection{.....}否则用不了。如果要兼容,要写2个。

      10、伪元素选择器

        标签名:first-letter{......}  给标签中第一个字符设置样式

        标签名:first-line{......} 给标签中的第一行(是网页显示时的第1行,网页变大变小,第1行的内容也会改变)设置样式

        标签名: before,指定元素之前 <p>你好呀</p> 指的是开始标签右边的尖括号“>” 和 “你”之间的位置。一般before需要结合content这个样式一起使用,通过

    content可以向before或after的位置添加一些内容。

        标签名:after,指定元素后之后。结束标签右边的">"之后的位置。他们都不能选中。

     【代码示例】   

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>伪类选择器</title>
            <!-- 9、伪类选择器:就是表示一种特殊的状态  
            -->
            <style type="text/css">
                a:link{ /*正常链接; */
                    color: yellowgreen;
                }
                a:visited{/*访问过的链接;*/
                    color: red;
                }
                a:hover{/*鼠标滑过的链接;*/
                    color: blue;
                }
                a:active{/*正在点击的链接,鼠标别松手*/
                    color: black;
                }
                input:focus{/*当文本框获取焦点时,改变文本框的颜色为黄色*/
                    background: yellow;
                }
                p::selection{/*为p标签中鼠标选中的文字设置样式*/
                    color: blue;
                }
                
                p:first-letter{/*10、伪元素选择器*/
                    color: blue;
                    font-size:25px ;
                }
                p:before{
                    content: "悯农";
                }
                P:after{
                    content: "沙雕";
                    color: orange;
                }
            </style>
        </head>
        <body>
            <a href="http://www.baidu.com">访问过的链接</a> <br />
            <a href="http://www.iqiyi.com/">没访问过的链接</a> <br />
            用户名:<input type="text" name="" id="" value="" />
            <p>锄禾日当午,汗滴禾下土。</p>
            
            
        </body>
    </html>

      11、子元素的伪类选择器(child是在所有子元素中排,大排行,如所有子女一起排(大姐、二 哥、三姐);type是在当前类型中排,小排行,如男的排男的(大儿子、

    二儿子),女的排女的(大女儿、二女儿))

        first-child:可以选中第一子元素;

        last-child:可以选中最后一个子元素;

        nth-child(m):可以选中任意位置的子元素;n就是第n个的意思,m是自定义选中的行。

        first-of-type :选中指定类型的第一个 

        last-of-type:选中指定类型的最后一个

        nth-of-type:选中指定类型的第n个

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>子元素的伪类选择器</title>
            <style type="text/css">
                p:first-child{/*first-child:选中第一个子元素,为第一个p标签设置样式
                    这句话的意思,既要符合p标签又要是父元素第一个子元素(p是body的子元素)
                    如果把p标签去掉,则就是默认的是*  选中一个子元素即可
                    如果要指定子元素需要:
                    body > p:first-child{
                        .....
                    }表示选中body的第一个p标签子元素
                    
                    * */
                    color: blue;
                }
                div > p:last-child{/*表示给div中最后一个子元素设置样式*/
                    color: yellow;
                }
                body >p:nth-child(3){/*自定义位置,意思是把3换成1根first-child相同
                    括号中可以设置为  even:表示选中偶数行
                                  odd:表示选中奇数行 
                          表格中隔行变色可以用
                    * */
                    background: yellowgreen;
                }
                div >p:nth-child(2){
                    background: green;
                }
            </style>
        </head>
        <body>
            <!--如果这行加个p之外的标签,则上述设置不会生效,因为不是p标签。下一行也不会生效因为不是不是第一个子元素-->
            <p>一别都门三改火,天涯踏尽红尘。</p> <!--这行即使p标签又是body的第一个子元素-->
            <p>依然一笑作春温。无波真古井,有节是秋筠。</p>
            <p>惆怅孤帆连夜发,送行淡月微云。</p>
            <p>尊前不用翠眉颦。人生如逆旅,我亦是行人。</p>
            
            <div> <p> 苏轼,北宋词人</p><!--这行也会生效,因为他2项符合条件都符合  p是div的子元素-->
                  <p>这首词是公元1091年(宋哲宗元祐六年)苏轼知杭州时</p>
                  <p>为送别自越州(今浙江绍兴)北徙途经杭州的老友钱穆父而作</p>
            </div> 
            
            <span> </span>
            
        </body>
    </html>

       12、兄弟元素选择器

      后一个兄弟选择器:可以选中一个元素后边紧挨着的一个兄弟元素。语法:前一个元素(哥哥)+紧挨的后一个元素(弟弟){.......},中间是空格加号空格

      所有兄弟元素选择器:可以选中一个元素后边的所有兄弟。语法:前一个元素 ~ 后边元素{.....},中间是空格波浪号空格

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>兄弟元素选择器</title>
            <style type="text/css">
                /*后一个兄弟元素*/
                span + p{
                    color: blue;
                }
                /*所有兄弟选择器*/
                div ~ p{
                    color: cyan;
                }
            </style>
        </head>
        <body>
            <span>白居易的诗词</span>
            <p> 绿蚁新醅酒,红泥小火炉。</p> <!--span+p 这行会生效-->
            <p> 晚来天欲雪,能饮一杯无?</p> 
            
            <span>苏轼的诗词 </span>
            <p>寒食后,酒醒却咨嗟。</p><!--span+p 这行也会生效-->
            <p>休对故人思故国,且将新火试新茶。诗酒趁年华。</p>
            
            <div id=""> 李清照的诗词改编</div>
            <p> 一朝花开傍柳, 寻香误觅亭侯。</p><!--这2行都会生效-->
            <p> 纵饮朝霞半日晖, 风雨着不透。</p>
        </body>
    </html>

      13、否定伪类选择器

      可以从已经选中的元素中剔除某些元素。语法: 标签:not(选择器){........},中间只有冒号,没有空格

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>否定伪类选择器</title>
            <style type="text/css">
                /*否定伪类选择器*/
                p:not(.p5){
                    color: blue;
                }
            </style>
        </head>
        <body>
            <p>一朝花开傍柳, 寻香误觅亭侯。</p>
            <p>纵饮朝霞半日晖, 风雨着不透。</p>
            <p class="p5">一任宫长骁瘦, 台高冰泪难流。</p>
            <p>锦书送罢蓦回首, 无余岁可偷。</p>
            
        </body>
    </html>

      六、样式的继承(儿子可以继承父亲的遗产,在css中祖先元素的样式也可以被后代元素继承)

      利用继承可以把一些基本样式设置给祖先元素或父元素,这样所有的后代元素会自动继承这些样式,但是并不是所有样式都会被子元素继承。比如所有背景相关的样式,

    如背景颜色。实际中p标签的默认背景颜色是透明的,如果在父标签中设置个颜色,比如黄色,则颜色可以透过来,网页也会显现出黄色,但是原理是颜色透过来,而不是被继承

    过来的。所有背景相关的样式都不能被继承,切记! 边框相关的样式、定位相关的样式都不会被继承。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>样式的继承</title>
            <style type="text/css">
                
            </style>
        </head>
        <body>
            <p style="font-size: 25px;"> <!--所有p元素中的都会生效,包括span.这就是继承-->
                我是p标签 <br />
                <span>我是p标签的儿子span标签</span>
            </p>
            <span>我是与p标签平辈的span</span>
        </body>
    </html>

      七、选择器的优先级

      当使用不同的选择器选中同一个元素时,并且相同的样式时(如都设置背景颜色),这时样式之间产生冲突,由选择器的优先级决定,高的优先显示。

      优先级规则:内联样式 优先级:1000;

            id选择器 优先级:100;

            类和伪类选择器 优先级:10;

            元素选择器 优先级:1 

            通配选择器 优先级:0

            继承的样式 优先级: 没有优先级

    【注意】1、样式越具体,优先级越高。

             2、 当选择器中有多个优先级时,需要将多个优先级的权重加起来比较 ,然后设置样式。选择器的累加计算不会超过它的最大数量级。

        3、选择器的优先级的权重一样时,则使用靠后的样式。

        4、并集选择器的是单独计算的。

        5、可以在样式的最后加个!important 表示优先级最高,比内联样式都高。在开发中尽量避免使用important。

    【引申】a的伪类选择器,优先级的是一样的。所以写的顺序就是下边的顺序,比较好。L-V-H-A

    a:link;未访问过的链接状态。link和visited没有顺序要求。

    a:visited;访问过的链接状态。但是把link和visited写在hover和active的下边,hover和active等于无效代码

    a:hover;鼠标滑过的链接状态。不能写在active下边,否则设置无效。他们优先级一样,执行下边的,写在下边,hover等于无效代码。

    a:active;鼠标点击的链接状态。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>选择器的优先级</title>
            <style type="text/css">
                .p3{/*类选择器  10*/
                    color: red;
                }
                p{/*元素选择器  1 */
                    color: blue;
                }
                #d3{/*id选择器 100*/
                    color:greenyellow; /*color:greenyellow !important 优先级比内联样式都高*/
                }
                /*a伪类选择器*/
                a:link{
                    color: yellowgreen;
                }
                a:visited{
                    color: blue;
                }
                a:hover{
                    color: orange;
                }
                a:active{
                    color: green;
                }
            </style>
        </head>
        <body>
            <p>一朝花开傍柳, 寻香误觅亭侯。</p>
            <p>纵饮朝霞半日晖, 风雨着不透。</p>
            <!--style="color: grey; 是内联样式 优先级1000-->
            <p class="p3" id="d3" style="color: grey;">一任宫长骁瘦, 台高冰泪难流。</p>
            <p >锦书送罢蓦回首, 无余岁可偷。</p>
            <p>昨夜雨疏风骤 浓睡不消残酒</p>
            <p>试问卷帘人 却道海棠依旧</p>
            <p>知否 知否 应是绿肥红瘦</p>
            
            <a href="http://www.baidu.com">访问过的链接:百度</a> <br />
            <a href="http://www.iqiyi.com/">没访问过的链接:爱奇艺</a> <br />
            
        </body>
    </html>

     

      

     

      

     

    转载于:https://www.cnblogs.com/ID-qingxin/p/10975571.html

    展开全文
  • 以下关于网络层次与主要设备对应关系的叙述中,配对正确的是____。 A 网络层–集线 B 数据链路层–网桥 C 传输层–路由器 D 会话层–防火墙 2. 理论 设备所处的网络层次,是高频考点,其实这在计算机网络里面属于...
  • 在本文中,对微型RF / DC转换器的性能进行了评估,以便将WSN的性能从回收的能量中获取。 更准确地说,设计了一个高灵敏,高效的整流器,以在GSM频段中实现最佳性能。 设计方法依赖于对整流二极管的明智选择,这是...
  • 双鱼林基于安卓Android代码生成是一款生成安卓手机程序代码生成 基于分层模式设计思想,生成代码直接导入Eclipse软件就可以用!   真正面向对象设计:系统整体设计,提供通过使用面向对象方法,...
  • 什么是VLAN

    2013-10-23 09:59:12
    比如两个交换机,如果你想要每个交换机上端口都分别属于不同网段,那么你有几个网段,就提供几个路由器接口,这个时候,虽然在路由器物理接口上可以定义这个接口可以连接哪个网段,但是在交换机的层次上,...
  • CSS伪类伪元素详解

    2016-08-24 12:15:12
    CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解,毕竟它们选择对象都属于DOM中看得见摸得着元素。但伪类和伪元素相对比较抽象,稍微有一...
  • CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解,毕竟它们选择对象都属于DOM中看得见摸得着元素。但伪类和伪元素相对比较抽象,稍微有一...
  • 上一篇属于对jQuery进行一个简单概述,这篇我们重点学习一下jQuery选择器最强大、使用最频繁两个功能: (1)利用选择器选择DOM元素 (2)创建新DOM元素 一、选择将被操作元素 jQuery元素选择方法是集...
  • 外,还增强了对更多的32 位微处理器的支持,可以使嵌入式软件设计在软处理 器, FPGA 内部嵌入的硬处理器, 分立处理器之间无缝的迁移。使用了 Wishbone 开放总线连接器允许在FPGA 上实现的逻辑模块可以透明的连接到...
  • 问题5-9:ATM使用的是面向连接的分组交换技术(采用定长分组——信元)。那么,ATM是否提供了可靠交付的服务呢? 问题5-10:ATM在刚刚问世时,曾被各界寄予了很大的希望。不少人认为ATM将是未来宽带网的重要基石。但...
  •  (4)由于存储数据不再依赖于某个具体多功能服务器,使得其具有较高数据可用性,消除了传统属于服务器存储方式中I/O瓶颈。通过提供对存储集中管理大大减少了管理开销,用户并不需要把UNIX,或者是NT系统...
  • 编译采用的是Makefile。详细信息可参见INSTALL:https://github.com/facebookresearch/faiss/blob/master/INSTALLFaiss的工作原理Faiss 是围绕存储一个向量集的索引类型(index type)构建的,并且索引类型提供了一...
  • 前言:在数据分析和产品、运营优化方面,数据分析方法是其核心,属于“法”和“术”的层次。那么如何做好数据分析呢,今天我们来讲讲互联网运营中十大数据分析方法。 道家强调四个字,叫“道、法、术、”。 层次...
  • 华中科技大学计算机组成原理慕课答案

    万次阅读 多人点赞 2020-01-26 00:09:18
    计算机系统层次结构中,微程序属于硬件级 2、完整计算机系统通常包括( A ) A.硬件系统与软件系统 B.运算、控制、存储器 C.主机、外部设备 D.主机和应用软件 3、CPU地址线数量与下列哪项指标密切相关...
  • 很强ccna教程

    2013-12-02 15:02:54
    管理距离是路由选择进程用来从多种路由选择协议提供路径中选择一条路径机制,每种IP路由选择协议都有一个管理距离,这建立了一种等级制度,使得当多种路由选择协议都提供了到某个网络路径时,能够从中选择一...
  • 计算机使用语言是 A) 专属软件范畴与计算机体系结构无关 B) 分属于计算机系统各个层次 C) 属于用以建立一个用户应用环境 D) 属于符号化机器指令 2.动态数据流机最突出特点是使 A) 数据流令牌无标号 B) 需要...
  • 但是,我们所需要的是路由器能够对不同种类的分组提供不同的延迟和抖动特性参数。 <br/> 机场的登机检票过程是一个很好的例子。若干检票员一起尽可能快地向乘客提供服务。但机场中有许多等级不同的旅客,他们...
  • 6.4.7 消息选择器 257 6.4.8 消息临时目的261 6.5 使用队列浏览器查看全部消息 264 6.6 JMS和事务 265 6.6.1 使用事务性Session 265 6.6.2 利用JTA全局事务 267 6.7 JMS服务器异常监听 268 6.8 JMS集群 269 6.9 ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 113
精华内容 45
关键字:

属于层次选择器的是