CSS基础

介绍css相关知识 和 非布局属性。

css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。默认 是根据css选择器的权重,按权重进行叠加,权重值大的css 覆盖 权重小的css。

基本规则
选择器{
    属性:值;
    属性:值;
}

* 选择器作用:用来匹配html元素。
* 多个选择器之间可以叠加

* 分类和权重
* 解析方式和性能
    浏览器 解析选择器的 顺序,是按照 从右向左的。找到右边第一个选择器后,逐步向左边 进行选择器的验证。
    (.body div .hello) -> (.hello, div, .body)
    先找到.hello, 再去验证'.hello'有没有祖先叫'div',再去验证div有没有祖先'.body'。
    这样的选择器-解析顺序,是处于性能考虑。先找到最内部的 选择器,然后逐级向外 进行验证 外部的选择器。比 从外向内查找 要进行的步骤少。
    从右向左解析css选择器,这样做的目的是:为了加快 浏览器对css选择器的解析速度。 
* 需要关注的选择器
选择器分类
* 元素选择器 a{}
* 类选择器 .link{}
* ID选择器 #id{}
* 属性选择器 [type=radio]{}

* 伪类选择器 :hover{}
* 伪元素选择器 ::before{}

* 组合选择器 [type=checkbox] + label{}
* 否定选择器 :not(.link){}
* 通用选择器 *{}

伪元素 常见的有:before after。伪元素 不会出现在 html和dom树中。但是 伪元素是真实存在于页面中的元素,可以显示内容 可以设置样式 等等。
伪类 是一个元素的某种状态。比如 鼠标 停留在 按钮上,该按钮就处于hover的状态
选择器权重
选择器的分类,也为选择器设置权重 带来了便捷。

* ID选择器 #id{} +100
* 类 属性 伪类   +10
* 元素 伪元素        +1
* 其它选择器     +0

那么十个 类选择器  是不是等于 一个id选择器, 11个类选择器 就大于 一个id选择器?
实际上 选择器的权重 是不能进位的,一个id选择器的权重 是大于 11个类选择器的。如下图所示:

选择器权重 - 参考表

'+'选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。而'~'选择器则表示某元素后所有同级的指定元素,强调所有的。

* !important优先级最高
    属性值 写上 '!important', 它就是最重要的 不会被其它css样式覆盖掉. 
* 内联的style 优先级高于 (外部样式表 和 style标签中的样式),也高于 id选择器
* 相同权重 后写的生效

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 命令行安装mysql及设置密码

    (安装完sql后, 使用mysql -u -root -p设置密码,会报错 ) 输入新密码,完工。

    lesM10
  • 使用py3fdfs - 踩坑实录 __str__ return non-string (type bytes)

    在执行client = Fdfs_client('/etc/fdfs/client.conf')时,会报错:TypeError: type object arg...

    lesM10
  • Prototypal Inheritance with Javascript-JavaScript中的原型继承(基础概念篇)

    因为上篇文章Prototypal Inheritance没有对一些基本概念作出阐述,所以加入这篇文章作为补充。

    lesM10
  • 前端学习 第2周 第1天

    Joel
  • CSS复合选择器

    CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。

    乐心湖
  • Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地
  • 前端基础-CSS伪类选择器和类选择器一起使用

    cwl_java
  • 爬取数据不是非要Python

    最近有朋友问是否可以不用Python编程就能爬取数据并分析,想起来正好之前写了一篇文章,关于Web Scraper的使用,由于之前忘记标记原创,今天就再发一次。...

    用户1564362
  • 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    suwanbin
  • CSS选择器是如何确定优先级的?

    先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

    dys

扫码关注云+社区

领取腾讯云代金券