CSS基础(三):选择器
来源:互联网 发布:eve1200炮数据 编辑:程序博客网 时间:2024/05/29 16:23
常用选择器
元素选择器,即html标记如div,ul,li,p,h1~h6,table等。
p { font-size:14px; }h1 { color:#F00; }
复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器和ID选择器,这两个选择器之间不能有空格。
p.special { color:#red}.special { color:#green; }
后代选择器,用来寻找特定元素或元素组的后代,后代选择器由其他两个选择器之间的空格表示。在这里只有h2标记里面的字体显示为红色,并且有10px的内边距。
<div>测试1<h2>测试1</h2></div>
div h2{color:#F00;padding:10px;}
id选择器,标有特定 id 的 HTML 元素指定特定的样式,用#来表示。id 属性只能在每个 HTML 文档中出现一次。
<div id="main"></div>
#main {font-size:18px;}
类选择器,标有class的 HTML 元素指定特定的样式,用.来表示。类名的第一个字符不能使用数字。
<div class="main"></div>
.main {font-size:18px;}
伪类,表示表单元素或链接的状态。
如a:link,a:hover,a:visited,a:active,分别为用于链接尚未被用户访问的状态,用于用户移动他们的鼠标在元素上,而尚未触发或点击它的时候,用于用户访问过的链接,用于用户点击元素的情况。
通用选择器
像通配符的作用,可以匹配所有元素,由*表示,对页面上所有的元素应用样式。例如删除每个元素上默认的浏览器内边距和外边距。但是使用*这种方式加载很慢,不建议使用。
* {margin:0; padding:0;}
高级选择器
子选择器,选择元素的直接后代。这个与后代选择器不一样,后者指选择一个元素的所有后代。
<ul id="nav"><li>1</li><li>1</li><li> <ul> <li>2</li> <li>2</li> </ul></li></ul>
#nav>li {padding-left:20px;}
在这个例子中,只有外层列表的li会有20px的左边距,内层嵌套的不会有影响。
相邻同胞选择器,定位同一个父元素下某个元素之后的元素。
h2 + p {font-size:18px;}
属性选择器,根据某个元素的属性是否存在或属性值来寻找元素。
a[title=”test”] {color:#F00;}
CSS的优先级
如何计算指定选择器的优先级?如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1
- 第一个数字(a)通常就是0,除非在标签上使用style属性;
- 第二个数字(b)是该选择器上的id的数量的总和;
- 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red]);
- 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等);
- 通用选择器(*)是0优先级;
- 如果两个选择器有同样的优先级,在样式表中后面的那个起作用。
让我们看几个例子,这样或许比较容易理解些:
- #sidebar h2 — 0, 1, 0, 1
- h2.title — 0, 0, 1, 1
- h2 + p — 0, 0, 0, 2
- #sidebar p:first-line — 0, 1, 0, 2
在下面的例子中,第一个将会起作用,因为它比第二个优先级高:
- #sidebar p#first { color: red; } — 0, 2, 0, 1
- #sidebar p:first-line { color: blue; } — 0, 1, 0, 2
文章参考
http://www.qianduan.net/taming-advanced-css-selectors.html
http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
- CSS基础(三):选择器
- html css层叠样式基础(常用选择器)(三)
- CSS中的三种基础选择器,
- CSS(三)— 选择器
- CSS基础(1.选择器)
- CSS学习笔记(三)--CSS选择器
- HTML+CSS基础(七):CSS选择器
- 从零开始学_JavaScript_系列(三)——CSS相关(基础、选择器、position、div)
- 【CSS】——三大基础选择器以及优先级
- HTML与CSS基础之伪类选择器(三)
- (转)css(三 派生选择器)
- css三种选择器
- CSS入门系列(三)关联选择器&组合选择器
- css学习(一)-CSS基础、css选择器
- CSS基础(三)
- 【CSS笔记三】CSS选择器
- css选择器(很基础哦!)
- CSS 基础(024_属性选择器)
- Android 二维码 生成和识别(附Demo源码)
- Linux出现Error: xz compression not available
- 不看星创客精英五四节 竟不知道五四还可以这样过
- java集合04--fail fast机制原理以及解决办法
- 针对pod抽风 莫名报缺失.h文件
- CSS基础(三):选择器
- Android 快速开发系列 ORMLite 框架最佳实践
- service
- Apache-dbutils 简介及事务处理
- 解决 googel 无法直接跳转网页打开搜索结果
- 移动端破解TLS加密的数据的设计思路
- 画虚线
- Spring MVC获取ApplicationContext
- AYITACM2016省赛第三周 L - Anniversary party(树形dp)