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. Fiddler手机抓包配置

    之前按照网上教程配置,发现还是不太详细,做下笔记备忘 一.电脑端配置 因为手机需要配置电脑IP,如果我们IP自动获取,某一时刻IP可能会被改变,此时手机端无法看到抓包信息, 所以第一步,需要确认电脑端 ...

  2. javaSE Comparable接口中的compareTo()方法

    我们都知道,要对自建对象按照一定规则进行排序的话,要求自建对象实现Comparable接口,并重写compareTo() 方法,但compareTo() 方法的释义却不是那么容易搞清楚,下面举例进行阐 ...

  3. ubuntu 安装pip并修改为阿里云pip源

    0.sudo su1.安装pipapt-get install python-pip python-dev build-essentialpip install --upgrade pip pip i ...

  4. CF817E Choosing The Commander

    \(\mathtt{CF817E}\) \(\mathcal{Description}\) 有 \(q\) 个操作\((1 \leq q \leq 10^{5})\): 1.加入一个数 \(p_i(1 ...

  5. Python读取文件时出现UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position xx: 解决方案

    Python在读取文件时 with open('article.txt') as f: # 打开新的文本 text_new = f.read() # 读取文本数据 出现错误: UnicodeDecod ...

  6. Openfire部署（一）

    1.从官网下载openfire_4_1_4.tar.gz文件: 2.上传到linux上,解压缩 3.启动openfire [root@localhost opt]# cd openfire/bin [ ...

  7. eclipse中server name选项变灰

    删除workspace中.metadata\.plugins\org.eclipse.core.runtime\.settings目录下 org.eclipse.wst.server.core.pre ...

  8. php开发面试题---1、php常用面试题一（PHP有哪些特性）

    php开发面试题---1.php常用面试题一(PHP有哪些特性) 一.总结 一句话总结: ①.混合语法:php独特混合了C,Java,Prel以及PHP自创的语法. ②.为动态网页而生:可以比CGI或 ...

  9. phpstrom中Terminal窗口打开

    Terminal窗口其实就是cmd窗口

  10. checkbox、radio使用jquery改变状态以及其他操作

    $('input[type=checkbox]:checked').each(function(index,elem){ $(elem).attr("checked",false) ...