也许你了解了基本的 id
,class
和descendant
选择器,并且整天都在调用,如果是这样的话,那你正在错过拥有灵活性更大的选择器。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。
1. *
1 2 3 4 |
; html-script: false ]* { margin: 0; padding: 0; } |
在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空margin
和padding
。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
*
也可以用来选择某元素的所有子元素。
1 2 3 |
; html-script: false ]#container * { border: 1px solid black; } |
它会选中#container
下的所有元素。当然,我还是不建议你去使用它。
DEMO
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
2. #X
1 2 3 4 |
; html-script: false ]#container { width: 960px; margin: auto; } |
在选择器中使用#
可以用id来定位某个元素。大家通常都会这么使用,使用的时候大家还是得相当小心的。
需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?
id
选择器是很严格的并且你没办法去复用它。如果可以的话,首先试试用标签名字,HTML5中的新元素,或者是伪类。
DEMO
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
3. .X
1 2 3 |
; html-script: false ].error { color: red; } |
这是个class
选择器。它跟id
选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class
。当你要对某个特定的元素进行修饰那就是用id
来定位它。
DEMO
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
4. X Y
1 2 3 |
; html-script: false ]li a { text-decoration: none; } |
下一个常用的就是descendant
选择器。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的a
元素,而只需要定位li
标签下的a
标签?这时候你就需要使用descendant
选择器了。
专家提示:如果你的选择器像X Y Z A B.error
这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。
DEMO
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
1 2 |
; html-script: false ]a { color: red; } ul { margin-left: 0; } |
如果你想定位页面上所有的某标签,不是通过id
或者是’class’,这简单,直接使用类型选择器。
DEMO
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X:visited 和 X:link
1 2 |
; html-script: false ]a:link {color:red;} a:visited {color: purple;} |
我们使用:link
这个伪类来定位所有还没有被访问过的链接。
另外,我们也使用:visited
来定位所有已经被访问过的链接。
DEMO
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
7. X+Y
1 2 3 |
; html-script: false ]ul + p { color: red; } |
这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有ul
标签后面的第一段,并将它们的颜色都设置为红色。
DEMO
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8. X>Y
1 2 3 |
ss和 descendant 选择器,并且整天都在调用,如果是这样的话,那你正在错过拥有灵活性更大的选择器。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。
1. *
在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空
它会选中 DEMO
2. #X
在选择器中使用
3. .X
这是个
4. X Y
下一个常用的就是 专家提示:如果你的选择器像
5. X
如果你想定位页面上所有的某标签,不是通过
6. X:visited 和 X:link
我们使用
7. X+Y
这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有
8. X>Y
|