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. netstat 指令

    netstat 指令将所有的网络端口监听情况进行罗列 语法  netstat -tuln 几个常见的服务端口 例  通过grep 查看端口来获得上面的服务是否开启,并给予提示 1 #!/bin/bas ...

  2. ZOJ3531: [SDOI2014] 旅行

    Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰. ...

  3. vue 点击切换图标

    <div @click="showImg" class="showSearch"> <img class="header_img&q ...

  4. python_django_分页

    分页:把从数据库中的数据分为多页在客户端显示. 在django中,可通过这两个对象来实现: Paginator对象 Page对象 Paginator对象与Page对象的关系: paginator对象调 ...

  5. Java高并发网络编程(一)

    一.OSI网络七层模型 因特网是一个极为复杂的网络,分层有助于我们对网络的理解 .分层也是一种标准,为了使不同厂商的计算机能够互相通信,以便在更大范围内建立计算机网络,有必要建立一个国际范围的网络体系 ...

  6. kNN算法和决策树

    的整数. 下面看书上给出的实例: from numpy import * import operator def createdataset(): group=array([[1.0,1.1],[1. ...

  7. vma

    linux内核的每一样技术,都是为了解决某个问题的． vma结构体的提出是为了管理＂虚拟内存空间＂这个资源． 像brk(),mmap()分配给用户空间的都是虚拟地址(当然),那内核就要知道哪一部分虚拟 ...

  8. 分布式项目pom

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  9. Python：验证码识别

    说明:此验证方法很弱,几乎无法识别出正确的验证码  

  10. SQLServer AlwaysOn在阿里云的前世今生

    缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定 ...