您的位置：首页 > Web前端 > CSS

CSS之选择器与列表

2016-01-23 23:44 447 查看
选择器：
派生选择器：
就是使用有多层标签时候将标签依次用空格列出从而使得特定部分产生效果
类选择器：
在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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航