CSS 笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/wozhenshiful/article/details/129456627

本文介绍了CSS中去除下划线的方法，样式穿透的使用，多类选择器的应用，以及@media媒体查询的实践。还涵盖了动画过渡、文本省略、阴影、模糊效果、背景图片设置和滚动条样式的自定义。此外，讨论了元素hover时的样式改变，包括父元素、子元素和相邻元素的选择器用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去除下划线
text-decoration：none;

----------------样式穿透这样用才有用--------------------

穿透选择器 .avue-form__group.avue-form__group--flex {
	
}
 ----------------------------------------------------
多类选择
div.aa.bb 选择的是 <div class="aa bb"></div>

//@media的使用方法
@media (min-width: 1420px) {
  .app_aside {
    position: absolute;
    top: 200px;
    left: calc((100vw - 940px)/2 - 210px);  //计算整体长度减去main主体长度/2再减去显示的长度
    width: 210px;
    transition: left 0.25s;
  }
}

      //动画效果，当元素向左右移动时有0.25的动画过渡
      transition: left 0.25s;

      //2行文本省略，配合高度和行高

          overflow: hidden;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          display: -webkit-box;
          display: box;

       第一个参数是左右阴影长度，第二个参数是上下阴影长度，第三个参数是模糊的距离，第四个参数是阴影的尺寸，第五个参数是阴影的颜色
	第六个参数决定阴影是在外部还是在内部的阴影不写默认外部（inset表示内部）

          box-shadow: 10px 0px 10px #000000;

    /* 更改目标元素的滚动条大小为0*/
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
    }

//模糊，与背景图片同用的话不能使用fixed属性不然会有白边会随模糊值而变大
       filter:blur(10px);

//设置背景图片必须要设好宽高不然无法显示
	height:100%;
	width:100%;
	background-image:url("/static/img/1.jpg")


        <div id="mapDiv" class="hescgis_map">
            <div id=buttonDiv><span id="buttonFlag" ></span>
            <button id="buttonOnMap" >按钮</button></div>
            <div id="location"></div>    
        </div>

1、改变本身样式

       #buttonOnMap:hover {
            background-color: rgba(43, 143, 243, 0.63);
        }

2、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...}这种方式定义CSS样式来控制

       #mapDiv:hover #buttonOnMap{
            background-color: rgba(43, 143, 243, 0.63);
        }

3、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式；

        #buttonFlag:hover + #buttonOnMap{
            background-color: rgba(43, 143, 243, 0.63);
        }