HTML+CSS全解

最新推荐文章于 2025-06-01 00:32:15 发布

鑫♡心️

最新推荐文章于 2025-06-01 00:32:15 发布

阅读量132

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/weixin_59779876/article/details/124151206

版权

一，CSS的基础知识：

样式的引入：行间样式、内部样式、外链样式；
选择器类型：通配选择器（*{}）、标记名选择器（li{}）、类名选择器(.classname{})、id选择器(#{})；
选择器组合：包含选择器、子元素选择器、分组选择器、下一个选择器

选择器优先级：!important > 行间样式 > id > class > 标记名 > 通配

/*包含选择器：元素1 元素2*/
  /* CSS部分 */
.boxs .box1{
            background-color: red;
            width: 150px;
            height: 150px;
        }
//注意类名之间有空格

/*子元素选择器：元素1>元素2*/
/*注意：只选择指定元素的子元素（儿子标签）*/
 .boxs>.box1{
            background-color: aqua;
            width: 150px;
            height: 150px;
        }
/*兄弟选择器：元素1+元素2  元素1~元素2
 + 表示选择下一个兄弟元素；选择指定的第一个元素之后紧跟的元素（兄弟元素）
 ~ 表示后面所有兄弟元素*/
.box1+.box2{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
/*分组选择器：元素1，元素2*/
.box1,.box2{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
<!-- html部分 -->
<body>
   <div class="boxs">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
   </div>
</body>