1.选择符

    兼容性
统配选择符 *  
     
元素选择符 body  
类选择符 .class  
id选择符 #id  
     
包含原则符 p strong     (所有后代)  
子代选择符 p>strong    (紧跟子代) lte IE7 
相邻选择符 h1+p          (h1后面第一个p元素) lte IE7 
     
属性选择符 button[class]    (带有class属性的button) lte IE7 
  button[class="switcher"]       (class等于switcher) lte IE7 
  button[class~="switcher"]     (class中包含独立switcher) lte IE7 
  button[class|="switcher"]     (class以switcher开头-连字符分割) lte IE7 
     
伪类(不同状态) a:link   a:hover  a:visited  a:active   (:hover 也可用于其它元素) lte IE7 
  input : focus   (当拥有键盘输入焦点时添加样式) lte IE7 
  ul: first-child   (向元素的第一个子元素添加样式) lte IE7 
  p:lang(fl)        (带有lang元素为fl 的p元素添加样式) lte IE7 
     
伪对象(额外信息) p:before {content:'XX' }   (在元素之前添加内容) lte IE7 
  p:after {content:'XX' }      (在元素之后添加内容) lte IE7 
  p: first-letter                      (向文本的第一个字母添加样式) lte IE7 
  p: first-line                         (向文本的首行添加特殊样式) lte IE7 
     
选择符组合, div#header,div#footer  

   2.优先级

/*
lte:就是Less than or equal to的简写,也就是小于或等于的意思。 lt :就是Less than的简写,也就是小于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 ! :就是不等于的意思,跟javascript里的不等于判断符相同。
*/

开发人员编辑的CSS样式中根据选择符组合来决定优先级别,权重值会累加。

权重值 选择符或属性
最高 !important
1000 HTML标签内style属性 (不建议使用,结构样式分离)
100 ID选择符
10 类选择法、属性选择符
1 标签选择符、伪类及伪对象
0 其它选择符:如通配选择符

元素本身设置的样式高于继承的样式,不用考虑权重值。

CSS和html如何结合起来——选择符及优先级的更多相关文章

  1. 说说ID选择符、类选择符和HTML标记选择符的优先级顺序

    ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如:       p{color:#f ...

  2. CSS第二天总结 更多的选择符

    CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起 个名字或者分类,这就是id和class属性. ...

  3. css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att]       选择具有att属性的E元素. input[type]{color: #red;} <input t ...

  4. CSS 中常用的选择器(选择符)

    一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...

  5. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  6. css那些事儿1 css选择符与管理

    结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型 ...

  7. HTML/CSS 选择符优先级

    CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000 ...

  8. HTML第三讲(选择符)

    本次课程讲CSS中的选择符 1.基本选择符 基本选择符有三个 1.标记名选择符 所谓的标记名选择符就是直接在样式中使用标记名定义,譬如以下代码: (此种选择符的特点是所有相同的标记名可以同时定义不需要 ...

  9. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

随机推荐

  1. awk数组统计

    处理以下文件内容,将域名取出并根据域名进行计数排序处理:(百度和sohu面试题) http://www.etiantian.org/index.html http://www.etiantian.or ...

  2. sentinel 滑动窗口统计机制

    sentinel的滑动窗口统计机制就是根据当前时间,获取对应的时间窗口,并更新该时间窗口中的各项统计指标(pass/block/rt等),这些指标被用来进行后续判断,比如限流.降级等:随着时间的推移, ...

  3. SpringBoot中资源初始化加载的几种方式(看这一片就够了)

    一.问题 在平时的业务模块开发过程中,难免会需要做一些全局的任务.缓存.线程等等的初始化工作,那么如何解决这个问题呢?方法有多种,但具体又要怎么选择呢? 二.资源初始化 1.既然要做资源的初始化,那么 ...

  4. Node.js实现PC端类微信聊天软件(二)

    Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router -- ...

  5. jenkin+Git子模块自动拉取代码

    jenkins+Git子模块自动拉取代码 添加Git子模块 先克隆想要添加子模块的仓库git clone ssh://git@ip:port/user/project.git,这个是主目录. 进入仓库 ...

  6. docker命令总结

    用 docker pull 拉取镜像 root@lishichao-virtual-machine:~# docker pull hello-world Using default tag: late ...

  7. octavia的实现与分析(一)·openstack负载均衡的现状与发展以及lvs,Nginx,Haproxy三种负载均衡机制的基本架构和对比

    [负载均衡] 大量用户发起请求的情况下,服务器负载过高,导致部分请求无法被响应或者及时响应. 负载均衡根据一定的算法将请求分发到不同的后端,保证所有的请求都可以被正常的下发并返回. [主流实现-LVS ...

  8. 【翻译】Keras.NET简介 - 高级神经网络API in C#

    Keras.NET是一个高级神经网络API,它使用C#编写,并带有Python绑定,可以在Tensorflow.CNTK或Theano上运行.其关注点是实现快速实验.因为做好研究的关键是:能在尽可能短 ...

  9. 通过phpmyadmin设置数据库密码后若出现phpmyadmin拒绝访问的情况

    方法一:可以修改config.inc.php配置文件中的$cfg['Servers'][$i]['password'] = '你的密码'; 方法二:将config.inc.php配置文件中的$cfg[ ...

  10. Adding Cues (线索、提示) to Binary Feature Descriptors for Visual Place Recognition 论文阅读

    对于有想法改良描述子却无从下手的同学还是比较有帮助的. Abstract 在这个文章中我们提出了一种嵌入continues and selector(感觉就是analogue和digital的区别)线 ...