自学前端总结4-权重知识点

最新推荐文章于 2023-09-01 14:34:32 发布

渴望看海的少年

最新推荐文章于 2023-09-01 14:34:32 发布

阅读量492

点赞数

分类专栏：前端基础文章标签： css html5 html

本文链接：https://blog.csdn.net/despaira/article/details/119899019

版权

本文总结了CSS中权重的排序，从大到小依次是：!important、行内样式、ID选择器、类选择器、元素选择器、继承以及通配符*。此外，还介绍了设置背景底色透明度的方法，可以使用opacity:.5属性来实现。

摘要由CSDN通过智能技术生成

<!--选择器的权重，从大到小依次为：！important/行内式/ID选择器/类选择器/元素选择器/继承-*-->
  <!-- 权重叠加，ul和li一起的权重是0,0,0,2，单独的li的权重是0,0,0,1。重点提高权重可以使用权重叠加 -->
  <body>
    <div class="div2">
      <div class="div1">
        <a href="#">文字1</a>
        <a href="#">文字2</a>
        <a href="#">文字3</a>
        <a href="#">文字4</a>
        <a href="#">文字5</a>
        <a href="#">文字6</a>
      </div>
    </div>
  </body>

css部分：

.div1 {
  width: 500px;
  height: 500px;

  background-color: #000000;
  /* background-image: url("../HTML/demo04-1.jpg"); */

  /* 设置背景图片是否平铺 */
  background-repeat: no-repeat;
  /*控制背景图片在盒子中的显示位置，如果以数字，x在前，y在后；
    如果只有一个数值&