兄弟选择器 E + F
兄弟选择器在IE7下支持会有bug,特记于此
如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效 代码如下
E + Fp + p{color:red} <p class="test1">some message 01</p>
<p class="test2">some message 02</p>
<p class="test3">some message 03</p>
<!-- some message -->
<p class="test4">some message 04</p>
<p class="test5">some message 05</p>
<p class="test6">some message 06</p>
IE7下 .test2,.test3,.test5,.test6会是红色,其余是黑色
后代选择器 E > F ,在IE7(Q)版本中,如果父元素与子元素有html注释,也会失效(未测试)
通用兄弟选择器没有这一个bug
属性选择器会 ^ | 这两种 有一点要注意,如果一个元素有多个类名,要找的类名必须是第一位,否则,会忽视它,尽管符合条件
.clearfix{overflow: hidden; _zoom: 1;}
.demo{width: 300px;border: 1px solid #ccc;padding: 10px;}
.demo a{float:left;display: block;height: 20px;line-height:20px; width: 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-align: center;background:#f36;color: green;margin-right: 5px;text-decoration: none;}
.demo a[lang^="zh"]{background:yellow} <div class="demo clearfix">
<a class="test fsy_1" href="" lang="zh">01</a>
<a class="test fsy_2" href="" lang="zh-cn">02</a>
<a class="test fsy_3" href="" lang="cn-zh zh-en">03</a>
<a class="test fsy_4" href="">04</a>
<a class="test fsy_5" href="">05</a>
<a class="test fsy_6" href="">06</a>
<a class="test fsy_7" href="">07</a>
<a class="test fsy_8" href="">08</a>
<a class="test fsy_9" href="">09</a>
<a class="test fsy_10" href="">10</a>
</div>
关于nth-child与nth-of-type选择器的差别
1.两者之前都可以不写元素选择器,如果不写没有任何差别
2.如果写元素选择器,nth-child()中的数值代表的是在父元素中的索引位置,而nth-of-type中的数值指的是元素在父元素中相同元素间的位置
1 <div class="demo clearfix">
2 <!-- some message -->
3<span>span1</span>
4 <a href="">a1</a>
5 <a href="">a2</a>
6 <a href="">a3</a>
7 <a href="">a4</a>
8 <span>span2</span>
9 <a href="">a5</a>
<a href="">a6</a>
<a href="">a7</a>
<a href="">a8</a>
<span>span3</span>
<a href="">a9</a>
<a href="">a10</a>
16 </div>
.demo a{color:#000;text-decoration: none;font-size:30px;}
.demo :nth-child(n+2){color:red;font-size: 16px;}
.demo a:nth-child(2){color:blue;background:yellow;}
.demo a:nth-of-type(3){color:green;background:red;}
.demo span:nth-child(2){color:black;font-size:100px;}
.demo span:nth-of-type(2){color:yellow;background:gray;}
.demo :nth-of-type(n+7){color:#139ac7;background:#333;}
运行结果如下:
兄弟选择器 E + F的更多相关文章
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- CSS相邻兄弟选择器
相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用
1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计
-------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(ve ...
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- CSS选择器之兄弟选择器(~和+)
今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我 ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
随机推荐
- git生成密钥
安装 Git-1.9.4-preview20140611 1 通过 ssh-keygen 但生成的位置却是C:\Users\Admin\AppData\Local\VirtualStore\Progr ...
- Python文件处理之文件打开方式(一)
Python中打开一个文件是同过open函数来打开的,并返回一个文件对象,以下为open函数的参数: open(name[, mode[buf]]) name:文件路径 mode:打开方式 buf:缓 ...
- java eclipse 连接数据库全过程
1.需要下载一个jar包.地址 http://pan.baidu.com/s/1i50LRId 2.代码如下: import java.sql.*; public class Mytest { pub ...
- 关于接口使用getType的方法的问题
C#代码如下: public interface IConfigInfo { } public class A : IConfigInfo { } public c ...
- DBUtils框架
一.O-R Mapping 简介 一]概念:可以理解为对象和数据库的映射. 二]常用O-R Mapping映射工具 1)Hibernate(全自动框架) 2)l ...
- ural 1192 Ball in a Dream
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...
- JavaScript 中的数字和日期类型
本章节介绍如何掌握Javascript里的数字和日期类型 数字EDIT 在 JavaScript 里面,数字都是双精度浮点类型的 double-precision 64-bit binary form ...
- 文件上传[Uploadify]
Uploadify文件上传插件 Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合 ...
- HDU3727--Jewel (主席树 静态区间第k大)
Jewel Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- Onlylady介绍
Onlylady介绍 Onlylady介绍