美文网首页
前端知识点(5)

前端知识点(5)

作者: 蓝色海洋_bd2b | 来源:发表于2019-03-25 20:51 被阅读0次

权重:CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级:
1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器()、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0 选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的样式。
比如:p这个选择器就表示选择页面中的所 有的p元素,在选择器之后所设置的样式会 应用到所有的p元素上。 元素选择器(标签选择器) 可以根据标 签的名字来从页面中选取指定的元素。
语法:标签名 { }比如p则会选中页面中的所有p标签,h1会 选中页面中的所有h1标签。
类选择器 可以根据元素的class属性值选 取元素。
语法:.className { }比如.hello会选中页面所有class属性为hello的元素。
ID选择器 可以根据元素的id属性值选取 元素。
语法:#id { }比如#box会选中页面中id属性值为box的 元素,和class属性不同,id属性是不能重 复的。
复合选择器 可以同时使用多个选择器, 这样可以选择同时满足多个选择器的元素。
语法:– 选择器1选择器2{}例如div.box1会选中页面中具有box1这个class的div元素。
群组选择器 可以同时使用多个选择器, 多个选择器将被同时应用指定的样式。
语法:选择器1,选择器2,选择器3 { }比如p,.hello,#box会同时选中页面中p元素,class为hello的元素,id为box的元素。
通用选择器 可以同时选中页面中的所有 元素。
语法:{ } 后代选择器 后代选择器可以根据标签的关系,为处在 元素内部的代元素设置样式。 语法:祖先元素 后代元素 后代元素 { }比如p strong 会选中页面中所有的p元素 内的strong元素。
伪类选择器: 给链接定义样式:有四个伪类可以让你根据访问者与该链接的交 互方式,将链接设置成4种不同的状态。 正常链接a:link 访问过的链接a:visited(只能定义字体颜色) 鼠标滑过的链接a:hover 正在点击的链接a:active 通常em显示为斜体,而strong显示为粗体。 i标签会使文字变成斜体。b标签会使文字变成粗体。这两个标签和em和strong类似,但是这两 个标签没有语义。所以根据html5标准,当我们只想设置文本特殊显示, small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信号等。小写

相关文章

  • 前端知识点(5)

    权重:CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写...

  • 前端知识点(5)

    高度塌陷 文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高,但是当为子元素设置浮动时,子...

  • 原生js开发AJAX数据分页缓存模块

    效果知识点:原生Js实现ajax数据交互、数据分页技术原理剖析,前端数据缓存, H5domAPI应用, 职业化前端...

  • 【速速收藏学习】前端开发学习路线

    前端开发学习路线:<点击立即开始学习> •学习前端,无非就是这些知识点,学习+动手实践,别无选择 • 5大阶段,1...

  • web前端如何入门学习?需要掌握什么姿势?

    初学者更快入门web前端,以下是关于web前端方面的教程知识点。web前端是app开发、h5网页等主流的程序语言,...

  • web前端开发小白快速入门的10个方法

    10种方式助初学者更快入门web前端,以下是关于web前端方面的教程知识点。web前端是app开发、h5网页等主流...

  • h5上传图片压缩

    涉及知识点 uniapp项目h5,涉及到前端图片压缩上传 uni.chooseImage() canvas压缩 参...

  • 前端知识点

    前端知识点 HTML5与 CSS3.0 新特性? html5的新特性: 添加了video,radio标签 添加了c...

  • HTML5前端开发原来有这么多优势!

    H5前端开发其实并不简单,要成为一个优秀的前端工程师需要学的知识点非常多。 那么HTML5有哪些优势呢? 一跨平台...

  • 2018 浅谈前端面试那些事

    整理了一份最新前端知识点,希望对各位要面试的程序猿们能有帮助。 知识点汇总 1.HTML HTML5新特性,语义化...

网友评论

      本文标题:前端知识点(5)

      本文链接:https://www.haomeiwen.com/subject/ywcivqtx.html