CSS基础笔记-03选择器

CSS基础笔记系列

前言

在前面两篇博客中，我实际上已经使用过了选择器。但到底什么是选择器、有什么作用，我反而不能表达出来。因此，决定记录了我的学习和思考。

什么是选择器

selector是css rule的第一个部分，用于匹配HTML元素，并使用规则中的属性样式化对应元素。

css 复制代码

/* CSS syntax */
selector{
	property: value;
}

本文将结合具体的示例来展示：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Tao Te Ching</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <h1>第二章（治国）</h1>
    <p class="special"><em>天下皆知美之为美，斯恶已</em>；皆知善之为善，斯不善已。</p>
    <p>有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随，恒也。</p>
    <p>是以圣人处无为之事，行不言之教；万物作而弗始，生而弗有，为而弗恃，<strong>功成而弗居</strong>。夫唯弗居，是以不去。</p>

</body>

</html>

元素选择器

以HTML元素为作为selector。也叫 标签选择器 或 类型选择器。

例如，以

作为选择器，那么所有的p标签都会应用这个样式。

css 复制代码

h1 {
    color: blue;
}

p {
    color: blueviolet;
}

strong {
    color: red;
}

em {
    color: gray;
}

类选择器

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有标签。例如，使用.highlight将指定的p标签高亮。

类选择器的组合使用：

ID选择器

ID选择器以一个句点（#）开头。在html中对指定的元素添加id属性，然后在css中添加对应id的样式。

属性选择器

用属性选择器来选中带有特定属性的元素。属性名放在[]中。

接下来通过一个无需列表来演示，属性选择器的使用：

html 复制代码

<ul>
        <li>第三章</li>
        <li class="chapter4">第四章</li>
        <li class="chapter4 chapter5">第五章</li>
        <li class="chapter4chapter5">第六章</li>
    </ul>

css 复制代码

/* 将所有使用了class属性的元素的字体大小设置为20% */
[class]{
    font-size: 20%;
}

/* 将所有含有class属性的li标签的字体大小设置为200% */
li[class]{
    font-size: 200%;
}

/* 匹配仅有chapter4属性值的li标签*/
li[class="chapter4"]{
    background-color: red;
}

/* 匹配只要有chapter4属性值的li标签*/
/* 当class属性有多个值时，每个值用空格分开 */
/* 说明：这个样式会覆盖上面的，因为本样式的权重值更大 */
li[class~="chapter4"]{
    background-color: yellow;
}

伪类选择器(pseudo-class)

用于选择处于特定状态的元素。

伪类就是开头为冒号的关键字:

css 复制代码

selector:pseudo-class {
  property: value;
}

例如，我只想让article的第一个段落的文字字体加粗加大，无论任何时候都可以在article的最开始动态插入p标签且保持设置的特定样式始终有效，而不用再修改代码。

css 复制代码

article p:first-child{
    font-size: 120%;
    font-weight: bold;
}

像常规的类一样，可以在选择器中将任意数量的伪类链在一起。

伪元素选择器(pseudo-elements)

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式

css 复制代码

selector::pseudo-element {
  property: value;
}

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

css 复制代码

/* 使用伪元素选择器，使段落的第一行文字总是被应用样式 */
/* 而不管屏幕的大小如何变化 */
article p::first-line{
    font-size: 120%;
    font-weight: bold;
}

css 复制代码

/* 选择一个<article>元素里面的第一个<p>元素的第一行。 */
article p:first-child::first-line{
    font-size: 120%;
    font-weight: bold;
}

css 复制代码

/* 在box类 前插入一个伪元素 */
.box::before {
    content: "hello";
    color: aqua;
    display: block;
    width: 100px;
    height: 100px;
    background-color: brown;
    border: 1px solid black;
}
/* 在box类 后插入一个伪元素 */
.box::after{
    content: "after usage";
    color: blue;
}

关系选择器(combinator)

后代选择器(descendant combinator)

用单个空格来组合两个或多个元素的选择器。

css 复制代码

/* 匹配body中的article中的p标签 */
body article p

子代选择器(child combinator)

子代选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

css 复制代码

<ul>
        <li>Unordered item</li>
        <li>Unordered item
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
            </ol>
        </li>
    </ul>

css 复制代码

ul>li {
    /* 非继承属性 */
    border: thick double #32a1ce;
    /* 继承属性 */
    color: red;
}

紧邻兄弟选择器（next-sibling combinator）

紧邻兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的元素。

html 复制代码

<article>
    <h1>一级标题</h1>
      <p>第一段的内容</p>
      <p>第二段的内容</p>
  </article>

css 复制代码

h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: 2px;
  }

兄弟选择器(subsequent-sibling combinator)

使用(~)来选择任意兄弟元素。

html 复制代码

<article>
    <h1>一级标题</h1>
      <p>第一段的内容</p>
      <div>无效内容</div>
      <p>第二段的内容</p>
  </article>

css 复制代码

h1 ~ p {
  font-weight: bold;
  background-color: #b03636;
  color: #fff;
  padding: 2px;
}

总结

本文学习了10种选择器，掌握它们的关键：一是先理解，二是多练；多使用才会积累更多的经验，多尝试不同的组合。单纯的去记，我是记不住的！！！另外，关于这篇文章的内容，等有空时录个视频，看起来就会更直观啦！关于cascading、specificity、 inheritanc还有点儿迷，明天再学习下。