css布局命名时如何尽量避免下划线

本篇文章给大家带来的内容是关于css布局命名时尽量避免下划线,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信截图_20181126161645.png

用过css hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让ie外的大部分浏览器忽略这个样式的定义,所以使用“_”做为命名时的分隔符是不规范的。在做css检查时会出现错误提示,因此要避免使用下划线命名。

为此得找一个能代替下划线而又合规范的符号,当然不是一定要用这种分隔符之类的,只是个人习惯问题。

立即学习“前端免费学习笔记(深入)”;

做了个小测试,将下划线分别用了“~”、“$”、“`”、“&”和“-”去代替,结果只有“-”号是可以使用的,而且对js的支持也正常,看下测试:

以下为引用的内容:

css部分:

代码如下:

.try-a{ color:#00f; }.try~a{ color:#00f; }.try`a{ color:#00f; }.try&a{ color:#00f; }.try$a{ color:#00f; }.try-b{ color:#f00; }.try~b{ color:#f00; }.try`b{ color:#f00; }.try&b{ color:#f00; }.try$b{ color:#f00; }

html部分:

代码如下:

try1
try2
try3
try4
try5

js部分:

代码如下:

function b(){document.getelementbyid("a")。classname="try-b";document.getelementbyid("b")。classname="try~b";document.getelementbyid("c")。classname="try`b";document.getelementbyid("d")。classname="try&b";document.getelementbyid("e")。classname="try$b";}

结果是“try1”变成了红色,显示正常。不过在css定义里,经常会用到id选择符,如果在页面中的id命名中使用了“_”,就免不了在css样式里出现下划线“_”了,所以在此还得注意在id的命名上也要避免使用下划线。

以上就是对css布局命名时尽量避免下划线的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

以上就是css布局命名时如何尽量避免下划线的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1613578.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:45:21
下一篇 2025年12月24日 03:45:42

相关推荐

  • CSS布局中常用的文字排版相关属性详解

    本篇文章给大家带来的内容是关于css布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS布局中常用的文字排版相关属性详解 一、设定文字字体、颜色、大小等使用font等。 font-style设定斜体,比如font-style: italic; fo…

    好文分享 2025年12月24日
    000
  • 如何使用css布局一个登陆表单

    本篇文章给大家带来的内容是关于如何使用css布局一个登陆表单,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css布局制作一个登陆表单 这个案例主要制作的是一个登录表单,在这个案例中使用了box-shadow、gradient,transform和transition等属 性,其中…

    2025年12月24日
    000
  • 一文掌握纯CSS布局网页

    本篇文章给大家带来的内容是关于纯css布局网页,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一…

    2025年12月24日
    000
  • CSS中常见的布局有哪些?5种常见的布局介绍

    本篇文章给大家带来的内容是css中常见的布局有哪些?5种常见的布局介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 本文将介绍如下5种常见的布局: 单列布局 两列自适应布局 圣飞布局和双飞翼布局 立即学习“前端免费学习笔记(深入)”; 伪等高布局 粘连布局 一、单列布局 1、常…

    2025年12月24日 好文分享
    000
  • css布局之display属性详解

    本篇文章给大家带来的内容是css布局之display属性详解,让大家了解display属性对于css布局的影响。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 我们要知道display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型…

    2025年12月24日
    000
  • css布局之百分比宽度布局的使用

    如何利用百分比布局?本篇文章就给大家介绍css布局之百分比宽度布局的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 百分比是什么?如何设置? 百分比是一种相对于包含块的计量单位。 百分比宽度的计算: 目标元素宽度/父级元素宽度=百分比宽度 它对图片很有用:如下我们实现了图片宽…

    2025年12月24日 好文分享
    000
  • CSS布局居中对齐,左侧定宽右侧自适应详细介绍

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容。本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法。如果你有更多关于布局方面的技巧,欢迎留言交流。一、神奇的居中 经常看到有一些面试题问如何实现…

    2025年12月23日
    000
  • 图文详解css布局方式

    css 布局方式的总览 css 布局的方式分为的部分 css 的布局方式 盒子内部的布局 文本的布局 立即学习“前端免费学习笔记(深入)”; 盒子本身的布局 盒子之间的布局 visual formmatting BFC ( block formatting context ) 布局上下文下的布局 I…

    2025年12月23日
    000
  • 学习CSS布局入门教程

    概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地。本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。 什么是 CSS 了解一个概念,首先看到的就是它的名字,而往往被忽略的,也是它的名字。CSS (cas…

    2025年12月23日
    000
  • CSS布局问题整理

    main{ text-align:center;}p{ display:inline-block; *display:inline;/*hack IE*/ *zoom:1;/*hack IE*/} .parent{ display: flex; flex-direction: column;//上面…

    2025年12月23日 好文分享
    000
  • HTML表单如何排列整齐_CSS布局优化方案【指南】

    表单整齐排列可通过Flexbox、Grid、浮动、CSS变量及语义化结构五种方案实现:Flexbox适用于一维对齐;Grid适合复杂二维布局;浮动兼顾旧版IE;CSS变量提升维护性;语义化结构加CSS重置保障兼容与一致性。 如果HTML表单中的元素排列混乱、间距不均或对齐错位,则可能是由于缺乏统一的…

    2025年12月23日
    000
  • html5怎么左右布局_html5用float或flex布局实现左右分栏结构【布局】

    HTML5左右分栏推荐使用Flexbox或Grid:Flexbox通过display: flex、width: 200px与flex: 1实现;Grid通过display: grid与grid-template-columns: 200px 1fr实现;float兼容旧浏览器但需清除浮动。 如果您希…

    2025年12月23日
    000
  • HTML如何对齐多个DIV元素_布局方案详解【教程】

    多个DIV对齐可采用Flexbox、Grid、Float、绝对定位或text-align五种方案:Flexbox适合一维居中;Grid适合二维网格;Float适用于传统多栏;绝对定位用于精准坐标;text-align配合inline-block适合轻量级内联对齐。 如果您在HTML页面中放置了多个D…

    2025年12月23日
    000
  • HTML如何实现拼图游戏_JavaScript交互开发教程【实战】

    需结合HTML、CSS与JavaScript实现:一、建id为”puzzle-board”的容器,动态生成16个带data-index的拼图块并设空白块;二、按4×4切分800×800图片,用background-position定位各块;三、点击邻近块时通过索引差判断相邻性…

    2025年12月23日
    000
  • 如何排版HTML复杂内容_CSS布局技巧全解析【教程】

    应选用CSS Grid、Flexbox、嵌套布局、Containment及自定义属性等技术组合:Grid适用于二维模块化布局,Flexbox处理一维流式对齐,嵌套发挥各自优势,Containment优化性能,自定义属性实现主题化响应式控制。 如果您需要在网页中呈现结构复杂、层次丰富的HTML内容,但…

    2025年12月23日
    000
  • html5如何横向排版_HTML5横向排版实现与布局技巧【方法】

    HTML5横向排版可通过五种方法实现:一、Flexbox设flex-direction: row;二、Grid用grid-template-columns定义列轨道;三、writing-mode改变文字流向;四、transform或inline-block模拟横向流;五、Scroll Snap配合f…

    2025年12月23日
    000
  • html5如何单独对齐_HTML5元素单独对齐与独立布局技巧【详解】

    HTML5元素可单独对齐:一、inline-block+text-align;二、margin:auto+块级显示;三、Flexbox的justify-content/align-self;四、Grid的place-self;五、transform偏移。 如果您希望在HTML5页面中对某个特定元素进…

    2025年12月23日
    000
  • 如何分块html_将HTML页面按功能分块布局【布局】

    应使用语义化HTML5标签、CSS Grid、Flexbox、BEM命名规范及Web Components五种方法分块:一用header/nav/main/aside/footer等标签明确功能;二用Grid的grid-template-areas布局;三用Flexbox处理一维流式结构;四以BEM…

    2025年12月23日
    000
  • html表单域如何居中_HTML表单输入框居中布局方式【居中】

    HTML表单水平居中可通过五种CSS方法实现:一、text-align配合inline-block;二、margin: auto配固定宽;三、Flexbox的justify-content;四、Grid的place-items;五、绝对定位加transform。 如果您在网页中创建了HTML表单,但…

    2025年12月23日
    000
  • 如何让手机html5_手机访问HTML5页面优化与适配技巧【指南】

    手机HTML5页面需通过五步优化:一、设置viewport元标签;二、采用响应式CSS布局;三、启用触摸事件替代鼠标事件;四、优化媒体资源加载;五、检测并适配设备特性。 如果您在手机上访问HTML5页面时遇到布局错乱、字体过小、交互失灵或加载缓慢等问题,则可能是由于页面未针对移动设备进行适配与优化。…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信