在写页面时,有时会发现自己写的css样式不起作用,这是怎么回事?css样式不起作用的原因是什么?下面本篇文章就来给大家介绍一些css样式不起作用的常见原因,希望对大家有所帮助。

一、html标签没写完整,漏了“”或者“/”等

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时,总会大吃一惊。

二、样式表保存的编码错误

如果怀疑CSS表的编码错误,可以直接将css文件以utf-8的编码另存一下文件就可以了。

三、样式被层叠

如果是层叠导致的话,则需要提高样式的优先级。

常用的方法有:往选择器中添加元素,提高其特指度,或者在样式分号前空格加!important,如下:background-color: pink !important;

四、CSS语法错误

以谷歌浏览器的开发者工具为例,一般语法错误会显示为该样式被划去,样式左侧有图标提示,鼠标移入会显示英文提示。如下图所示:

一般语法错误有:

1、写错属性名,属性值不符合规范;

2、以下符号使用了中文或者全角符号:,;{}:

五、选择器写错写后代子代选择等,涉及多个标签,类名、id等,子选择器的顺序、名字等写错了,均可能导致出错;

html里的标签忘记写类名、id了,而选择器用了这些漏写的类名、id等,样式自然不会生效。

后代选择器有没有写上空格;

像 div.box{} 这类选择器会不会写成了 div .box{},即多写了一个空格

为什么html中使用不了样式,css不起作用是什么原因?相关推荐

  1. css球形颜色选择器,在CSS选择器中使用color颜色样式CSS代码

    CSS颜色样式篇目录认识CSS 颜色(color) 网页颜色基础 两种方法设置对象颜色样式 文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置 网页colo ...

  2. css中字体下划线样式,css下划线 浅谈css自定义下划线

    使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...

  3. php中修改弹窗的样式,CSS变形弹窗效果示例

    大家都知道,弹出窗体已经是现在网页常用的一种交互设计,在这个注重交互动画体验的时代,网页弹窗也是可以来点新鲜点子的,比如今天分享的CSS 变形Modal Window. 当用户点击按钮时,按钮将会变成 ...

  4. html h1转换为行内,css中转换为行内样式的解决方案(css-inline)

    聊聊场景 发送邮件 在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体 在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变 解决方案 这两种方案功能和 Ap ...

  5. html中style布局放哪,CSS样式表与格式布局详解

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表 内嵌样式表:必须写在head标签里 例: p { 样式;} he ...

  6. webpack插件实现自动抽取css中的主题色样式,并动态切换主题色(element-ui)

    项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...

  7. html怎么设置img样式,css默认样式 css中img默认样式问题

    css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...

  8. 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...

  9. html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式

    div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...

  10. CSS中border的所有样式属性

    CSS中border的所有样式属性 1.solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...

最新文章

  1. java 构建是什么意思_构建的概念
  2. 循环小数是分数集合吗_2020年部分CFA国外考场取消,通过率会受影响吗?
  3. RDKit | 基于RDKit(≥2020.09.1)的相似图绘制新方法
  4. 如何使用Total Recorder录制网上的音乐,如何下载只能试听的歌曲
  5. 【渝粤题库】广东开放大学 社会保障法 形成性考核
  6. 缓存层设计套路(一)
  7. spring配置mysql事务管理_Spring 数据库事务管理机制
  8. gulp排除已压缩文件思路
  9. 互联网企业招聘零分考生 扇了谁的耳光?
  10. vbreport8.wpf.viewer 个别电脑不显示_【电脑手机小技巧】新买的电脑,第一次开机最好要这样设置...
  11. 20.Linux 账号管理与 ACL 权限设置
  12. access连接mysql_如何正确连接access数据库
  13. 2019数模美赛规则
  14. 手机电阻屏和电容屏哪个好?电容屏和电阻屏的区别!
  15. 彻底理解View事件体系!
  16. 基于wine葡萄酒数据集的分类方法研究
  17. HTML用css把英文字母改大,CSS转换英文大小写text-transform属性
  18. 爬虫抓取究竟是什么?
  19. dfs文件服务器详解,DFS文件服务器详解
  20. python 语音识别培训使用Python和Keras创建简单语音识别引擎

热门文章

  1. centos系统中perl进程病毒占用大量网络流量导致网络瘫痪的问题分析及解决方案
  2. java 微信公众号发红包_微信公众号如何给用户发红包?
  3. SQLite 查询得到今天日期
  4. 网络计算机显示器接口,电脑显示器接口怎么配置才合理
  5. 局域网中广播风暴产生原因及解决方法
  6. 手把手教你开发BLE数据透传应用程序
  7. Java实现判断是否参加上秒杀活动
  8. 用html实现贪吃蛇游戏思路,贪吃蛇游戏
  9. 《牛奶可乐经济学》读书笔记 | 用经济学点亮生活
  10. 2021年9月基因编辑/CRISPR最新研究进展