708笔记

基础选择器

一、元素选择器：以标签名为选择器

语法

<style>
  p{
      color:red;
  }
</style>

<p>段落标记</p>
二、id选择器：id是唯一的，id选择器一般和js结合使用

语法

<style>
  #id值{
      color:red;
  }
</style>

<p id=“id值”>段落标记</p>
三、类选择器

语法

<style>
  .类名{
      color:red;
  }
</style>

<p class="类名">段落标记</p>
//引用多个类样式，类名之间用空格隔开
<p class="类名1 类名2">段落标记</p>

id和class同名没有影响，但是尽量不用同名，名称都用英文

复合选择器

一、后代选择器

后面的选择器是前面选择器的后代，选择器之间用空格隔开

.out .inner p {
  color: palevioletred;
}

<div class="out">
      <div>
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
    </div>
二、子代选择器

后面选择器是前面选择器的儿子，选择器之间用 > 隔开

.out > .one > .inner {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

   <div class="out">
      <div class="one">
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
      <p>段落标记</p>
      <div class="inner">inner</div>
    </div>

后代和子代选择器可以一起用 .out>.one .inner

三、群集选择器

有同样的样式，用逗号隔开

<style>
      .one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">sssssss</div>
    <div class="two">two</div>
  </body>

优先级

引入方式的优先级

内联样式优先级最高，内嵌样式和外联样式使用的是就近原则

选择器的优先级

！important >id选择器（100）>类选择器（10）>元素选择器（1）

<style>
      .main {
        color: red;
      }

      #one {
        color: blue;
      }

      div {
        color: yellow !important;
      }
    </style>
  </head>
  <body>
    <div id="one" class="main">我是div标记</div>
  </body>
复合选择器优先级：需要计算
<style>
      /*11  */
      .one p {
        color: red;
      }

      /* 21 */
      .one > .active > p {
        color: yellow;
      }

      /* 1 */
      p {
        color: blue;
      }

      /* 11 */
      .active > p {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div class="active">
        <p>我是p标记</p>
      </div>
    </div>
  </body>

*对于嵌套的元素加样式注意有些css属性会继承，比如字体大小

posted on 2022-07-11 10:31  星野落  阅读(28)  评论(0)    收藏  举报

导航