time 
设为首页】【收藏本站

香港白小姐马报68: 白小姐彩图

当前位置: 白小姐彩图 > WEB教程 > CSS教程 > CSS选择器总结

CSS选择器总结

时间:2013-10-15 23:29 点击:6610次 字体:[ ]




白小姐彩图 www.5vq5o.cn 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下。

优先级

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器

7.浏览器自定义

同一级别

同一级别中后写的会覆盖先写的样式

 

基础选择器

选择器 含义
* 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
#id id选择器,匹配特定id的元素
.class 类选择器,匹配class包含(不是等于)特定类的元素
element 标签选择器

 

  1. *  
  2.         {  
  3.             /*页面所有元素都使用*/ 
  4.             border:0;  
  5.         }  
  6.  
  7.         #test 
  8.         {  
  9.             /*id=test 的元素*/ 
  10.             background-color:#0e0;  
  11.         }  
  12.  
  13.         .staus  
  14.         {  
  15.             /*含有类status的元素*/ 
  16.             border:0;  
  17.         }  
  18.  
  19.         div  
  20.         {  
  21.             /*页面所有div*/ 
  22.              background-color:#0e0;  
  23.         }  

组合选择器

选择器 含义
E,F 多元素选择器,用”,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
E+F 直接相邻选择器,匹配E元素之后相邻同级元素F
E~F 普通相邻选择器(弟弟选择器),匹配E元素之后同级元素F(无论直接相邻与否)
.class1.class2 这个姑且也算一个吧,没什么名字,匹配类名中既包含class1又包含class2的元素

我就不一一举例子了,选择器并不是只能写两层,发现有些小朋友有这种误解,认为只能写E>F这样的,我们写可以写E>F.class Element这样,你要你搞得定优先级



本文地址 : //www.5vq5o.cn/plus/view-213926-1.html
标签: 选择器 css
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:

  • Valentino 2017秋冬高级定制大秀 2018-09-08
  • 中国经济充当了世界经济发展的火车头。但是,作为世界经济火车头的中国,在世界主要经济体股市都走牛的情况下,为何熊途漫漫?这种不正常的现象,背后是我们资本市场的投融 2018-07-14
  • 别空谈,说说看,这个“简单的逻辑关系”是什么关系? 2018-07-13
  • “讲课带着泥土味,我们都爱听” 2018-07-13
  • 习近平:绿水青山就是金山银山 2018-07-12
  • 端午思屈原,为什么《橘颂》是一篇伟大的作品 2018-07-11
  • 2018年焉耆县旅游美食文化推介会在库尔勒市举行 2018-07-10
  • 《中国气候变化蓝皮书》:年平均气温显著上升 2018-07-10
  • 24小时智能无人便利店落户唐山 2018-07-09
  • 理货员忙不过来 宁波球迷把啤酒销量喝成井喷状态 2018-07-09
  • 回复@寻找失落的真理:跟你的铁环玩去!咱真的没兴趣碾压你也。 2018-07-08
  • 易烊千玺押中高考作文题?不仅会押,今年还唱过! 2018-07-07
  • 【北京达世行世纪车型报价】北京达世行世纪4S店车型价格 2018-07-06
  • 欢迎访问《北京体育大学学报》编辑部网站 2018-07-05
  • 774| 863| 312| 26| 739| 625| 164| 105| 822| 486|