CSS 选择器

目录

元素选择器

类选择器

ID 选择器

定义多个 class

后代选择器 & 子代选择器

属性选择器（元素的属性）

伪类选择器

---

元素选择器

h1,
h2,
div {
  color: red;
}

!直接写上标签元素的名称，逗号表示作用于多个元素

类选择器

  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  
.box {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

!点（．）＋类名组成类选择器

ID 选择器

  <div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  
#box {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}


#box div {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px solid;
}

!井号（＃）＋id名称，id是唯一的！

定义多个 class

 <div id="box">
    <div class="content ft col">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  
.content {
  background-color: blue;
}

.ft {
  font-size: 30px;
}

.col {
  color: white;
}

!后定义的属性会覆盖前面的属性！

后代选择器 & 子代选择器

  <div id="box">
    <article>
      <h2>
        h21
      </h2>
      <div>
        <h2>
          h22
        </h2>
      </div>
    </article>
  </div>
  
#box div h2 {
  color: red;
}

!以空格作为分界，选择元素,
后代选择器同时作用于所有后代（我们都是炎黄子孙）
例如，粉刷 2705 的次卧，会把四面墙全部粉刷了！

#box div > h2 {
  color: red;
}

!子代选择器，使用 > 符号，指定儿子，
子代选择器只作用于当前的后代（只管自己的儿子）
例如，粉刷 2705 的次卧，指定了空调的那面墙！

属性选择器（元素的属性）

  <div id="box">
    <div>
      <span title="span1">
        我是 span1 元素
      </span>
      <span title="span12">
        我是 span2 元素
      </span>
    </div>
  </div>
  
span[title^="span1"] {
  color: red;
}

!span 选择元素，title指定属性值，
^表示以 span1 开头的所有 title 属性
注：这里参考正则，^ 表示开头，$ 表示结尾，* 表示所有

伪类选择器和伪元素

  <div id="box">
    <div>
      <p title="span1">
        我是 span1 元素
      </p>
      <p title="span1">
        我是 span1 元素
      </p>
      <p title="span1">
        我是 span1 元素
      </p>
    </div>
  </div>

a:hover {
  color: blue;
}

p:first-child {
  color: red;
}

p:last-child {
  color: green;
}

!以冒号添加操作的选择器

div :nth-child(3) {
  color: yellow;
}

!注意，div 后面有一个空格表示是 div 的后代的第 3 个元素，
而不是 div 的第三个！

:: 伪元素

: 伪类
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。