巧妙利用css选择器编写样式或者页面布局

最新推荐文章于 2024-04-03 14:30:42 发布

不吃素的pig

最新推荐文章于 2024-04-03 14:30:42 发布

阅读量363

点赞数

分类专栏： css3 css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_38892710/article/details/107463404

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

1、::before或者::after

::before选择器在被选元素的内容前面插入内容

::after选择器在被选元素的内容后面插入内容

以::before为例的两个小例子

//css部分
.result{
  position: relative;
  padding-left:10px;
}
.result::before{
  content:"";  //必须得有centent，否则内容无法展示出来
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:4px;
  background-color: #3680ff;
}
//html
<span class="result">今日总结</span>

效果图：

//css部分
label::before{
  content:"*";
  color:red;
}

//html部分
<label for="name">姓名</label>
<input type="text" name="name" required>

效果图：

2、:root和var

:root选择器用匹配文档的根元素；可以在:root里面声明css的全局变量，并使用var()函数来读取变量

css变量是在想要声明的变量名前加--

:root{
   background-color: snow;
   font-size:16px;
   --article-color:#3680ff;
   --p-color:lime;
   --basic-padding:15px 0;
   --base-font:18;
}
article{
  color:var(--article-color);
}
p{
   color:var(--p-color);
   padding:var(--basic-padding);
   font-size:calc(var(--base-font)*1px); /* 可以用calc()来拼接变量和字符串 */
}

效果图：

缺点：var()函数IE目前版本不支持

3、利用:checked选择器、+相邻兄弟选择器和~实现纯css实现选项卡切换效果

+相邻兄弟选择器：两者有相同的父元素，选择该元素后紧接着第一个的元素

~选择元素后面所有的这个元素都起效

//css部分
.wrap_tag{
   position: relative;
   display: flex;
}
.tag{
   width:10%;
   height:40px;
   margin-right:20px;
   line-height: 40px;
}
.tag>.label{
   text-align: center;
}
.tag input{
   border:none; /* 去掉默认样式 */
   outline: none; /* 去掉默认样式 */
   -moz-appearance:none;  /* 去掉默认样式 */
   -webkit-appearance:none; /* 去掉默认样式 */
   position: absolute;
   top:0;
   width:10%;
   height:40px;
   cursor: pointer;
}
.content{
   position: absolute;
   top:100px;
   left:0;
   width:100%;
   display: none;
}
.tag input:checked + .label{
   background-color:#49abff;
   color:white;
}
.tag input:checked ~ .content{
   display: block;
}

//html部分
<div class="wrap_tag">
   <div class="tag">
      <!-- input的name要一致，否则单选框单一选择失效 -->
      <input type="radio" name="nav" checked> 
      <div class="label">首页</div> 
      <div class="content">首页页面</div>
   </div>
   <div class="tag">
       <input type="radio" name="nav">
       <div class="label">旅游景点</div> 
       <div class="content">旅游景点页面</div>
    </div>
    <div class="tag">
        <input type="radio" name="nav">
        <div class="label">酒店推荐</div>
        <div class="content">酒店推荐页面</div>
    </div>
    <div class="tag">
         <input type="radio" name="nav">
         <div class="label">个人信息</div>
         <div class="content">个人信息页面</div>
     </div>
</div>

效果图如下：