你知道吗？31种CSS选择器的应用_html/css_WEB-ITnose

选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。

　1. *

* { margin: 0; padding: 0; } 

　　星号选择器用于选取页面中的所有元素，可用于快速清除所有元素的 margin 与 padding，但最好只在测试的时候使用，而不要正式用在 CSS 文件中，否则会大大加重浏览器负担。此外，星号选择器也可以给父层的所有子元素设定样式，重复一遍，尽量少用这种方式：

#container * { border: 1px solid black; } 

　　兼容 IE6+

　2. #X

#container { width: 960px; margin: auto; } 

　　id 选择器，最常见的选择器用法之一，不可重复使用。

　　兼容 IE6+

　3. .X

.error { color: red; } 

　　class 选择器，也是最常见的选择器用法之一，与 id 选择器不同的是 class 选择器可同时选取多个元素，而 id 选择器只能给一个独一无二的元素设定样式。

　　兼容 IE6+

　4. X Y

li a { text-decoration: none; } 

　　后代选择器 (descendant selector)，选取 X 元素内的所有 Y 元素，比如上面这段代码将选取 li 标签内的所有链接。

　　兼容 IE6+

　5. X

a { color: red; } ul { margin-left: 0; } 

　　标签选择器 (type selector)，用于选取 HTML 标签 (tag)。

　　兼容 IE6+

　6. X:visited and X:link

a:link { color: red; } a:visted { color: purple; } 

　　:link 伪类选择器 (pseudo class selector) 用于选取所有未点击过的链接，而 :visited 则用于选取所有已访问过的链接。

　　兼容 IE6+

　7. X + Y

ul + p { color: red; } 

　　临近选择器 (adjacent selector)，选取紧邻在 X 元素后面出现的第一个元素，比如上面这段代码将选取 ul 元素后出现的第一个元素，也就是 p 元素。

　　兼容性 IE6+

　8. X > Y

div#container > ul { border: 1px solid black; } 

　　在第 4 条中，后代选择器 X Y 选取父层 X 内的所有 Y 元素；子选择器 X > Y 则只选取直接出现在父层 X 内的 Y 元素。比如下面的 HTML 结构中，#container > ul 选取直接出现在 div#container 内的 ul 元素，不包含嵌套在 li 内的 ul 元素：

     List Item     Child         List Item     List Item     List Item

      
查看更多关于你知道吗？31种CSS选择器的应用_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did104893