css选择器

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

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