css常见选择器

最新推荐文章于 2022-03-30 17:11:21 发布

古洺泩

最新推荐文章于 2022-03-30 17:11:21 发布

阅读量119

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46943580/article/details/117523715

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在了解了html的基本属性后，我们就可以做的更高级一点，让布局更好看一点！
首先讲解一下css的语法：
CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

在这里我们提到了选择器，选择器是css样式里面一个比较重要的属性，接下来我们就来具体了解一下选择器。

选择器：常用于查找或选取要设置样式的HTML元素
如下图所示：在这里插入图片描述
具体实现如下：
html:

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="shixun4.2.css" >
</head>
<body>
    <div>
       <table>
            <p class="id1">家用电器</p>
            <p class="id2">大家电</p>
            <tr>
               <td>平板电脑&nbsp;</td>
               <td>洗衣机&nbsp;</td>
               <td>冰箱</td>
            </tr>
           <tr>
            <td>空调&nbsp;</td>
            <td>烟机/灶具&nbsp;</td>
            <td>热水器</td>
           </tr>
           <tr>
                <td>冷柜/酒柜&nbsp;</td>
                <td>消毒柜&nbsp;</td>
                <td>家庭影院</td>
            </tr>
       </table> 
    </div>
    <div>
       <table>
        <p class="id21">生活电器</p>
           <tr>
               <td>电风扇&nbsp;</td>
               <td>净化器&nbsp;</td>
               <td>吸尘器</td>
           </tr>
           <tr>
            <td>净水设备&nbsp;</td>
            <td>挂烫机&nbsp;</td>
            <td>吸尘器</td>
        </tr>
       </table> 
    </div>
    <div>
       <table>
        <p class="id21">厨房电器</p>
           <tr>
               <td>榨汁机&nbsp;</td>
               <td>电压力锅&nbsp;</td>
               <td>电饭煲</td>
           </tr>
           <tr>
            <td>豆浆机&nbsp;</td>
            <td>微波炉&nbsp;</td>
            <td>电磁炉</td>
        </tr>
       </table> 
    </div>
    <div>
       <table>
        <p class="id21">五金家装</p>
           <tr>
               <td>淋浴/水槽&nbsp;</td>
               <td>电动工具&nbsp;</td>
               <td>手动工具</td>
           </tr>
           <tr>
            <td>仪器仪表&nbsp;</td>
            <td>浴霸/排气&nbsp;</td>
            <td>灯具</td>
        </tr>
       </table> 
    </div>

</body>
</html>

css

/* 类选择器 */
.id1{
    background: #0f7cbf;
    font-size: 18px;
    font-weight: bold;
    width: 300px;
    line-height: 35px;
    padding-left: 1em;
    color:white
}
.id2{
    background: #e4f1fa;
    font-size: 14px;
    font-weight: bold;
    padding-left: 2em;
    line-height: 30px;
    margin-top: -18px;
    width:290px;
    color: #0f7cbf;

}
/* 伪类 */
.id2:hover{
    text-decoration: underline;
    
}
.id21:hover{
    text-decoration: underline;
    
}
.id21{
    background: #e4f1fa;
    font-size: 14px;
    font-weight: bold;
    padding-left: 2em;
    line-height: 30px;
    margin-top: -2px;
    width:290px;
    color: #0f7cbf;
}
td:hover{
    text-decoration: underline;
    color: #F60;
}