其他分享
首页 > 其他分享> > <day03>CSS选择器

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

群集选择器

<style>
/* .one {
color: red;
}
.two {
color: red;
}
和下面的是等价的

*/

.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>

复合选择器优先级

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

标签:优先级,color,two,选择器,red,id,CSS
来源: https://www.cnblogs.com/toufuwqm/p/16475647.html