CSS之选择器与列表

来源:互联网 发布:火影忍者ol精炼数据 编辑:程序博客网 时间:2024/05/17 03:59
选择器:
派生选择器:
就是使用有多层标签时候将标签依次用空格列出从而使得特定部分产生效果
类选择器:
在css样式中使用 .classname{}来定义class
id选择器:
在css样式中使用 #IDname{}来定义id选择器

coding:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>div标签 <a href="http://www.baidu.com"> baidu</a></div>
    <a id="aid"> baidu</a>
    <div class="divclass"> divclass</div>
</body>
</html>

CSS:
div a{
    color: aqua;
}
#aid{
    color: brown;
}
.divclass{
    color: darkmagenta;
} 
列表: 
 
list-miage:url(“”),将列表项前面的圆点改成图片

表格里面一般要使用多个选择器组合达到美观的效果
如:ID选择器与派生选择器一起使用
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <table id="tb" border="1px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr >
            <td>张三</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr  class="a">
            <td>张三</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr  class="a">
            <td>张三</td>
            <td>男</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>
CSS:

#tb{
    background-color: aliceblue;
    width: 500px;
    height: 400px;
    border: 1px;
    border-collapse: collapse;
}
#tb th{

        background-color: aqua;//id选择器与派生选择器一起用以空格隔开
}
#tb tr.a{
    background-color: chartreuse;   //元素里面的一个类用点隔开
}
#tb tr{
    text-align: center;
}

0 0
原创粉丝点击