CSS基础学习（二）——选择器

秋天的叶
88 阅读8分钟

一、css写法

  1. CSS 选择器用于选择你想要的元素的样式的模式。

  2. 书写规定：样式选择器，属性名，属性值关键字全部使用小写字母书写。

    /* 不推荐 */
p {
  color: BLACK;
}

/* 推荐 */
p {
  color: black;
}

二、CSS高频选择器

(一)、标签选择器

  1. 标签选择器：也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。

  2. 作用：标签选择器“覆盖面”非常大，所以通常用于标签的初始化。如去掉无序列表默认的小黑点；去掉超链接默认的下划线等。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 所有的 h1 标签将被选中 */
      h1 {
        color: chartreuse;
      }
      /* 所有的 p 标签将被选中 */
      p {
        color: magenta;
      }
    </style>
  </head>
  <body>
    <h1>这是标题一</h1>
    <p>这是段落一</p>
    <h1>这是标题二</h1>
    <p>这是段落二</p>
    <h1>这是标题三</h1>
    <p>这是段落三</p>
  </body>
</html>

（二）、id选择器

  • 标签可以有 id 属性，是这个标签的唯一标识, 类似于身份证号

  • CSS 中id选择器可以使用井号#前缀，选择指定 id 的标签

  • id 的名称只能由字母、数字、下划线、短横构成，并且不能以数字开头，字母区分大小写，但习惯上一般为小写字母

    注意：同一个页面上不能有相同 id 的标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 所有的 h1 标签将被选中 */
      h1 {
        color: chartreuse;
      }
      /*p标签中 id 为 p3 将被选中 */
      #p3 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>这是标题一</h1>
    <p id="p1">这是段落一</p>
    <h1>这是标题二</h1>
    <p id="p2">这是段落二</p>
    <h1>这是标题三</h1>
    <p id="p3">这是段落三</p>
  </body>
</html>

（三）、class 类名（类选择器）

  1. class 属性表示“类名”，class 和 id 可以同时拥有。

    <p class="warning" id="p1">我是段落</p>

  2. 类名的命名规范与 id 选择器 的命名规范相同。

  3. 使用点.前缀选择指定 class 的标签。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
        /* 类选择器  */
      .p1 {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p class="p1"></p>
  </body>
</html>

（四）id选择器与 类（class）选择器的区别

  • id 是唯一的, 相当于身份证号

  • class 不是惟一的, 多个标签可以有相同类名, class 相当于分组

  • 一个标签只能有一个 id, 一个 id 的名字只能在页面中出现一次

    <p id="hello">这是一个段落</p>
<p id="hello">这是一个段落</p>
<!-- 错误, hello已经被用了 -->
<p id="hello1 hello2">这是一个段落</p>
<!-- 错误, 只能拥有一个id -->

  • 多个标签可以使用同一个 class 名字

    <p class="p1">我是段落一</p>
<p class="p1">我是段落二</p>

  • 同一个标签可以同时属于多个类，类名用空格隔开

<p class="p1 p2">我是段落</p>

(五)、原子类

  1. 在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。HTML 标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      .p1 {
        color: aquamarine;
      }
      .p2 {
        color: chartreuse;
      }
      .p3 {
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
   <!-- 按需选择类名 -->
    <p class="p1 p3"></p>
    <p class="p2"></p>
  </body>
</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>Document</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>这是标题</h1>
		<p>这是段落1</p>
		<p>这是段落2</p>
		<p>这是段落3</p>
		<p>这是段落4</p>
	</body>
</html>

  • 去除标签的默认 margin(外边距) 和 padding(内边距)

    * {
	margin: 0;
	padding: 0;
}

三、复合选择器

选择器名称示例示例的意义
后代选择器.box .spec选择类名为 box 的标签内部的类名为 spec 的标签
交集选择器li.spec选择既是 li 标签, 也属于 spec 类的标签
并集选择器ul, ol选择所有 ul 和 ol 标签

（一）、后代选择器

  • CSS 选择器中, 使用空格表示"后代"，"后代"并不一定是"儿子"

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      .p1 {
        color: aquamarine;
      }
      .p2 {
        color: chartreuse;
      }
      .p3 {
        font-weight: bold;
        font-size: 20px;
      }
      /* 后代选择器 */
      .p2 span {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 按需选择类名 -->
    <p class="p1 p3"></p>
    <!-- span 是 p 的后代 -->
    <p class="p2"><span>hello word!</span></p>
  </body>
</html>

（二）、交集选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 交集选择器 */
      /* 选择既是 p 标签又是 类名为 p1 的标签 */
      p.p1 {
        color: aqua;
      }
    </style>
  </head>
  <body>
    <p class="p1">这是段落1</p>
  </body>
</html>

（三）、并集选择器

  • 并集选择器也叫作分组选择器, 逗号表示分组

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 并集选择器 */
      /* 选择ul和ol标签 */
      ul,
      ol {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </body>
</html>

四、伪类——爱恨准则

  • 伪类是添加到选择器的描述性词语, 指定要选择的元素的特殊状态, 超级链接拥有 4 个特殊状态
伪类意义
a:link没有被访问的超级链接
a:visited已经被访问过的超级链接
a:hover正被鼠标悬停的超级链接
a:active正被激活的超级链接（按下按键但是还没有松开按键）

注意：a 标签的伪类书写, 要按照"爱恨准则"的顺序, 否则会有伪类不生效，h、a 必须在 l、v 之后,l、v可以互换

五、元素关系选择器

名称举例意义
子选择器div>pdiv 的子标签 p
相邻兄弟选择器img+p图片后面紧跟着的段落将被选中
通用兄弟选择器p~spanp 元素之后的所有同层级 span 元素

（一）、子选择器

  • 当使用 > 符号分隔两个元素时, 它只会匹配那些作为第一个元素的直接后代元素, 即两个标签为父子关系

    .box > p {
	color: red;
}

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 子选择器 */
      /* 段落1、段落2和段落3将被选择 */
      .box > p {
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p class="p1">段落1</p>
      <p class="p2">段落2</p>
      <p class="p3">段落3</p>
      <div>
        <p>段落4</p>
        <p>段落5</p>
      </div>
    </div>
  </body>
</html>

（二）、相邻兄弟选择器

  • 相邻兄弟选择器 (+) 介于两个选择器之间, 当第二个元素紧跟在第一个元素之后, 并且两个元素都是属于同一个父元素的子元素, 则第二个元素将被选中。简单来说，a+b 就是选择 "紧跟在 a 后面的一个 b"。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 兄弟相邻选择器 */
      /* p 标签紧跟后面的 img 标签将被选择 */
      p + img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p class="p1">段落1</p>
      <img src="" alt="">
      <p class="p2">段落2</p>
      <p class="p3">段落3</p>
      <div>
        <p>段落4</p>
        <p>段落5</p>
      </div>
    </div>
  </body>
</html>

（三）、通用兄弟选择器

  • 通用兄弟选择器（）, ab 选择 a 元素之后所有同层级 b 元素

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS---选择器</title>
    <style>
      /* 通用兄弟选择器 */
      /* p 标签后面的 同层的 span 标签将被选择 即 1、2、3、7、8、9*/
      p ~ span {
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>段落1</p>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <p>
        段落2
        <span>4</span>
        <span>5</span>
        <span>6</span>
      </p>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </body>
</html>

六、序号选择器

序号选择器说明
first-child:first-child 表示"选择第一个子元素"
last-child:last-child 表示"选择最后一个子元素"
first-of-type:first-of-type() 当前同一类标签中的第一个
last-of-type:last-of-type() 当前同一类标签中的最后一个
only-child:only-child(), 选择的元素是其父级的唯一子元素
only-of-type:only-of-type(), 选择的元素是同类标签中的唯一一个
nth-child:nth-child(), 可以选择任意序号的子元素 。
:nth-child()可以写成 an + b 的形式, 表示从 b 开始每 a 个选一个, 注意不能写为 b + an
2n+1 等价于 odd, 表示奇数
2n 等价于 even, 表示偶数
nth-of-type:nth-of-type()将选择同种标签指定序号的子元素
nth-last-child:nth-last-child() 是倒数选择, 表示子集中的最后一个
nth-last-of-type:nth-last-of-type() 也是倒数选择, 表示该类型的最后一个
:nth-last-child()与 :nth-last-of-type()的区别:nth-last-child(), 以当前子集作为查找范围
:nth-last-of-type(), 以当前标签类型作为查找范围

七、属性选择器

举例含义
img[alt]选择有 alt 属性的 img标签
img[alt="故宫"]选择 alt 属性为“故宫”的 img 标签
img[alt^="北京"]选择 alt 属性以“北京”开头的 img 标签
img[alt$="夜景"]选择 alt 属性以“北京”结尾的 img 标签
img[alt*="美"]选择 alt 属性含有“美”字的 img 标签
img[alt-="手机拍摄"]选择 alt 属性中有空格隔开的“手机拍摄”文字的 img 标签
img[alt|="参赛作品"]选择有 alt 属性以 “参赛作品-”开头的 img 标签

八、CSS3 新增伪类

伪类含义
:empty选择空标签
:focus选择当前获得焦点的表单元素
:enabled选择当前有效的表单元素
:disabled选择当前无效的表单元素
:checked选择当前已经勾选的单选按钮或者复选框
:root选择根元素, 即<html>标签

九、伪元素

（一）、::before 和::after

  • CSS3 新增了"伪元素"特性, 顾名思义, 表示虚拟动态创建的元素

  • 伪元素用双冒号表示, IE8 可以兼容单冒号

  • ::before 创建一个伪元素, 其将成为匹配选中的元素的最前一个子元素, 必须设置 content 属性表示其中的内容。

a::before {
        content: "★";
      }
  • ::after 创建一个伪元素, 其将成为匹配选中的元素的最后一个子元素, 必须设置 content 属性表示其中的内容。

（二）、::selection

  • ::selection CSS 伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

（三）、::first-letter 和::first-line

  • ::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母
  • ::first-line 会选中某元素中（必须是块级元素）第一行全部文字
avatar
文章
阅读
粉丝