CSS基础笔记-03选择器

2024-01-07 17:29:55

CSS基础笔记系列

前言

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

什么是选择器

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

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

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

<!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标签都会应用这个样式。

h1 {
    color: blue;
}

p {
    color: blueviolet;
}

strong {
    color: red;
}

em {
    color: gray;
}

在这里插入图片描述

类选择器

类选择器以一个句点(.)开头,会选择文档中应用了这个类的所有标签。例如,使用.highlight将指定的p标签高亮。
在这里插入图片描述

类选择器的组合使用:
在这里插入图片描述

ID选择器

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

在这里插入图片描述

属性选择器

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

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

<ul>
        <li>第三章</li>
        <li class="chapter4">第四章</li>
        <li class="chapter4 chapter5">第五章</li>
        <li class="chapter4chapter5">第六章</li>
    </ul>
/* 将所有使用了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)

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

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

selector:pseudo-class {
  property: value;
}

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

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

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

伪元素选择器(pseudo-elements)

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

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

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

/* 使用伪元素选择器,使段落的第一行文字总是被应用样式 */
/* 而不管屏幕的大小如何变化 */
article p::first-line{
    font-size: 120%;
    font-weight: bold;
}
/* 选择一个<article>元素里面的第一个<p>元素的第一行。 */
article p:first-child::first-line{
    font-size: 120%;
    font-weight: bold;
}
/* 在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)

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

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

子代选择器(child combinator)

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

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

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

紧邻兄弟选择器(next-sibling combinator)

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

<article>
    <h1>一级标题</h1>
      <p>第一段的内容</p>
      <p>第二段的内容</p>
  </article>
h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: 2px;
  }

兄弟选择器(subsequent-sibling combinator)

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

<article>
    <h1>一级标题</h1>
      <p>第一段的内容</p>
      <div>无效内容</div>
      <p>第二段的内容</p>
  </article>
h1 ~ p {
  font-weight: bold;
  background-color: #b03636;
  color: #fff;
  padding: 2px;
}

总结

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

文章来源:https://blog.csdn.net/weixin_43708622/article/details/135433056
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。