一、CSS选择器的种类

  1. 标签选择器:div
  2. 类选择器:.container
  3. id选择器:#child1
  4. 后代选择器:.container div,表示container类里面的所有div标签
  5. 子选择器:.container>div,表示container类里面下一代的所有div标签
  6. 相邻同胞选择器:.child1+.child2,表示所有紧接在.child1后面的一个.child2(二者必须是兄弟)
  7. 群组选择器:.child1,.child2,表示所有的.child1和.child2
  8. 伪类选择器:比如 :hover :link :active  :first-child  ::nth-child(n)
  9. 伪元素选择器:比如 ::after  ::before  ::first-letter
  10. 属性选择器:[attribute]选择带有attribute属性的标签,[attribute=value]选择attribute=value属性的标签
  11. 层次选择器:p~ul,表示p后面的所有ul,二者必须有相同的父标签

二、选择器优先级

!important > 内联样式 > ID选择器 > 类选择器/伪类选择器/属性选择器 > 标签选择器/伪元素选择器>兄弟选择器/子选择器/后代选择器/通用选择器(权重为0)

CSS——选择器及优先级相关推荐

  1. 详解CSS选择器、优先级与匹配原理

    选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...

  2. CSS选择器的优先级的相关介绍

    css选择器的优先级 使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示 优先级规则(权重值 ...

  3. 【CSS笔记】CSS选择器的优先级(权重)

    目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...

  4. CSS选择器的优先级是怎样的?

    CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...

  5. css选择器的优先级

    1. 引言 选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...

  6. [转]《精通css》笔记1:css选择器与优先级

    本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器 一.基础选择器 css基础选择器有标签选择器.类选 ...

  7. css选择器的优先级和权重问题

    CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...

  8. 一张图搞定CSS选择器的优先级

    0 总览 如果发生CSS的冲突问题, 即A样式与B样式冲突 1 首先比较CSS样式的来源不同的来源有不同的优先级如果来源相同, 即同源时, 则进入下一阶段2 比较是否为内联样式如果A样式与B样式同源, ...

  9. css选择器的优先级,以及用法

    目录 前言 一.css选择器 二.css选择器优先级排序 三.css选择器的总结 1.  !important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择 ...

最新文章

  1. 词性标注,实体识别,ICTCLAS分析系统的学习
  2. ios 处理WKContentView的crash
  3. 电脑电池修复_笔记本电脑不充电是怎么回事?
  4. python PyQt5中文教程☞【第五节】PyQt5事件(Event)和信号(信号槽 Signals slots)
  5. 网站开发的小知识参考(慢慢收集备用)
  6. 《C++ Primer》第五版课后习题解答_第二章(1)(01-08)
  7. 2021-01-25
  8. 值传递,指针传递,引用传递
  9. 微信为什么没有开屏广告?
  10. 千亿智慧照明市场背后,BLEMESH免开发方案成主流
  11. 怎样利用JDBC启动Oracle 自己主动追踪(auto trace)
  12. 批量删除2012年9月份以前的表
  13. 机器学习专项练习笔记(持续更新)
  14. delete postman 传参_Postman高级应用——串行传参和动态传参详解
  15. 常用著名网络教学平台
  16. c++ atuo_ptr 的实现原理
  17. 青苹果linux版本客户端,青苹果影院新版本
  18. 8篇论文详解用户历史行为序列建模方法
  19. 软件工程期末试题及答案
  20. chrome浏览器主页变成hao123

热门文章

  1. xxxx.zip:这个压缩文件格式未知或者数据已经被损坏,打不开压缩文件,总出现这个提示的解决方法...
  2. linux恢复移动硬盘数据恢复,移动硬盘数据恢复注意事项
  3. php copy move_uploaded_file,PHP文件上传 move_uploaded_file() 参数的正确写法
  4. openEuler资源利用率提升之道06:虚拟机混部OpenStack调度
  5. php n r x20,vivo X20 到底值不值得买 优缺点分析
  6. C++ IMPL 模式解析(上)
  7. 创建Dao接口,用impl类实现对数据的增删改查
  8. java的四种输入方法,你会几种?
  9. 简单易用的照片编辑器—“PhotoScape X”
  10. 我的cnblog美化