前端:CSS(二)---标签选择器,类选择器,id选择器,层次选择器

  • 选择器

作用:选择页面上某一个或某一类元素

  1. 基本选择器:

    • 标签选择器 选择一类标签,标签{}

      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>标签选择器title>
          <style type="text/css">
              /*标签选择器,会选择页面上所有
                这个标签的元素
                color颜色   background背景颜色
                border-radius圆角边框
                font-size字体大小
              */
              h1{
                  color: red;
                  background: yellow;
                  border-radius: 50px;
              }
              p{
                  font-size: 80px;
              }
          style>
      head>
      <body>
      <h1>你好h1>
      <h1>世界h1>
      <p>Hellop>
      body>
      html>
      
    • class 类选择器 选择所有class属性一致的标签,.class名称{}

      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>类选择器title>
          <style>
              /*类选择器格式:
                  .class的名称{}
                类选择器的优点,可以多个标签归类,
                使用同一个class,可以实现复用
              */
              .one{
                  color: red;
              }
              .two{
                  color: #3b7580;
              }
          style>
      head>
      <body>
      
      <h1 class="one">标题一h1>
      <h1 class="two">标题二h1>
      <h1 class="one">标题三h1>
      body>
      html>
      
    • id 选择器 id全局唯一,#id名{}

      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>id选择器title>
          <style>
              /*id选择器格式:
                  #id名称{} id必须保证全局唯一
              */
              #one{
                  color: #80351c;
              }
              .two{
                  color: #8bbb2b;
              }
              h1{
                  color: #bb7639;
              }
          style>
      head>
      <body>
      <h1 id="one" class="two">标题1h1>
      <h1 class="two">标题2h1>
      <h1 class="two">标题3h1>
      <h1>标题4h1>
      <h1>标题5h1>
      body>
      html>
      

      经过对比可以发现,选择器的优先级不是遵循就近原则的,而是固定的

      id选择器 > class选择器 > 标签选择器

  2. 层次选择器:

前端:CSS(二)---标签选择器,类选择器,id选择器,层次选择器_第1张图片

  • 后代选择器: 在某一个元素后面

    /*后代选择器,格式:元素+空格+标签*/
    body p{
        background: red;
    }
    
  • 子选择器: 仅后一代

    /*子选择器,格式:元素+>+标签*/
    body>p{
        background: aqua;
    }
    
  • 相邻选择器:

    /*相邻选择器,格式:.class名 + 标签,只有一个,向下*/
    .active + p{
        background: #80351c;
    }
    
  1. 结构伪类选择器

    
    "en">
    
        "UTF-8">
        结构伪类选择器
        
    
    
    "https://www.baidu.com">百度
    

    p1

    p2

    p3

    • li1
    • li2
    • li3

你可能感兴趣的:(前端)