细说CSS选择器

基本选择器

根据元素的基本特征匹配元素

1.标签：tag
2.属性：[attr=value]
id、class是高频属性，有专用语法糖

id属性：#id
class属性：.class

标签选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="/index.css" />
  </head>
  <body>
    <!-- 创建一个H2标签 -->
    <h2 class="head">你好，在线源码网</h2>
  </body>
</html>

css代码

/* 使用标签选择器将h2标签内的内容更改为红色 */
h2 {
  color: red;
}

属性选择器

<!-- 创建一个H2标签 -->
    <h2 class="head">你好，在线源码网</h2>
    <!-- hr分隔符 -->
    <hr />
    <!-- 创建一个H2标签，他会默认红色，因为我们已经定义了h2等于红色，
    所以他会默认全局h2都变成红色，所以我们要用到属性选择器 -->
    <h2 class="sety">昊森运维</h2>

css代码

/* 使用标签选择器将h2标签内的内容更改为红色 */
h2 {
  color: red;
}
/* 属性选择器 */
h2[class="sety"] {
  color: aqua;
}

ID选择器

id选择器其实和属性选择器没有太大区别

id的唯一性是由编程人员来保证的，浏览器只负责渲染。

<!-- 创建一个H2标签 -->
    <h2 class="head">你好，在线源码网</h2>
    <!-- hr分隔符 -->
    <hr />
    <!-- 创建一个H2标签，他会默认红色，因为我们已经定义了h2等于红色，
    所以他会默认全局h2都变成红色，所以我们要用到属性选择器 -->
    <h2 class="sety">昊森运维</h2>
    <hr />
    <!-- 创建id选择器 -->
    <h2 id="hs">你好</h2>

css代码

/* 使用标签选择器将h2标签内的内容更改为红色 */
h2 {
  color: red;
}
/* 属性选择器 */
h2[class="sety"] {
  color: aqua;
}
/* id选择器 */
h2[id="hs"] {
  color: blue;
}

属性选择器和id选择器为高频属性，我们经常会用，所以代码我们可以适当的简化一点。

我们用.来代理class、用#来代替id，这样可以让代码更简洁，思路更清晰。

/* 属性选择器 */
h2[class="sety"] {
  color: aqua;
}
/* id选择器 */
h2[id="hs"] {
  color: blue;
}
/* 属性选择器(简化) */
h2.sety{
    color: coral;
}
h2#hs{
    color: fuchsia;
}

上下文选择器

根据元素的层级和关系匹配元素

父子：>
2.后代：空格
3.兄弟：+
4.同级：~
class权重是很高的，所以为了降低权重我们需要采用一些技巧

<!-- 上下文选择器 -->
    <ul class="list">
      <li class="hs">item1</li>
      <li class="hs">item2</li>
      <li class="hs">item3</li>
      <li class="hs">item4</li>
      <li class="hs zx">item5</li>
      <li class="hs">item6</li>
      <li class="hs">item7</li>
      <li class="hs">item8</li>
    </ul>

css代码

/* 上下文选择器*/
/* 一定要有查询的起点(入口)*/
/* 1.父子关系 */
.list > .hs {
  border: thin solid;
}
/* 2.后代选择器(空格) */
.list .hs {
  color: aqua;
}
/* 定位某一条属性 */
/* .list > .hs.zx + .hs {
  background: #000;
} */
/* 但是上面这一条定位属性权重会很高，我们还可以换一种方式写 */
/* 权重越低，越容易被自定义样式覆盖 */
/* .list > .hs.zx + * {
  background: #ff1;
} */
/* 同级选择器 */
/* 这样会将.hs.zx之后的所有同级别元素都设置背景颜色 */
/* 等于此处选择的6/7/8元素 */
.list > .hs.zx ~ * {
  background: #ff1;
}

伪类选择器

伪类选择器是根据元素的位置或状态匹配元素

结构伪类

:nth-child()：
:first-child()：
:last-child()：
:nth-last-child()：

状态伪类

通常用于链接与表单元素

:hover：鼠标悬停
:enabled：有效控件
:disabled：禁用控件
:checked：选中控件
:required：必选控件
`:focus：焦点控件

<!-- 伪类选择器 -->
    <ul class="list">
      <li>itme1</li>
      <li>itme2</li>
      <li>itme3</li>
      <li>itme4</li>
      <li class="five">itme5</li>
      <li>itme6</li>
      <li>itme7</li>
      <li>itme8</li>
      <li>itme9</li>
      <li>itme10</li>
    </ul>

css代码

/* !伪类选择器 结构*/
/* 伪类选择器，最常用的就是结构伪类，用于查询子元素 */
/* 这与上下文选择器非常相似，必须设置一个起点，否则从html开始查询 */
/* 与上下文选择器相比，结构伪类要简洁很多，除起点元素外，几乎不需要在子元素上添加多余属性 */
/* 获取第五个 */
.list :nth-child(5) {
  background: #ff3;
}
/* 获取左后八个  */
.list :nth-child(8) {
  background: #ff3;
}
/* 第一个和最后一个属于高频操作，经常用 */
/* 获取第一个 */
.list :first-child {
  background: #f09;
}
/* 获取左后一个  */
.list :last-child {
  background: #f09;
}
/* 匹配前三个 */
.list :nth-child(-n + 3) {
  background: #ff3;
}
/* 匹配第五个之后的所有 */
/* 用上下文选择器的方式 */
/* 这个是群组选择器的使用方式 */
.list > .five,
.list > .five ~ * {
  background: violet;
}
/* 用伪类的方式获取地址个之后的所有 */
/* 可以对比出来那个更简单，更方便 */
.list :nth-child(n + 5) {
  background: blue;
}

nth-child()计算方式

:nth-of-type(an+b)

1、a：系数，[0、1、2、3、……]
2、n：参数，[0、1、2、3、……]
3、b：偏移量，从0 开始
规则：计算出来的索引必须是有效的(从1开始)
html代码

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="/index.css" />
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
  </body>
</html>

css代码

/* 匹配元素的场景有两种
1、匹配一个
2、匹配一组 */
/* a=0 ： 匹配一个 */
/* .list > :nth-child(0n + 1) {
  color: aqua;
} */
/* 0乘以任何数都是0，那么0n=0   0+1还是1 所以我们可以这样写 */
.list > :nth-child(1) {
  color: aqua;
}
/* -------------------------- */
/* a=1: 匹配一组 */
.list > :nth-child(1n + 2) {
  color: blue;
}
/* 从第二个开始全部获取 */
/* ---------------- */
/* 只获取前三个：反选 */
.list > :nth-child(-1n + 3) {
  color: black;
}
/* 1乘以任何数都不变，所以我们可以省略1， */
/* 所以上面的两个我们可以直接省略1 */
.list > :nth-child(n + 2) {
  color: blue;
}
.list > :nth-child(-n + 3) {
  color: black;
}
/* 偶数位 */
/* 如果a=2会怎么样呢？ */
.list > :nth-child(2n) {
  background: #000;
}
/* 他会变成偶数，即2/4/6/8/10 */
/* 2n可以用even关键字代替 */
.list > :nth-child(even) {
  background: rgb(244, 0, 0);
}
/* 奇数2n+1 */
.list > :nth-child(2n + 1) {
  background: rgb(54, 177, 60);
}
/* 获取倒数第四个之后的 */
.list > :nth-last-child(-n + 4) {
  background: rgb(18, 192, 255);
}

状态伪类

html代码

<form action="">
      <fieldset>
        <legend>用户注册</legend>
        <input type="text" id="user" name="user" placeholder="用户名" />
        <input type="email" id="email" name="email" placeholder="邮箱" />
        <input type="password" id="pass" name="pass" placeholder="密码" />
        <div>
          <input type="checkbox" id="rem" />
          <label for="rem">记住我</label>
        </div>
        <button>提交</button>
      </fieldset>
    </form>

css代码

fieldset {
  width: 20px;
}
/* 用户注册居中显示 */
fieldset legend {
  text-align: center;
}
/* 当记住我为选中状态更改颜色 */
input[type="checkbox"]:checked + label {
  color: aqua;
}
/* 设置按钮的基础样式 */
button {
  border: none;
  outline: none;
  background: #2ba7ba;
  width: 170px;
  height: 25px;
  color: #fff;
}
/* 鼠标悬停至提交按键的时候按钮发生变化 */
/* cursor: pointer;鼠标悬停变为小手 */
/* opacity: 0.8;鼠标悬停调整透明度 */
button:hover {
  cursor: pointer;
  opacity: 0.8;
}

基本选择器

标签选择器

属性选择器

ID选择器

上下文选择器

伪类选择器

结构伪类

状态伪类

nth-child()计算方式

状态伪类

相关文章