前端三剑客CSS篇——CSS选择器

初识CSS选择器

文章目录

初识CSS选择器
- - CSS三大特征👍
  - CSS的三种使用方法👏
  - CSS常见选择器👀
  - - 标签选择器
    - 类选择器
    - id选择器
    - 后代选择器
    - 属性选择器
    - 复合选择器
  - CSS代码风格📜

CSS是前端三剑客不可忽略的一部分，CSS对前端来说是一个美化页面的工具，而且其功能十分强大，程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式，使得页面更加美观。

CSS标签是由键值对的模式来排列的。

height:100px; /*height:键 100px：值 意识是高度设置为100px*/

CSS三大特征👍

学习CSS之前，先认识一下CSS的三大特征：

层叠性

对同一个标签使用了同一种样式更改时，决定标签最后显示的样式是使用就近原则法，不会对之前修改的样式产生冲突

继承性

子标签会继承父标签的某些样式，之前介绍HTML标签中，标签中互相存在着兄弟关系和父子关系，这种样式的继承是在于父子关系之间的

优先级

如果选择器相同的情况下，会执行层叠性的规则，否则就是根据其权重来展示样式的。

在这里插入图片描述

CSS的三种使用方法👏

内部引入

（1）这里可以将标签放在任何地方，不过一般是放在头部或者尾部

<style>
        div {
            height: 100px;
            width: 100px;
            background-color: orange;
        }
</style>

在这里插入图片描述

内联引入

（1）这里是对div 标签直接使用，其优先级大于其他标签

<div style="height: 100px; width: 100px; background-color: orange;">
        我是一个盒子
</div>

外部引入

（1）创建一个以css结尾的文件，可以在文件中写入第一种方式的CSS样式，然后在head标签中引入文件。

<link rel="stylesheet" href="01.css">

虽然CSS有三种引入方式，不过最常使用的是内部引入和外部引入，因为看起来比较美观，修改时也比较简单。

CSS常见选择器👀

选择器，就是一个标签，在引入样式时指定的标签就称为选择器。

标签选择器

标签选择器就是使用HTML标签名来选择元素来进行样式处理，用于选取页面中所有具有相同标签的元素,标签选择器可以匹配所有的HTML标签，是最常见，最基本的标签之一。

举个例子🎁：

div {
    background-color: orange;
}

这个CSS规则会选中HTML文档中所有的div元素，然后将他们的背景色设置为橙色.

类选择器

每个标签都可以设置1个或多个类，比如给一个p标签设置一个名为message的类：

<p class="message">
    我是一段文字
</p>

类选择器就是使用标签中的类名所扩展的一种选择器,要使用选择器中的样式就必须在这个标签中引用这个类。注意，类选择器和标签选择器写法也不同。

举个例子🎁：

.message {
    color:blue;
}

使用了这个类的文字都会变成蓝色。

id选择器

每个HTML标签可以只能设置一个id，id具有唯一性，所以使用这个样式一般是给特定的元素设置的。

<p id="textid">测试id选择器</p>

这种选择器很少会使用，不过在特定时期会对页面有一个很大的作用，id选择器的使用方法也与其他的不同，在id名前加#作为该选择器的名称。

举个例子🎁：

#textid {
    color: pink;
}

将这个id的元素的文字颜色设置成粉色。

后代选择器

允许根据类名或标签名嵌套在其他元素中的位置来选中元素，这意味着可以选择父元素下的特定后代元素或者元素集合，后代选择器可以嵌套许多层。

举个例子🎁：

<!-- HTML部分 -->
<div class="parent-element">
    <p>子元素p标签</p>
</div>
<!-- CSS部分 -->
<style>
    .parent-element p {
        color: chartreuse;
    }
</style>

这个代码的意思是将类名为parent-element父元素下的所有p标签元素中文字颜色改为chartreuse。

举个例子🎁🎁：

<!-- html -->
<div class="parent-element">
    <p>
        <a href="#">孙子元素a标签</a>
    </p>
</div>
<!-- CSS -->
<style>
    .parent-element p a {
        color: chartreuse;
    }
</style>

这个代码的意思是将类名为parent-element父元素下的所有p标签中所有a标签元素中文字颜色改为chartreuse。

属性选择器

属性选择器可以根据元素的属性和值来选择元素。这些选择器对于选中元素有特定的属性，并且这个属性还可以等于一个值或包含一个值。

等于选择器=

选中的属性包含指定的属性。

举个例子🎁：

<!-- html -->
<div>
    效果组: <input type="text"><br>
    对比组: <input type="email">
</div>
<!-- css等于选择器 -->
<style>
    input[type="text"] {
        background-color: brown;
    }
</style>

这个选择器的含义是将input标签中所有将type设置成text属性的标签背景颜色改为brown。

在这里插入图片描述

包含选择器*=

选中的属性包含指定元素。

举个例子🎁：

<!-- html -->
<div>
    效果组：<a href="www.google.com">谷歌</a><br>
    对比组：<a href="www.baidu.com">百度</a>
</div>
<!-- css包含选择器 -->
<style>
    a[href*="google"] {
        font-size: 50px;
    }
</style>

将a标签中所有href属性值包含google字样的字体属性设置为50px的大小。

在这里插入图片描述

开始选择器^=

选择元素属性值以指定开头的元素。

举个例子🎁：

<div>
    效果组：<a href="https://www.google.com">谷歌</a><br>
    对比组：<a href="www.baidu.com">百度</a>
</div>
<!-- css开始选择器 -->
<style>
    a[href^="https://"] {
        color: #46eb5c;
    }
</style>

将a标签中的href属性中以https://开头的元素中文字颜色改为绿色。

在这里插入图片描述

结束选择器$=

这个与前者真好相反，这个是将属性值中以这个指定的字符串结尾的元素。

举个例子🎁：

<!-- html -->
效果组：<img src="../boy.png" style="width: 100px;">
对比组：<img src="../book1.jpg" style="width: 100px;">
<!-- css结束选择器 -->
<style>
    img[src$=".jpg"] {
        border: 2px solid red;
    }
</style>

给.jpg结尾的属性加边框，前面是边框像素，第二个是边框样式，最后一个是边框颜色。

在这里插入图片描述

匹配选择器|=

选择具有前缀属性的元素，或者是以指定值开始和连接字符为-属性值的元素。

举个例子🎁：
```

<div class="parent">
    <p>
        属性匹配
    </p>
</div>

<style>
    div[class|="parent"] p {
        font-size: 30px;
    }
</style>
```
选择class所有具有parent开头或者只是parent，并包含在div中所有的p标签中所有的字体设置为30px

复合选择器

复合选择器是由多个简单选择器（如：标签，类，id,属性，等）组合在一起的选择器，用来更精准的匹配HTML元素，简单的几个选择器由空格隔开。

举个例子🎁：
```

<div class="parent">
    <p id='son'>匹配</p>
    <p>测试</p>
</div>

<style>
    .parent p#son {
        font-size: 30px;
    }
</style>
```
选择类名为parent的元素中所有p标签中id为son的元素。