CSS选择器大全(CSS2)
2015-11-20 09:51
543 查看
CSS选择器(CSS2)
规则结构
每个规则都有两个基本部分:选择器和声明块。声明块由一个或多个声明组成,每个声明则是一个属性—值对。每个样式表由一系列规则组成。h1{ color: red; background: yellow; }
选择器分类
【0】通配选择器星号*代表通配选择器,可以与任何元素匹配
*{color: red;}
【1】元素选择器
文档的元素是最基本的选择器
html{color: black;} p{color: gray;} h2{color: silver;}
【2】类选择器(一组元素)
.div{color: red;}
【2.1】多类选择器
.div1.div2{color: red;}
【2.2】结合元素的类选择器
p.div{color: red;}
【3】ID选择器(一个元素)
#test{color: red;}
[注意]在实际中,浏览器并不会检查ID的唯一性,设置多个ID,可以为这些具有相同ID的元素应用相同样式,但在编写DOM脚本时只能识别该id的第一个元素。
【4】属性选择器(IE6-不支持)
根据元素的属性及属性值来选择元素
【4.1】简单属性选择器
h1[class]{color: red;} img[alt]{color: red;} a[href][title]{color: red;} #div[class]{color: red;} .box[id]{color: red;} [class]{color: red;}
【4.2】具体属性选择器
[class="test box"]{color: red;}
[注意]class里面的值以及顺序必须完全相同,并且不可多空格或者少空格
[id="tox"]{color: red;}
[注意]ID选择器和指定id属性的属性选择器并不是一回事,主要在于优先级不同。
a[href="http://www.baidu.com"][title="baidu"] {color: red;}
【4.3】部分属性选择器
[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素 [class ^="b"] 选择class属性值以"b"开头的所有元素 [class $="b"] 选择class属性值以"b"结尾的所有元素 [class *="b"] 选择class属性值包含"b"的所有元素 [class |="b"] 选择class属性值等于b或以b-开头的所有元素
【5】分组选择器
将要分组的选择器放在规则左边,并用逗号隔开
h1,p{color: red;}
【6】后代选择器
ul li{color: red;} div p, ul li{color: red;}
【6.1】子元素选择器(IE6-不支持)
ul > li{color: red;}
【7】相邻兄弟元素选择器(IE6-不支持)
div + p{color: red;}
[注意]两个元素之间的文本内容不会影响相邻兄弟结合符起作用
【8】伪类选择器
伪类顺序:link-visited-focus-hover-active
【8.1】静态伪类(只应用于超链接)
:link 未访问 :visited 已访问 a:link{color: red;} a:visited{color: green;}
【8.2】动态伪类(可应用于任何元素)
:focus 拥有焦点(IE7-不支持) :hover 鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类) :active 正被点击(IE7-不支持给<a>以外的其他元素设置伪类)
【8.3】:first-child(属于静态伪类)(IE6-不支持)
p:first-child 代表的并不是<p>的第一个子元素,而是<p>元素是某元素的第一个子元素 p > i:first-child 匹配所有<p>元素中的第一个<i>元素 p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素
【8.4】:lang 相当于|=属性选择器(windows->IE7-不支持)
p:lang(en) 匹配语言为"en"的<p>
【8.5】伪类的结合
a:visited:hover:first-child{color: black;}
[注意]顺序无关
【9】伪元素选择器
【9.1】:first-letter 设置首字母样式(只能用于块级元素)(IE6-不支持)
p:first-letter{color: red;}
【9.2】:first-line 设置首行样式(只能用于块级元素)(IE6-不支持)
p:first-line{color: red;}
【9.3】:before 在元素内容前面插入内容(IE7-不支持)
p:before{content:"text"}
【9.4】:after 在元素内容后面插入内容(IE7-不支持)
p:after{content:"text"}
[注意]所有伪元素都必须放在出现该伪元素的选择器的最后面。因此,如果写成 p:before em 就是不合法的
好的代码像粥一样,都是用时间熬出来的
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 注册表的组织结构
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码