【前端学习之HTML&CSS】-- CSS第三篇 – 选择器（上）

文章目录

【前端学习之HTML&CSS】-- CSS第三篇 -- 选择器（上）
前言
选择器
- 简单选择器
- - 1. ID选择器
  - 2. 元素选择器
  - 3. 类选择器 .
  - 4. 通配符选择器 *
  - 5. 属性选择器 []
  - 6. 伪类选择器 :
  - - 爱恨法则LoVe、Hate
    - 选中第N个元素的样式
  - 7. 伪元素选择器 ::
  - - 解决高度坍塌问题
    - 首字母大写
总结

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章将进入对于选择器的学习，选择器是帮助我们实现不同元素不同内容丰富多彩的样式的关键，我们这里主要介绍了ID选择器、元素选择器、类选择器、通配符选择器、属性选择器、伪类选择器和伪元素选择器，不同种类的选择器用法不同，只有充分的掌握了选择器的使用才能实现CSS的巧妙书写。

选择器

选择器的作用：帮助我们精准的选中想要的元素；

简单选择器

1. ID选择器

用法：# + ID名称，就可以选择对应ID值的元素；

    /* ID选择器,CSS中# + ID名称选择 */#test01 {color: blueviolet;}

    <!-- ID选择器 --><p id="test01">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

2. 元素选择器

用法：输入元素名称，就可以选择对应元素；可以选择到页面上所有的同名元素

    /* 此时的CSS会选中所有的P元素 */p{color: aquamarine;background-color: lightcoral;text-align: left;}

3. 类选择器 .

用法：需要在元素中添加class属性对应，通过. + class名称对应，一个元素可以同时选择多个类；

    /* 类选择器 */.c1 {color: goldenrod;background-color: darkblue;}.big-center {font-size: 3em;text-align: center;}

    <p class="c1 big-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

4. 通配符选择器 *

用法：*，选中所有元素(无所谓类型)

    <style>* {color: #008c8c;}</style>

5. 属性选择器 []

用法：根据属性名和属性值选中元素，[属性] + {};
该选择器的用法很多，具体可以通过百度：属性选择器 MDN搜索得到；

    /* 属性选择器 *//* 选中所有具有href属性的元素 */[href] {color: blueviolet;}/* 选中属性值特定的元素 */[href="https://www.qq.com/"]{color: chocolate;}/* 选中包含某个属性值的元素,实际上类似于类选择器 */[class~="b"] {color: crimson;}/* 可以将~换为*，则即使class中各属性值间没有空格间隔，也可以选中 */[class*="b"] {color: crimson;}/* $= ,表示的含义是属性值末尾是。。。 */[href$="hao123.com/"] {background-color: aqua;}

    <!-- 属性选择器 --><a href="https://space.bilibili.com/123883164/favlist?fid=1498871964&ftype=create">生如昭诩的主页</a><a href="http://www.hao123.com/">网址</a><a href="https://www.qq.com/">腾讯</a><p class="a b c d">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolores.</p><p class="abcd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolores.</p>

6. 伪类选择器 :

用法：选中某些元素的某种状态，（元素）: + 特殊状态；

hover：鼠标悬停的状态；

    /* 前面不加元素即:hover时，鼠标悬停到所有元素处都会变化样式 *//* 伪类选择器，鼠标悬停到a元素时变化样式 */a:hover {color: red;}

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><a href="https://space.bilibili.com/123883164/favlist?fid=1498871964&ftype=create">生如昭诩的主页</a><a href="http://www.hao123.com/">网址</a><a href="https://www.qq.com/">腾讯</a>

active：激活状态，鼠标按下状态；

    /* active，鼠标按下 */a:active {color: #008c8c;}

link：超链接未访问时的状态；

visited：超链接访问后的状态；

    /* link: 超链接未访问时的状态 */a:link {color: chocolate;}/* visited: 超链接访问后的状态 */a:visited {color: yellow;}

爱恨法则LoVe、Hate

四个伪类同时使用：必须有先后顺序：link – visited – hover – active

选中第N个元素的样式

.main .container .movies .movie-item:nth-child(6n){/* 这里选中的是第6、12、18等元素 */margin-right: 0;
}

7. 伪元素选择器 ::

用法：生成并选中某个元素内部的第一个子元素或最后一个子元素，::；

before：生成一个子元素，且是第一个元素，对content增加样式
以下面为例，就是<span><before>content</before>lorem<span>

after：生成一个子元素，且是最后一个元素，对content增加样式
以下面为例，就是<span>lorem<after>content</after></span>

    /* 伪元素选择器 *//* before生成一个子元素，且一定是第一个元素 */span::before {content: "《";}/* after生成一个子元素，且一定是第一个元素 */span::after {content: "》";}

    <!-- 伪元素选择器 --><p>Lorem ipsum dolor sit amet, <span>adipisicing</span> adipisicing elit. Nulla quas at nobis magni velit illo ut eum eaque eos rerum.</p>

解决高度坍塌问题

伪元素选择器可用于解决后续课程中浮动将会导致的高度坍塌，使用方法如下：

 .clearfix::after{/* 解决高度坍塌 *//* 那里高度坍塌，给他的父元素加上此属性 */content: "";display: block;clear: both;
}

首字母大写

伪元素选择器还可用于实现首字母的大写，方法如下：

/* 这里的main、container、movies、score均为其他的选择器 */.movies .movie-item .score::first-letter{font-size: 1.5em;
}

总结

本篇博客主要从基本的选择器类型出发，介绍了几种简单的选择器，下一篇博客中将会继续介绍选择器的排列和配合使用，在书写一个网页的CSS样式中，要尽可能细致的将选择器写的复杂一些，保证从最高层到最底层，减少出现层叠冲突。