CSS选择器

.class

.intro

选择 class="intro" 的所有元素。

1

#id

#firstname

选择 id="firstname" 的所有元素。

1

*

*

选择所有元素。

2

element

p

选择所有 <p> 元素。

1

element,element

div,p

选择所有 <div> 元素和所有 <p> 元素。

1

element element

div p

选择 <div> 元素内部的所有 <p> 元素。：后代选择器

1

element>element

div>p

选择父元素为 <div> 元素的所有 <p> 元素。(子选择器，只选子代)

2

element+element

div+p

选择所有{紧接在 <div> 元素之后}的 <p> 元素。相邻同胞选择器

2

[attribute]

[target]

选择带有 target 属性所有元素。

2

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

2

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

2

相邻同胞选择器

 <!DOCTYPE html>

 <html>

 <head><!--相邻同胞选择器-->

 <style>

 div+p

 {

 background-color:yellow;　　

 }

 </style>

 </head>

 <body>

 <div></div>

 <p>我是唐老鸭。</p><!--紧接在div之后-->

 <p>我住在 Duckburg。</p><!--未紧接在div之后-->

 </body>

 </html>

层叠(样式优先级)：

首先

  • 标有！important的用户样式　　   用户样式（读者）:就是浏览网页的用户，自己所设置的样式。
  • 标有！important的作者样式         作者样式:指的是制作者（即做网页的那人）所写的用来把想要的效果呈现出来的样式。
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用的样式

然后，根据选择器的特殊性决定规则的次序。特殊性高的选择器的样式覆盖特殊性低的。特殊性的描述可以把它看成一个4位数: abcd（0000）。既特殊性分为四个等级，abcd

  • 如果样式是行内样式，既style=“~~~~”,那么a=1 特殊性1000
  • b为ID选择器的总数 　　   如#a1 #a2{}   特殊性为 0200
  • c为类，伪类，属性选择器的总数
  • d为类型选择器和伪元素选择器的总数

如果两个样式特殊性相同，后定义的覆盖前面的。

CSS选择器，层叠的更多相关文章

  1. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  2. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  3. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  4. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  5. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

随机推荐

  1. MyBatis笔记一：GettingStart

    MyBatis笔记一:GettingStart 1.MyBatis优点 我们的工具和各种框架的作用就是为了我们操作数据库简洁,对于一些数据库的工具能帮我们少写一些处理异常等等的代码,但是他们并不是自动 ...

  2. 【记录】eclipse / STS 设置注释模版格式/导入注释模版格式

    设置注释模板的入口:Window->Preference->Java->Code Style->Code Template 将如下保存在新创建的xml文件中,导入进去 < ...

  3. Codeforces Round #556 CF1149D Abandoning Roads

    这道题并不简单,要得出几个结论之后才可以做.首先就是根据Kruskal求最小生成树的过程,短边是首选的,那么对于这道题也是,我们先做一次直选短边的最小生成树这样会形成多个联通块,这些联通块内部由短边相 ...

  4. Linux上安装JDk教程

    使用如下命令 uname –a.如果输出结果中含有X86_64,表明系统是64位的,如果出现i686,证明系统是32位的. 没有安装包,就去官网下载 http://www.oracle.com/tec ...

  5. java多线程并发面试题

    1.多线程有什么用? (1)发挥多核CPU的优势 随着工业的进步,现在的笔记本.台式机乃至商用的应用服务器至少也都是双核的,4核.8核甚至16核的也都不少见,如果是单线程的程序,那么在双核CPU上就浪 ...

  6. 从 Server Timing Header 看服务器是如何处理请求的

    原文作者:Florian Hämmerle      译者:UC 国际研发 Jothy   写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端.服务端.算法.测试.数据.前端等相关的 ...

  7. 并查集(Disjoint Set Union,DSU)

    定义: 并查集是一种用来管理元素分组情况的数据结构. 作用: 查询元素a和元素b是否属于同一组 合并元素a和元素b所在的组 优化方法: 1.路径压缩 2.添加高度属性 拓展延伸: 分组并查集 带权并查 ...

  8. css自适应问题

    1. 图片自适应 <img src="app-logo.png" srcset="app-logo.png 175w,app-logo-double.png 365 ...

  9. macOS添加字体

    打开macOS的Applications文件夹: 双击其中的Font Book: 把下载的字体解压后的_文件夹_ 拖进来,字体就安装好了.

  10. jquery基础知识实例(一)

    轮滑 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...