百度前端技术实战训练营——CSS基础之选择器

capucino_bubble

已于 2023-01-11 00:17:10 修改

阅读量445

点赞数

分类专栏： css 前端 html 文章标签： css 前端 html

于 2023-01-11 00:08:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62215764/article/details/128638213

版权

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

css

4 篇文章

订阅专栏

html

4 篇文章

订阅专栏

百度前端技术实战训练营——CSS基础之选择器

- CSS选择器

CSS选择器

选择器(选择符)就是根据不同需求把不同的标签选出来。简单来说，就是选择标签用的。

可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

也可以分为两大类：

简单选择器（标签选择器，类选择器，id选择器，通配符选择器）
符合选择器（后代选择器，子选择器，并集选择器，伪类选择器）

以下只介绍常用的几种。

$\newline$

标签选择器

标签选择器(元素选择器)是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之标签选择器</title>
    <style>
        /* 标签选择器 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 标签选择器 -->
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

</html>

效果：
在这里插入图片描述

$\newline$

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在HTML中以 class 属性表示，在CSS中，类选择器以一个点 . 号显示。

注意：

类选择器使用 . 进行标识，后面紧跟类名(自定义)
可以理解为给这个标签起了一个名字来表示
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的
命名规范

<head>
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器 */
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 类选择器 class可以调用多次-->
    <ul>
        <li>冰雨</li>
        <li class="red">来生缘</li> <!--类选择器-->
        <li>李香兰</li>
        <li>生僻字</li>
        <li class="red">江南style</li>
    </ul>
</body>

效果：
在这里插入图片描述

$\newline$

多类名

我们可以给一个标签指定多个类名，这些类名都可以选出这个标签，从而达到更多的选择目的。简单理解就是一个标签有多个名字。

多类名使用方式

<div class="red font20">多类名选择器</div>

在标签 class 属性中写多个类名
多个类名中间必须用空格分开

<head>
    <title>多类名的使用方式</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="red font35">多类名选择器</div>
</body>

效果：
在这里插入图片描述

$\newline$

id选择器

id 选择器可以为标有特定 id 的HTML元素指定特定的样式。HTML元素以 id 属性来设置 id 选择器，CSS中 id 选择器以 # 来定义。 id 属性只能在每个HTML 文档中出现一次，只能调用一次。类选择器在修改样式中用得最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用。

<head>
    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器 */
        #pink {
            color: pink;
            font-size: 30px;
        }
    </style>
</head>

<body>
   	<!-- id选择器 id只能调用一次-->
    <div id="pink">id选择器</div>
</body>

效果：
在这里插入图片描述

$\newline$

通配符选择器

CSS中，通配符选择器使用 * 定义，它表示选取页面中所有元素(标签)。

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用（如以下是清除所有的元素标签的内外边距）

		* {
            margin: 0;
            padding: 0;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之通配符选择器</title>
    <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

$\newline$

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意简单选择器

/* 选择元素1里面的所有元素2 */
元素1 元素2 {样式声明}

$\newline$

子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

元素1和元素2中间用 > 隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管

/* 示选择元素1里面的所有直接后代(子元素)元素2 */
元素1 > 元素2 {样式声明}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之子元素选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

效果：
在这里插入图片描述

$\newline$

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用 : 表示。伪类选择器有很多，如链接伪类、结构伪类等。

$\newline$

链接伪类选择器

为了确保生效，一般按照LVHA的循顺序声明:link - :visited - :hover - :active。a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感
a 链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

效果不好展示，请自行尝试。

$\newline$

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>focus伪类选择器</title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

效果：
在这里插入图片描述

$\newline$

简单应用

训练营上课案例。
html文件：

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

<head>
  	<meta charset="UTF-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>开始学习CSS选择器</title>
  	<!-- 外部样式表 -->
  	<link rel="stylesheet" href="./CSS基础.css">
</head>

<body>
  	<!-- 简单选择器 -->
  	<p>我是段落A</p>
  	<p class="paragraph">我是段落B</p>
  	<p class="paragraph extra-para">我是段落C</p>

	  <p id="para">我是段落D</p>
	  <p id="para" class="paragraph">类优先级测试</p>
	
	  <!-- 属性选择器 -->
	  <!-- 这组选择器给了你根据有关元素上的某个标签属性的存否以指定样式 -->
	  <img
	    src="https://ts4.cn.mm.bing.net/th?id=ORMS.2c1e78aaefb96846fd441a663854f5e6&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.25&p=0" />
	
	  <br>
	  <!-- 伪类选择器 -->
	  <!-- 只会在鼠标指针悬浮到一个元素上的时候选择这个元素 -->
	  <a href="">点我跳转</a>
	
	  <br>
	  <br>
	  <!-- 后代选择器 -->
	  <!-- 当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素 -->
	  <div>
	    <span>span 1.
	      <span>span 2.</span>
	    </span>
	  </div>
	  <span>span 3.</span>
	
	  <br>
	  <br>
	  <!--  类命名1： BEM -->
	  <div class="article">
	    <button class="article__button--primary">1</button>
	    <button class="article__button--success">2</button>
	  </div>
	  <!-- 另一种命名方式（无名字） -->
	  <div class="article">
	    <button class="button-primary">1</button>
	    <button class="button-success">2</button>
	  </div>
</body>

</html>

css文件：

p {
    color: blue;
}

.paragraph {
    color: red;
}

.paragraph {
    color: brown;
}

.extra-para {
    font-size: 30px;
}

#para {
    color: green;
}

img[src] {
    width: 100px;
}

a:hover {
    color: red;
}

span {
    background-color: white;
}

div span {
    background-color: DodgerBlue;
}

span {
    /* background-color: white; */
}

.article .button-primary {}

效果：
在这里插入图片描述