CSS selector 选择符是我们进行CSS网页布局的基矗CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读。HTML selector 标签选择符HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示。比如我们想叫H1的颜色是红的,则:H1 {color: red}。这里我们学习一个CSS的特点,它可定义好几个 selector在一个rule里。如:H1, H2, TD {color: red}。这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色。在具体使用中,可以将几个设置相同的属于合并起来编写,减小我们的代码。Class selector 类选择符 Class selector有两种,一种叫相关 class selector,它跟一个 HTML 的标签有关系它的语法是tag.Classname {property:value}。如:我们想设置一些而不是全部 H1 的颜色是红的 H1.redone {color: red}则:第一个 H1 是红色的,而第二个就不是了。第二种是独立class selector。它可被任何 HTML标签所应用。它的语法如下 .Classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的标签中去。非常明显class selector 给了我们更多的自由与发挥的空间。ID selector ID选择符ID selector 其实跟独立 class selector 的功能很相似。而区别在于它们的语法和用法不同,以及对于 javascript 操纵 HTML元素有帮助。我们在布局中,对不同的结构区域的定义,往往用ID选择符。它的语法如下#IDname {property:value}。假如我们有下面的定义#yelowone {color: yellow}。我们可以运用这个定义到任何的有同样 ID 名字的标签,如:text here你可能觉得既然 ID selector 和独立 class selector 功能一样,为什么两者都存在呢?有 ID 的 HTML元素可以被JavaScript来操纵。class 与 ID 的区别 参考这里该用id还是用class呢 参考这里。
CSS selector 选择符有哪些 如何合理运用?
来源:互联网 发布日期:2016-03-25 16:21:56 浏览:1763次
下一篇:用CSS制作具有亲和力的表格
相关内容
AiLab云推荐
最新资讯
- 机器人实现全自动显微注射 将提高大规模遗传学实验能力
- 星尘智能发布AI机器人,可以叠衣、炒菜、叠杯,预计今年商业化
- 全球首台商用协作机器人制造商:拒绝价格战,大力引入人工智能
- 马斯克:可能在明年年底前出售特斯拉人形机器人 Optimus
- 苹果中国工厂回收机器人首次露面,规避了哪些电子回收弊端?
- 特斯拉或将在2025年底前销售人形机器人Optimus,机器人100ETF(159530)一度涨超1%
- 马斯克:“擎天柱”机器人仍在试验阶段 最早明年年底上市
- 马斯克称最快明年底前开卖人形机器人Optimus!网友:真能那么快吗?
- 外媒:马斯克透露,“擎天柱”机器人仍在试验阶段,最早明年年底上市
- 投资300亿!机器人产业爆发:几大趋势
本月热点
- 人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
- OpenAI 悄悄升级 ChatGPT:可在对话中调用不同的自定义聊天机器人 | 懂点AI
- Limbic开发AI心理咨询机器人,帮用户避免与人类交流可能引发的焦虑感
- 麒麟信安入股超能机器人 或尝试打开新业绩增长点?公司最新回应来了
- 灿瑞科技:已有产品应用于消费级机器人领域
- 英伟达官宣AI聊天机器人,本地RTX显卡运行,这是要挑战OpenAI?
- 人形机器人企业暂时得救了
- Meta联合研发家务机器人,能在零人力帮助下自主整理房间
- 端到端纯视觉!OpenAI押注的人形机器人献艺拜年了
- 波士顿动力 Atlas 机器人能力升级,可灵活搬运汽车零件
热门排行
-
斯坦福家政机器人火了但又翻车了!多数是真人操控编排的
阅读量:167404
-
斯坦福团队发布新机器人Mobile Aloha,人形机器人将迎来产业元年?
阅读量:165704
-
我的同事是 GPT-4 机器人,我们在 Slack 上一起工作
阅读量:162431
-
谷歌起草“机器人宪法”,以确保 AI 机器人不会伤害人类
阅读量:160333
-
人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
阅读量:104310
-
大疆回应停售青少年教育产品:将资源聚焦在大学生高校机器人赛事
阅读量:68788