文章12
标签10
分类3

CSS选择器类型

以下记录下CSS选择器的类型作为复习

1.标签选择器:

基于标签对所有标签的css样式修改:

<p>标签选择器</p>
p {
   color: #fff;
}

2.ID选择器:

通过设置标签的id进行选择元素:

<p id="pid">ID选择器</p>
#pid {
  color: #fff;
}

3.类选择器:

通过设置标签的类进行选择元素:

<p class="pid">类选择器</p>
.pid {
  color: #fff;
}

4.伪类选择器:

例如:first-child 表示在一组兄弟元素中的第一个元素。

<p class="pid">伪类选择器</p>
<p class="pid">伪类选择器</p>
.pid:first-child{
  color: #fff;
}

5.伪对象选择器:

例如:after 选择器在被选元素的内容后面插入内容。

<p class="pid">伪对象选择器</p>
.pid:after{
  content: 'test the css';
}

6.子元素选择器:

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如 div>p:nth-child(1)

<div>子元素选择器
  <p>子元素选择器</p>
  <p>子元素选择器</p>
</div>
div>p:nth-child(1){
  color: red;
}

7.相邻兄弟选择器:

可选择紧接在另一元素后的元素,且二者有相同父元素。
例如:

<div>相邻兄弟选择器
  <p>相邻兄弟选择器</p>
  <p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
div+p{
  color: red;
}

8.包含选择器(后代选择器):

后代选择器可以选择作为某元素后代的元素。

<div class="test">包含选择器
  <p>包含选择器</p>
  <p>包含选择器</p>
     <div >
     <p>包含选择器</p>
     <p>包含选择器</p>
     </div>
</div>
<p>包含选择器</p>
.test p{
  color: red;
}

9.属性选择器:

属性选择器可以根据元素的属性及属性值来选择元素。

<div>属性选择器
  <p title="test">属性选择器</p>
  <p>属性选择器</p>
</div>
p[title='test']{
  color: red;
}

10.分组选择器与通用选择器:

通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。
通用选择器通过*符号选择所有标签样式。

<div>分组选择器
  <p title="test">分组选择器</p>
  <p>分组选择器</p>
</div>
div, p{ //分组选择器
  color: red;
}
*{ // 通用选择器
  color: red;
}

对文档应用样式的三种方式:

  • 内联样式
  • 内部样式
  • 外部样式

    内联样式

    <div style="color: red;">内联样式</div>
    

    内部样式

    <style type="text/css">
    p {
    color: red;
    }
    </style>
    

    外部样式

    <link rel="stylesheet" href="css/main.css"/>
    

选择器权重计算:

最高优先级: 使用 !important

内联样式>内部样式>外部样式

计算特殊性:

  • 一个标签选择器,记1分
  • 一个类选择器, 记10分
  • 一个ID选择器, 记100分
  • 累加,分高者优先

    CSS参考手册:http://css.doyoe.com/

本文作者:Bunrun
本文链接:https://www.bugrun.cn/posts/86af.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可