css选择器

浏览数：15 / 时间：2015年06月09日

css选择器

　　大概有这么几类：ID选择器、类别选择器、标签选择器、后代选择器、伪类选择器、相邻同胞选择器、属性选择器

1、ID选择器　　

　 ID 选择器允许以一种独立于文档元素的方式来指定样式。

　　ID选择器和类选择器的区别：在一个文档中，ID选择器的值是唯一的且区分大小写，即id="first"只能在文档中出现一次，而类选择器可以出现多次，例如：class="info"可以出现多次。

　　　　格式： #idname

<html>
    <head>
        <title>css选择器</title>
    </head>
    <style>
        #first {
            color:red;
        }
        .test {
            color:blue;
        }
    </style>
    <body>
         <div id="first">
            由于ID选择器的优先级小于类选择器，所以这段话显示为红色，而"css选择器"为红色
            <p class="info">css选择器</p>
            <h1 class="info">css选择器</h1>
         </div>
    </body>
</html>

2、类选择器

类选择器有几种情况：

　　　 .info{ } 　　　　　　选择class="info"的所有元素

　　　　p.important{ } 　　　　　　　　选中p元素中所有class值为important的段落。p可以换位其他的元素，ep：a、table、dive等。

　　　　.first.second{ } 　　　　　　　　选中的是class="first second"的元素，这个元素包含为class="first "和class="second"设置的样式。

　　　　.first.third { } 　　　　　定义的样式适用于class="first third"和class="first third second",但是不适用于class="first second"

3、标签选择器（元素选择器）

　　　　p {}　　　　　　　　　　　　　　　p{}表示选择页面中所有的<p>元素

　　　　 div,p {} 　　　　　　　　　　　　　选择页面中所有<div>元素和<p>元素

4、后代选择器（包含选择器）

　　　　 div p {}　　　　　　　　　　　　　选择<div>元素内部的所有的<p>元素，即只要是包含在<div>元素中<p>元素都会被选中。

5、子元素选择器　　　　　　　　　　　　　　　　　　　

　　　　 div>p　　　　　　　　　　　　　　选择父元素为<div>元素的所有<p>元素注：这里选中<p>元素的前提是这个<p>元素的父元素必须是个<div>元素

<html>
    <head>
        <title>css选择器</title>
    </head>
    <style>
        p > strong {
            color:red;
        } 
        div > a {
            color:green;
        }
    </style>
    <body>
        <div>
　　　　　　　<!-- 下面这句话中只有“重要”两个字会变为红色，“很”字则不会，因为“很”字对应的<strong>标签是<em>的子标签，而不是<p>元素的子标签 -->
            <p>这个<em><strong>很</strong></em><strong>重要</strong></p>
            <h2><a href="#">这是个链接</a></h2>
　　　　　　　<!--  这有下面的这个链接会变为绿色，因为这里的<a>元素才是<div>的子元素，而上面的链接是<h2>的子元素 -->  
            <a href="#">这也是一个链接</a>  
        </div>
    </body>
</html>

6、伪类选择器　　　　用于像某些选择器添加特殊的效果。

　　　 a:link {color:blue;}　　　　/* 未访问的链接 */

　　　　a:visited {color:red;}　　　/* 已访问的链接 */

　　　　a:hover {color:green;} 　　/* 鼠标移动到链接上 */

　　　　a:active {color:yellow;} 　　/* 选定的链接 */

　　　　　　　注意：在css定义中，a:hover必须被置于a:link和a:visited之后才是有效的。在css定义中，a:active必须置于a:hover之后，才是有效的。

　　　　first-child伪类（css2）

<html>
    <head>
        <title>css选择器</title>
    </head>
    <style>
        p:first-child {
            color:red;
        }
        a:first-child {
            color:blue;
        }
    </style>
    <body>
        <div>
            <p>first</p>
            <p>second</p>
            <a href="#">third</a>
            <a href="#">forth</a>
        </div>
    </body>
</html>

　　　　　之所以“first”是红色，是因为“first”所在的<p>元素是<div>元素的第一个子元素。但是这里的“third”不会变为蓝色，因为“first-child”表示的是某个元素(这里是<div>元素)，

的第一个子元素，并不会因为元素的不同而区分不同元素间的第一个。

7、相邻同胞选择器

　　　　div+p 　　　　　　　　　　　　　　选中的是<div>元素中紧跟在<div>元素后面的第一个<p>元素。所以“first”会变为红色。

<html>
    <head>
        <title>css选择器</title>
    </head>
    <style>
        div+p {
            color:red;
        }
    </style>
    <body>
        <div>
            
        </div>
        <p>first</p>
        <p>second</p>
    </body>
</html>

8、属性选择器

　　　 *[title] {color:red;}　　　　　　　　　　将包含标题（title）的所有元素变为红色。

　　　　a[href] {color:red;}　　　　　　　　　　将只对有href属性的<a>元素变为红色。

　　　　a[href][title] {color:red;}　　　　　　　只将同时拥有href和title属性的<a>元素变为红色。

　　　　a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

　　　　　　　　　　　　　　　　　　　　　　　　将拥有href属性同时属性值为"http://www.w3school.com.cn/about_us.asp"的<a>元素变为红色。

　　　　[title~=hello] {color:red;}　　　　　　　<a title="hello world" >hello world</a>
　　　　　　　　　　　　　　　　　　　　　　　　<p title="hello">hello world</p>
　　　　　　　　　　　　　　　　　　　　　　　　<a>和<p>元素都会被设置为红色。

　　　　[属性|=value]　　　　　　　　　　　　　用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
　　　　[属性^=value]　　　　　　　　　　　　匹配属性值以指定值开头的每个元素。
　　　　[属性$=value] 　　　　　　　　　　　　匹配属性值以指定值结尾的每个元素。
　　　　[属性*=value]　　　　　　　　　　　　　匹配属性值中包含指定值的每个元素。

css选择器,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css选择器