css 选择器

<h3>1.常见选择器：</h3>

<style type="text/css">
    /*标签选择器*/
    span{
        color:#00F;p
        font-size:24px;
    }
    
    /*类选择择器(巧记:类的对象一般是.语法调用的)*/
    .classStyle{
        color:#FFF;
        background-color:#3FF;
        font-size:18px;
    }
    
    /*id选择器*/
    #idStyle{
        color:#CC6;
        font-size:24px;
    }
    
    /*交集选择器(也叫父子选择器,只有在使用父选择器的基础上子选择器才会起作用)*/
    #idStyle span{
        color:#F00;
    }
    
    /*并集选择器(当发现两个选择器的属性一样时,可以使用,目的只是减少代码量)*/
    .style1,.style2{
        color:#F0F;
        font-family:Tahoma, Geneva, sans-serif;
    }
</style>

<style type="text/css">

/*伪类选择器(注意顺序问题,应该是如下顺序)*/
    a:link{   /*正常情况下*/
        color:black;
        text-decoration: none;
    }
    
    a:visited{ /*访问过后*/
        color:#00F;
    }
        
    a:hover{  /*移动鼠标经过*/
        color:#F00;
        text-decoration: underline;/*加下划线*/
    }
        
    a:active{  /*按下不抬手*/
        color:#0FF;
        text-decoration:none;/*去掉下划线*/
    }
    
</style>
</head>
<body>
    <span>测试标签选择器</span>
    <p class="classStyle">测试类选择器</p>
    <p id="idStyle">测试id选择器</p>
    <p id="idStyle">测试<span>父子</span>选择器</p>
    <!--只有在使用了父选择器的标签中再使用子选择器,该父子选择器才会起作用-->
    <p class="style1">测试并集选择器1</p>
    <p class="style2">测试并集选择器2</p>
    <a href="http://www.baidu.com" target="_blank">百度链接</a>
</body>

cssTest.gif

一般常用的选择器是id选择器和类选择器,那么这两个都在什么场景下使用呢?
一个id选择器一般在一份html中只会被一个标签使用,而一个类(class)选择器则可以被无数标签使用; 所以id选择器的定义是很有针对性的,针对某一个层次的标签等;
一个class选择器就很大众,通用;

<h3>2.选择器的优先级：</h3>
优先级：
在同时使用多个选择器且选择器有相同属性的情况下,id选择器>类选择器>标签选择器
如都有color:属性;那么会按照上面的顺序来;

<style type="text/css">
    #id{
        color:#F00; /*红*/
        font-size:20px;
    }
    
    p{
        color:#0F0; /*绿*/
        font-size:36px;
    }
    
    .class{
        color:#00F; /*蓝*/
    }
    
</style>
</head>

<body>
<p class="class" id="id">id/类/标签 选择器优先级测试</p>
<span class="class" id="id">id/类选择器测试</span>
<p class="class">类/标签选择器测试</p>
</body>

Paste_Image.png

<h3>3.练习：</h3>
需求:在鼠标移动到的某行(不包括标题)上时显示红色

<style type="text/css">
    tbody tr:hover{
        background-color:#F00;
    }
</style>
</head>

<body>
<table border="1px" width="200px" height="100px">
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    <tbody>
        <tr>
            <td rowspan="2">丁昌江</td>
            <td>java班</td>
            <td>83</td>
        </tr>
        <tr>
            <td>ios班</td>
            <td>99</td>
        </tr>
        <tr>
            <td>吴云飞</td>
            <td>java班</td>
            <td>100</td>
        </tr>
    </tbody>
</table>
</body>

cssTest.gif

css 选择器

推荐阅读更多精彩内容