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. Cas 4.2.7 OAuth+Rest 实现SSO

    关于Cas的认证原理.Rest的使用请参考前面的文章.本文重点阐述使用Rest接口登陆系统和其他单点登录系统打通遇到的问题,及解决问题的思路和过程.    一: 遇到的问题         使用Res ...

  2. MySQL数据库企业级应用实践(多实例源码编译）

    MySQL数据库企业级应用实践(多实例源码编译) 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机 ...

  3. 【模板篇】NTT和三模数NTT

    之前写过FFT的笔记. 我们知道FFT是在复数域上进行的变换. 而且经过数学家的证明, DFT是复数域上唯一满足循环卷积性质的变换. 而我们在OI中, 经常遇到对xxxx取模的题目, 这就启发我们可不 ...

  4. 笔记60 Spring+Mybatis整合

    整合思路:将SessionFactory交给Spring管理,并且把Mapper和XML结合起来使用. 一.目录结构 二.基本的pojo Category.java package com.pojo; ...

  5. 125K低频唤醒芯片SI393可替代AS3933，GS3933

    2020年即将推出性能最出色的15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能. SI393是15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能,在软硬件 ...

  6. php操作redis--字典（hash）篇

    常用函数:hSet,hGet,hGetAll等. 应用场景:存储用户信息对象数据,包括id,姓名,年龄和生日,通过用户id来获取姓名,年龄等信息. 连接 $redis = new Redis(); $ ...

  7. 【leetcode】967. Numbers With Same Consecutive Differences

    题目如下: Return all non-negative integers of length N such that the absolute difference between every t ...

  8. SpringDataRedis依赖

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

  9. 根据ID查询实体

    //查询实体 $scope.findOne=function(id){ $http.get('../brand/findOne.do?id='+id).success( function(respon ...

  10. java-逻辑处理

    类名是ItemDAO package dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.s ...