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. 深入Dagger:自定义AutoValue

    前言 上一篇文章介绍了JavaPoet的原理和使用,这里在介绍一下AutoValue的原理,并模仿自定义实现一个AutoValue. AutoValue的是Google为了实现ValueClass设计 ...

  2. springMVC+freemarker整合

    转自:http://angelbill3.iteye.com/blog/1980904 在springMVC的项目中,加入freemarker 1.首先导入springMVC-webmvc所需的JAR ...

  3. 高级运维(三)：部署Lnmp环境、构建Lnmp平台、地址重写

    一.部署LNMP环境 目标: 安装部署Nginx.MariaDB.PHP环境 1> 安装部署Nginx.MariaDB.PHP.PHP-FPM: 2> 启动Nginx.MariaDB.FP ...

  4. 使用gulp管理sass文件

    前提是npm和ruby已经安装好 1. 新建文件夹myproject,cd进入文件夹 再npm init 初始化 2.npm install gulp --save-dev 为项目添加gulp,并将g ...

  5. css定位的理解

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed ● static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行 ...

  6. vim编辑器设置缩进！

    转载自 http://blog.chinaunix.net/uid-27213819-id-3813909.html 1.在自己的home目录下建立.vimrc文件.控制台输入vi ~/.vimrc ...

  7. libcmt.lib(crt0dat.obj) : error LNK2005: _amsg_exit 已经在 MSVCRTD.lib(MSVCR110D.dll) 中定义

    问题描述(VC2012): 1>MSVCRTD.lib(cinitexe.obj) : warning LNK4098: 默认库"libcmt.lib"与其他库的使用冲突:请 ...

  8. 文件下载java代码

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  9. Centos7 安装 telnet 服务

    准备写一个 django-webtelnet(运维管理系统集成后管理网络设备),但是手边没有现成的网络设备资源可以测试,那就研究下 Centos7 下安装 telnet-server 吧. 安装 yu ...

  10. VS下使用VIM， Visual Studio 安装 VSvim插件 配置 及使用

    简介 VIM是一款很高效的编辑工具,所幸的是VS2012以后支持VIM的插件:VsVim.下面介绍插件的安装.配置及简单使用. 1. 下载安装 去官网下载,双击直接安装后,重新打开VS. https: ...