有关CSS3中的选择器(一)
来源:互联网 发布:mac定妆喷雾怎么用 编辑:程序博客网 时间:2024/05/22 04:52
关系选择器
1. 后代选择器(E F)
作为元素E的后代的任何元素F。
例如:ol元素中包含的li元素以及li元素中包含的a元素
2. 子选择器(E> F)
作为E元素的直接子元素的任何元素F。也就是说F不可以被嵌套!
<h1>This is <strong>very</strong><strong>very</strong> important.</h1>
<h1>This is<em> really<strong>very</strong> </em>important.</h1>
h1 > strong {color:red;}
第一个h1中的两个very都会变红,而第二个不会!
3. 相邻兄弟选择器(E +F)
匹配与E具有相同的父元素并为紧挨着E之后的任何元素F
例如:li+li 定位为指定容器中除第一个li之外所有li元素
4. 一般兄弟选择器(E ~F)
将匹配与E元素具有相同父元素并且标记中位于E之后的任何元素F
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>CSS3选择器</title><style type="text/css">*{margin:0;padding:0;}.demo {margin:0 auto;width: 300px;border: 1px solid #ccc;padding: 10px;height:30px;}ul{padding:0 auto;list-style:none;}li {float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 50%;text-align: center;background: #f36;color: green;margin-right: 5px;}li {background-color:gray; color:orange;}/*元素选择器*/.important {font-weight: bold;}.active {color: green;background: lime;}.items {color: #fff;background: #000;}.important.items {background:#ccc;}/*只有同时包括才可以改变属性*/.first.last {color: blue;}/*所以对于这个例子,样式blue并不起作用*//*后代选择器*/.demo li { color:blue;}ul > li {color:yellow; background:green;}/*好吧。。这个例子举的并不好。。。。*//*相邻兄弟选择器*/li+li {color:green;background:purple;}/*通用/一般兄弟选择器*/.active~li {color:yellow; background:green;}</style>></head><body><div class="demo"><ul class="clearfix"><li id="first" class="first">1</li><li class="active important">2</li><li class="important items">3</li><li class="important">4</li><li class="items">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li id="last" class="last">10</li></ul></div></body></html>
属性选择器
其实都是CSS2中引进的,CSS3扩展了这些属性选择器,支持基于模式匹配来定位元素!
1. E[attr]
选择具有某个属性的元素,并不在乎属性的值究竟是多少
a[href][title] {color:red;}//可以进行多个个属性的选择
*[title] {color:red;}//将包含title的所有元素变成红
2. E[attr=val]
选择具有某个特定属性固定值的元素相匹配,属性与属性值必须完全匹配
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
3. E[attr|=val]
*[lang|="en"] {color: red;}//将lang值为en和以en为开头的所有元素标记为红色
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p> //前三个将会被标记
4. E[attr~=val]
需要根据属性值中的词列表的某个词进行选择
p[class~="important"] {color: red;}//将类名中包含important的段落标记为红色
5. E[attr^=val]
[title^="def"]//选择title以def为开头的所有元素
6. E[attr $=val]
[title^="def"]//选择title以def为结尾的所有元素
7. E[attr *=val]
[atitle*="def"]//选择title中包含def子串的所有元素
- 有关CSS3中的选择器(一)
- 有关CSS3中选择器(一)
- CSS3中的选择器总结(一)
- CSS3选择器(一)
- CSS3(一)—— CSS3选择器
- css3选择器--分类(一)
- Css3学习笔记(一):选择器篇
- 《CSS3实战》笔记--选择器(一)
- CSS3选择器详解一
- CSS3的选择器(一)
- CSS3中的选择器
- CSS3中的各类选择器
- [教程] CSS3 选择器——基本选择器(一)
- [教程] CSS3 选择器——属性选择器(一)
- [教程] CSS3 选择器——伪类选择器(一)
- CSS3系列一(概述、选择器、使用选择器插入内容)
- css以及css3中的选择器
- CSS3 中的伪类选择器
- tomcat
- Strut2中action方法匹配、通配符的使用放安抚
- 停止hadoop2.2.0时提示no namenode to stop
- Linux学习-shell利用正则表达式验证邮箱合法性
- 快速解密ABE方案理解
- 有关CSS3中的选择器(一)
- 菜鸟程序猿开发注意事项
- 219C - Color Stripe-模拟
- android中ImageView的内存问题
- zkw线段树
- iOS编译错误类型
- Android中一条最长短信所占的字节数
- 连续子数组的最大和
- Matlab中的指针和在Matlab中注册c++dll的回调函数