首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML|css选择器模型

问题描述 我们在做前端网页时候需要简单布局形式使网页变得美观好看。一些尺寸,颜色,背景等形式都可以通过CSS选择器模型来解决。往往布局网页形式方法很多,但CSS选择器模型比较清晰方便而且效率高。...解决方案 选择器模型就是将一些形式对象装在一个CSS模型中,我们在使用这些对象时就可以直接通过写模型名称就可以将其带入进网页改变其格式。对特定元素样式进行定义。...要清楚有几种选择器:CSS派生选择器,CSSid选择器,CSS类选择器,属性选择器。下面我主要对id和类两种选择器进行描述。...id选择器:①id选择器可以为标有特定idHTML元素指定特定样 式。 ②Id选择器以“#”来定义 ? 图3.1 首先在css文件中新建一个文档,在里面写上你要形式。...图3.8 还有另外一种简单方法就是直接使用 ? ? 图3.9 结语 掌握这些选择器格式,有很多注意事项。格式不能写错不然运行不出来,命名尽量不要用中文或数字,标签该对齐要对齐。

1.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5选择器

    CSS选择器回顾 ID选择器 类名选择器:多类(.class1.class2)不被ie6支持 标签(元素)选择器 组合(后代)选择器 通配符选择器 直接子元素选择器 >:ie6不支持 相邻兄弟选择器 +...:ie6不支持 属性选择器 伪元素选择器 伪类选择器 CSS新增选择器 通用兄弟(关联)选择器:~,选择后面的所有的子元素 属性选择器(新增): E[attr~="value"]:指定属性名,并且具有属性值..."value"]:指定了属性名,并且属性值是value或者以“value-”开头值(比如说zh-cn); 注意:IE6不支持所有的属性选择器 :nth选择器 :first-child 选择某个元素第一个子元素...; :last-of-type 选择一个上级元素最后一个同类子元素; :only-child 选择元素是它父元素唯一一个了元素; :only-of-type 选择一个元素是它上级元素唯一一个相同类型子元素...:empty 选择元素里面没有任何内容 :not 否定选择器 UI元素状态伪类 我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML

    1.4K30

    HTML&CSS03_CSS选择器定义

    想想当时我们一起学习一起努力日子,是不是有种莫名喜悦。...现在大家工作了,也会遇到一些前端设计问题或相关事情,这时你们能第一时间来到这里,想到曾经我们在一起共同学习过、努力过、拼搏过,我依然觉得很欣慰。...所以当我朋友们真正需要我时候,我还在这里等着你,我在这里为你们准备了前端设计基础知识成套视频(试听版)。无论你是第一次无基础学习,还是有基础来复习复习,也或是想我了来看看我,嘻嘻。...大家多多分享我公众号,把知识分享给更多想了解前端设计朋友们 时刻提醒自己:不抱怨,多实践,终达成功彼岸! 我座右铭:不能领跑也绝不放弃!

    83470

    HTML5中类jQuery选择器querySelector使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery选择器...用法 两个方法使用差不多语法,都是接收一个字符串参数,这个参数需要是合法CSS选择语法。...document.querySelector('selectors');elementList = document.querySelectorAll('selectors'); 其中参数selectors 可以包含多个CSS选择器...querySelector 该方法返回满足条件单个元素。按照深度优先和先序遍历原则使用参数提供CSS选择器在DOM进行查找,返回第一个满足条件元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式div 但需要注意是返回nodeList集合中元素是非实时(no-live

    3.3K70

    HTML&CSS04_选择器优先级

    想想当时我们一起学习一起努力日子,是不是有种莫名喜悦。...现在大家工作了,也会遇到一些前端设计问题或相关事情,这时你们能第一时间来到这里,想到曾经我们在一起共同学习过、努力过、拼搏过,我依然觉得很欣慰。...所以当我朋友们真正需要我时候,我还在这里等着你,我在这里为你们准备了前端设计基础知识成套视频(试听版)。无论你是第一次无基础学习,还是有基础来复习复习,也或是想我了来看看我,嘻嘻。...大家多多分享我公众号,把知识分享给更多想了解前端设计朋友们 时刻提醒自己:不抱怨,多实践,终达成功彼岸! 我座右铭:不能领跑也绝不放弃!

    81670

    代码分层

    看了一下seataexample springcloud-eureka-feign-mybatis-seata,看到一个自己项目中使用代码分层不合理地方,所以总结一下应用分层一些感想。...目前我们项目的代码分层结构是使用Controller>>Service>>Dao>>Mapper>>DB 数据访问方向,当然可能再会分一些package,再加上manager层,manager层参考阿里...,分享一下代码分层一些注意事项: 拆分阶段 第一,校验、转换传入数据;第二,根据传入或转换后数据,完成业务处理;第三,准备要返回数据并返回。...输入和输出 输入参数和输出参数隔离,一般稍大系统都是分层设计,最底层是数据存储层,数据库,最上层是对外提供接口调用应用层,那每一层都有关联数据对象,所以需要做相应区分。...不要为了用而用DDD,不管代码分层是不是按DDD,最重要是领域模型方式编程。 代码分层,适合自己最佳实践才是最好,但是要多学习借鉴。

    45910

    第87天:HTML5中新选择器querySelector使用

    一、HTML5新选择器 1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到元素,如果没有匹配到,则返回null; 支持: Chrome...FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 2、document.querySelectorAll("selector"); selector:根据CSS选择器返回所有匹配到元素数组...FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 3、document.getElementsByClassName("selector"); selector:根据类选择器返回所有匹配到元素数组...4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+ 4、注意: document.querySelector(selector);//返回第一个满足选择器条件元素...html5就是将经常需要操作又包装一层 实例: 1    2      3 实例 4      5 <li class=

    95530

    关于“代码分层思考

    在很多语言中,都会利用“目录”来规范开发者分层逻辑。 比如Javaweb中,会将目录分为Controller,Service,Dao,Model等等。...利用目录形式对开发者进行约束,能够使代码整体结构更加清晰,功能分工更加明确。 我一直“以为”我对分层感受能力还是很强,但是回顾上星期写代码,才让我感觉我对分层理解一直停留在表面。...以我当前参与项目为例,我需要实现model层(我理解为数据访问层)逻辑功能,(代码)分层如下: 顶层Account提供给外部使用,封装了账户所有操作(流水只是账户变动附加记录,理论上也是...…… 上面的问题似乎跟分层无关,但是我觉得这是“概念分层”无法掌控细粒度分层。...我觉得,分层应该不仅仅是宏观层面的概念,不能停留在目录分层层面。 对个人来说,实现时逻辑分层更重要,开发阶段就应该注意逻辑分层抉择,尽量满足开闭原则,才能写出容易理解、结构清晰、易扩展代码。

    37620

    聊聊DDD分层架构

    一、DDD分层 在《领域驱动设计——软件核心复杂性应对之道》一书中Eric Evans将应用架构分为以下层级: 1、用户界面层 负责用户显示信息和解释用户指令; 2、应用层 定义软件要完成任务...从个人角度来看,看了之后大概明白各层职责,但没看到具体例子和代码还是觉得难以落地,所以接下来看几个例子。 二、网上银行例子 这是书中举例子,举一个实际场景:转账,时序图如下: ?...三、真实代码 网上还有个真实DDD示例工程,这个工程是一个货物运输系统,主要功能如下: 1、预约货物发货; 2、跟踪货物主要处理; 3、当客户到达某个位置时,自动向客户寄送发票。...,最后保存领域对象,即应用层完成领域层编排,由应用层决定分发到相应领域对象中,这里当然涉及到基础设施层调用。...另外关于查询逻辑,有的是直接在用户界面层调用基础设施层代码就完成了。 ? 另外基础设施层参数是来自领域层,即基础设施层依赖领域层,即我们说反向依赖,而不是领域层依赖基础设施层: ?

    5.4K40

    html+css学习笔记004-元素选择器0背景属性

    Author:Mr.柳上原 付出不亚于任何努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 零基础 刚开始时候很难 不仅仅是因为第一次接触代码 还有生活压力、年龄压力 我问一个只有高中学历...,当兵退伍回来,年纪比我大很多朋友,你是怎么学成前端 “没有其他方法,坚持下来就好了。”...现在在阿里巴巴上班朋友如是说道。 原来成功如此简单,坚持就好了 <!...选择器 可以有多个值 */ width:0px; } #wrap{ /* id选择器 只能有唯一值 */ width:0px; } .wrap ul li{ /* 后代选择器 */ width:0px...; } #wrap,.wrap,ul,li{ /*多元素选择器 */ width:0px; } div > p{ /* 子元素选择器 */ width:0px; } p + p{ /* 邻居选择器

    56850

    CSS 选择器指南:释放选择器威力

    CSS 选择器在样式化 Web 文档中扮演着关键角色,使开发人员能够精确地定位和样式化 HTML 元素。本指南旨在通过深入探讨各种选择器并通过实际代码示例演示它们用法,释放 CSS 选择器威力。...基本选择器:通用选择器:通用选择器(*)针对页面上所有元素。...虽然由于其广泛应用而需要谨慎使用,但在某些情况下它可能很有用:* { margin: 0; padding: 0;}类型选择器:类型选择器针对特定 HTML 元素。...在这里,所有具有类 "highlight" 元素都会有黄色背景:.highlight { background-color: yellow;}属性选择器:属性存在选择器:针对具有指定属性元素,而不考虑其值...通过掌握各种可用选择器,您可以对样式进行精细控制,使样式表更高效和易维护。

    16160

    选择器gt_css基本选择器

    一、后代选择器 选取指定元素后代元素 与子元素选择器相比,后代选择器选取不一定是直接后代(儿子),而是作用于所有后代元素(儿子、孙子、重孙…)都可以。...二、(>)子元素选择器 选取某个元素直接后代元素 与后代元素选择器相比,后代选择器选取一定是直接后代(儿子) 三、(+)相邻兄弟选择器 选择紧连着另一元素后元素,二者具有相同父元素。...只会选择一个相邻匹配元素 四、(~)后续兄弟选择器 选取所有指定元素之后相邻兄弟元素。...与相邻兄弟元素选择器相比,相邻兄弟元素仅仅是选择紧跟着兄弟元素,后续元素选择器选择所有符合条件兄弟元素 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167051....html原文链接:https://javaforall.cn

    80910

    CSS选择器

    CSS基础选择器 标签选择器 就是用标签名来当做选择器。 1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等 2) 不管这个标签藏多深,都能够被选择上。...也就是说,如果有一个pid叫做haha,这个页面内,其他所有的元素id都不能叫做haha。 类选择器 .就是类符号。类英语叫做class。...后代选择器,就是一种平衡:共性、特性平衡。当要把某一个部分所有的什么,进行样式改变,就要想到后代选择器。 后代选择器,描述是祖先结构。...交集选择器 1h3.special{ 2 color:red; 3} 选择元素是同时满足两个条件:必须是h3标签,然后必须是special标签。 交集选择器没有空格。...1*{ 2 color:red; 3} 效率不高,如果页面上标签越多,效率越低,所以页面上不能出现这个选择器。 一些CSS3选择器 儿子选择器> IE7开始兼容,IE6不兼容。

    93620
    领券