<day03>CSS选择器

2022/7/13 23:24:30

编程Tag： 选择器 css 优先级 id color RED two

本文主要是介绍<day03>CSS选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

元素选择器

以标签名为选择器

语法

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

id选择器

id是每个标签公有的属性，id的值是唯一的

语法

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

<p id="id值">xxxxxx</p>

类选择器

每个标签共有的属性class

语法

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

<p class="类名">xxxxxx</p>

复合选择器

后代选择器

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

.out .inner p {
    color: pink;
}

<div class="out">
        <div class="inner">
            <p>xxx</p>
        </div>
</div>

子代选择器

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

.out > .one > .inner {
  width: 100px;
  height: 100px;
  
}

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

群集选择器

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

优先级

引入方式的优先级

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

选择器的优先级

!important >id选择器(100)> 类选择器(10)>元素选择器(1)

<style>
      /* !important >id选择器(100)> 类选择器(10)>元素选择器(1) */
      .main {
        color: red;
      }

      #one {
        color: blue;
      }

      div {
        color: yellow !important;
      }
    </style>
  </head>
  <body>
    <div id="one" class="main">我是div标记</div>
  </body>

复合选择器优先级

/* 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>

这篇关于<day03>CSS选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！