css2.09_其他选择器的补充
来源:互联网 发布:c语言非递归二叉树深度 编辑:程序博客网 时间:2024/05/21 09:18
儿子选择器>:
div>p{color: red;}
IE6不兼容、IE7开始兼容,>符号就是儿子选择器
我们先看看后代选择器的示例(引出儿子选择器):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div p{color: red;}</style></head><body><div><p>我是段落1</p><p>我是段落2</p><ul><li><p>我是段落3</p></li></ul></div></body></html>运行结果:
我们通过上面代码可以看出,所有的p都是div的后代,所以运行的结果发现所有p都变红色了,接下来我们在看看要讲的儿子选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div>p{color: red;}</style></head><body><div><p>我是段落1</p><p>我是段落2</p><ul><li><p>我是段落3</p></li></ul></div></body></html>运行的结果:
我们看出只有段落1与段落2变红,原因是段落1与段落2才是div的儿子,而段落3只是div的后代,不是div的儿子,所以没有变红
序选择器:
:冒号表示序选择器
div p:first-child{color: red;}
接下来我们看看示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div p:first-child{color: red;}</style></head><body><div><p>我是段落1</p><p>我是段落2</p><ul><li><p>我是段落3</p></li></ul></div></body></html>运行结果:
原因:段落1是div的第一个孩子,所以变红。段落3是div后代中li标签的第一个孩子,所以段落3也变成了红
注意:
除了:first-child还有::first-letter最后一个孩子下一个兄弟选择器+
+表示下一个兄弟选择器
h2+p{color: red;}我们来看一下示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">h2+p{color: red;}</style></head><body><div><h2>我是一个标题</h2><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><h2>我是一个标题</h2><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><h2>我是一个标题</h2><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><h2>我是一个标题</h2><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p></div></div></body></html>
运行的结果:
1 0
- css2.09_其他选择器的补充
- css2.5_类选择器
- css2.6_后代选择器
- css2.7_交集选择器
- CSS2的选择器
- css2.08_并集选择器(分组选择器)
- CSS2选择器
- css2的几种特殊选择器
- 选择器的补充
- 标签选择器的补充
- css2选择器写法大全
- CSS选择器大全(CSS2)
- CSS2-7种选择器
- CSS3及CSS2中易忘记的选择器记录
- css2.08_通配符
- CSS2/3选择器详细总结
- web设计人员必读 css2选择器(css2 Selectors)
- XML选择器的使用二,补充
- 栈的顺序表示和实现
- 【Oracle】ORA 01810 格式代码出现两次
- 【腾讯Bugly干货分享】微信终端跨平台组件 mars 系列(一) - 高性能日志模块xlog
- HDU 2833 WuKong 最短路
- 一个数组有除了两个元素只出现一次,其他元素全部都出现了两次,请找出只出现一次的两个元素,并输出
- css2.09_其他选择器的补充
- 浅谈“区块链”
- 南京、杭州十一游玩攻略
- 在Android Studio环境下获取SHA1
- C++设计模式——享元模式
- 如果让你重新选择,你还会不会选择编程这条路???
- 程序设计中的“分层思想”
- Android中使用FragmentTabHost实现底部导航
- svn客户端访问不了服务器解决办法