选择器类型

1、ID  #id

2、class  .class

3、标签  p

4、通用  *

5、属性  [type="text"]

6、伪类  :hover

7、伪元素  ::first-line

8、子选择器、相邻选择器

三、权重计算规则

1. 第一等:代表内联样式,如: style=””,权值为1000。

2. 第二等:代表ID选择器,如:#content,权值为0100。

3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

css选择器有哪些,选择器的权重的优先级的更多相关文章

  1. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  3. CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题

    css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...

  4. CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

    选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...

  5. HTML和CSS前端教程03-CSS选择器

    目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...

  6. CSS 小结笔记之选择器

    Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...

  7. 朝花夕拾《精通CSS》二、选择器 & 层叠

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  8. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  9. CSS各类标签用法——选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Keras使用多个GPU并行

    model = Model(inputs=[v_i, v_j], outputs=output_list) model = multi_gpu_model(model,4) model.compile ...

  2. [LeetCode]231. Power of Two判断是不是2\3\4的幂

    /* 用位操作,乘2相当于左移1位,所以2的幂只有最高位是1 所以问题就是判断你是不是只有最高位是1,怎判断呢 这些数-1后形成的数,除了最高位,后边都是1,如果n&n-1就可以判断了 如果是 ...

  3. [leetcode33Search in Rotated Sorted Array]在排序旋转后序列中找目标值

    直接上代码 /** * Created by lvhao on 2017/6/30. * Suppose an array sorted in ascending order is rotated a ...

  4. [leetcode]222. Count Complete Tree Nodes完全二叉树的节点数

    /* 满二叉树的特点是2^n-1,对于完全二叉树,一个node如果左右子树深度相同,那么 是一个满二叉树.如果不是,那就把node算上,继续往下看,下边的可能是满二叉树 由于完全二叉树中有一些子满二叉 ...

  5. Hbase Rowkey设计原则

    Hbase是三维有序存储的,通过rowkey(行键),column key(column family和qualifier)和TimeStamp(时间戳)这三个维度可以对HBase中的数据进行快速定位 ...

  6. 简单做了一个代办事项列表系统 ,增删改查。 前台页面用 jquery 后台用nodejs ,数据库用的是mongdoDB 。

    引入npm 第三方mongoose包连接mongoDb本地数据库todolist const mongoose = require('mongoose'); mongoose.connect('mon ...

  7. 任意文件下载漏洞的接口URL构造分析与讨论

    文件下载接口的URL构造分析与讨论 某学院的文件下载接口 http://www.****.edu.cn/item/filedown.asp?id=76749&Ext=rar&fname ...

  8. 用 Flutter 搭建标签+导航框架

    前言 在 Flutter 这个分类的第一篇文章总结了下最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个 ...

  9. HBase的架构设计为什么这么厉害!

    老刘是一名即将找工作的研二学生,写博客一方面是复习总结大数据开发的知识点,一方面是希望能够帮助和自己一样自学编程的伙伴.由于老刘是自学大数据开发,博客中肯定会存在一些不足,还希望大家能够批评指正,让我 ...

  10. MySQL select if 查询最后一个主键 id

    查询最后一个主键id SELECT IF(MAX(id) IS NULL, 0, MAX(id)) AS maxid FROM users; 查询最小的主键id SELECT IF(MIN(id) I ...