CSS选择器 - 技术栈

1.分类

1.1 基本选择器

1.通配选择器

作用：查找页面所有标签 ，设置相同样式 ，可以用于清除标签的默认样式 ,如标签默认的内外边距;

通配符选择器：*，不需要调用 ，浏览器自动查找页面所有标签，设置相同的样式

css 复制代码

/* 语法：*/
* {
属性名: 属性值;
}
/* 选中所有元素 */
* {
margin: 0px;
padding: 0px;
color: pink;
}

2.标签/元素选择器

标签/元素选择器：使用标签名(p, span , div, a, img等)作为选择器 ，为页面中某种元素统一设置样式；

css 复制代码

/* 语法：*/
标签名 {
属性名: 属性值;
}
/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}

注意：标签选择器无法差异化同名标签的显示效果。

3.类选择器

作用：查找标签，差异化设置标签的显示效果 。

步骤： • 定义类选择器 → .类名 • 使用类选择器 → 标签添加 class="类名"

css 复制代码

/* 语法：*/
.类名 {
属性名: 属性值;
}
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}

注意：

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。
class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 "见名知意"。
一个元素不能写多个 class 属性，下面是错误示例：

css 复制代码

<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>

一个元素的 class 属性，能写多个值，要用空格隔开，例如：

css 复制代码

<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

4.id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

• 定义 id 选择器 → #id名

• 使用 id 选择器 → 标签添加 id= "id名"

xml 复制代码

/* 语法：*/
#id值 {
属性名: 属性值;
}

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

html 复制代码

注意：同一个 id 选择器在一个页面只能使用一次

1.2 复合选择器

1. 交集选择器

作用：选中同时符合多个条件的元素。

语法：选择器1选择器2选择器3...选择器n {}

css 复制代码

/* 选中：类名为beauty的p元素，只有p或类名为beauty的元素不生效，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}

/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>交集选择器</title>
  <style>
    /* 第一个 p 标签文字颜色是红色 */
    /* 既又的关系：既是 p 标签，又是有 box 类 */
    p.box {
      color: red;
    }
  </style>
</head>
<body>
  <p class="box">p 标签，使用了类选择器 box</p>
  <p>p 标签</p>
  <div class="box">div 标签，使用了类选择器</div>
</body>
</html>

注意：

有标签名，标签名必须写在前面。
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2. 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

css 复制代码

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>并集选择器</title>
  <style>
    /* div、p、span 文字颜色是红色 */
    div,
    p,
    span {
      color: red;
    }
  </style>
</head>
<body>
  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>
</body>
</html>

注意：

并集选择器，一般竖着写。
任何形式的选择器，都可以作为并集选择器的一部分。
并集选择器，通常用于集体声明，可以缩小样式表体积。

3. 后代选择器

作用：选中指定元素中，符合要求的后代元素

语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代,选择器之间，用空格隔开）

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>后代选择器</title>
  <style>
    /* div 里面的 span 文字颜色是红色 */
    /* 后代选择器，选中所有后代，包含儿子、孙子、重孙子... */
    div span {
      color: red;
    }
  </style>
</head>
<body>
  <span>span 标签</span>
  <div>
    <span>这是div 的儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>
</body>
</html>

注意：

后代选择器，最终选择的是后代，不选中祖先。
儿子、孙子、重孙子，都算是后代。
结构要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

4. 子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

注意:不同于后代选择器会选择所有后代，子代选择器只选择儿子那一层！

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子代选择器</title>
  <style>
    /* div 的儿子 span 文字颜色是红色 */
    div > span {
      color: red;
    }
  </style>
</head>
<body>
   <span>儿子 span</span>
  <div>
    <span>儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div>
</body>
</html>

5. 兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。语法：选择器1+选择器2 {} 。

css 复制代码

/* 选中div后相邻的兄弟p元素,只选中一个，若div后无相邻的p元素则无元素被选中 */
div+p {
color:red;
}

通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

css 复制代码

/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}
/* 第一个li元素不被选中，第二个及以后的li被选中 */
li~li {
color: orange;
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        /* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）------ 相邻兄弟选择器 */
        /* div+p {
            color: red;
        } */
        /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）------ 通用兄弟选择器 */
        div~p {
            color: red;
        }
        li~li {
            color: orange;
        }
    </style>
</head>
<body>
    <div>111</div>
    <p>前端</p>
	<p>Java</p>
	<p>大数据</p>
	<p>UI</p>
    <ul>
        <li>主页</li>
        <li>秒杀</li>
        <li>订单</li>
        <li>我的</li>
    </ul>
</body>
</html>

6. 属性选择器

作用：选中属性值符合一定要求的元素。

语法：

$属性名\] 选中具有某个属性的元素。$
$属性名\^="值"\] 选中包含某个属性，且属性值以指定的值开头的元素。$
$属性名\*="值"\] 选择包含某个属性，属性值包含指定值的元素。$

/* 第一种写法：选中具有title属性的元素 */
[title] {
color: red;
}

/* 第二种写法：选中具有title属性，且属性值为atguigu1的元素 */
[title="atguigu1"] {
color: red;
}

/* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
[title^="a"] {
color: red;
}

/* 第四种写法：选中具有title属性，且属性值以字母u结尾的元素 */
[title$="u"] {
color: red;
}

/* 第五种写法：选中具有title属性，且属性值包含字母u的元素 /
[title="u"] {
color: red;
}

复制代码

#### 7. 伪类选择器

作用：选中特殊状态的元素。  

分类：

##### 1.动态伪类(lvhaf)

1. :link 超链接未被访问的状态。
2. :visited 超链接访问过的状态。
3. :hover 鼠标悬停在元素上的状态。
4. :active 元素激活的状态。 什么是激活？------ 按下鼠标不松开。  
   注意点：**遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。否则会有状态不显示** 。  
   例如先声明a在生命h，则点击超链接元素不松手时，无a声明的显示效果，实际为h的显示效果，因为h的显示效果在后面，将先声明的a的元素效果覆盖了
5. :focus 获取焦点的元素。 表单类元素才能使用 :focus 伪类。 当用户点击元素、触摸元素、或通过键盘的 " tab " 键等方式，选择元素时，就是获得焦点。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_动态伪类</title>
    <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: orange;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: gray;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover {
            color: skyblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active {
            color: green;
        }
        /* 选中的是鼠标悬浮的span元素 */
        span:hover {
            color: green;
        }
        /* 选中的是激活的span元素 */
        span:active {
            color: red;
        }
        /* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */
        input:focus,select:focus {
            color: orange;
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>222</span>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
</body>
</html>

2.结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

css 复制代码

/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） */
div>p:first-child {
    color: red;
} 


 /* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） */
div p:first-child {
  color: red;
} 

/* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） */
p:first-child {
  color: red;
}

关于 n 的值：

0 或不写：什么都选不中 ------ 几乎不用。
n ：选中所有子元素 ------ 几乎不用。
1~正无穷的整数：选中对应序号的子元素。
2n 或 even ：选中序号为偶数的子元素。
2n+1 或 odd ：选中序号为奇数的子元素。
-n+3 ：选中的是前 3 个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

3.否定伪类

:not(选择器) 排除满足括号中条件的元素。

css 复制代码

 /* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
div>p:not(:first-child) {
    color: red;
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12_伪类选择器_否定伪类</title>
    <style>
        /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
        /* div>p:not(.fail) {
            color: red;
        } */

        /* 选中的是div的儿子p元素，但是排除title属性值以"你要加油"开头的 */
        /* div>p:not([title^="你要加油"]) {
            color: red;
        } */

        /* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
        div>p:not(:first-child) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p class="fail" title="你要加油啊！孙七">孙七：58分</p>
        <p class="fail" title="你要加油啊！老八">老八：48分</p>
    </div>
</body>
</html>

4.UI伪类

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。

html 复制代码

/* 选中的是勾选的复选框或单选按钮 */
<style>
input:checked {
    width: 100px;
    height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
    background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled {
    background-color: green;
}
</style>
<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="text">
    <input type="text" disabled>
</body>

效果如下所示

5.目标伪类

:target 选中锚点指向的元素，锚点定位时可用于设置选中元素的属性，如设置背景色和未定位元素不一致。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_目标伪类</title>
    <style>
        div {
            background-color: gray;
            height: 300px;
        }
        div:target {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">去看第1个</a>
    <a href="#two">去看第2个</a>
    <a href="#three">去看第3个</a>
    <a href="#four">去看第4个</a>
    <a href="#five">去看第5个</a>
    <a href="#six">去看第6个</a>

    <div id="one">第1个</div>
    <br>
    <div id="two">第2个</div>
    <br>
    <div id="three">第3个</div>
    <br>
    <div id="four">第4个</div>
    <br>
    <div id="five">第5个</div>
    <br>
    <div id="six">第6个</div>
</body>

6.语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_语言伪类</title>
    <style>
        div:lang(en) {
            color: red;
        }
        :lang(zh-CN) {
            color: green;
        }
    </style>
</head>
<body>
    <div>1111</div>
    <div lang="en">2222</div>
    <p>前端</p>
    <span>你好</span>
</body>
</html>

8. 伪元素选择器

作用：选中元素中的一些特殊位置。常用伪元素：

::first-letter 选中元素中的第一个文字。

::first-line 选中元素中的第一行文字。

::selection 选中被鼠标选中的内容。

::placeholder 选中输入框的提示文字。

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 什么是伪元素？ ------ 很像元素，但不是元素（element），是元素中的一些特殊位置 */
        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content:".00"
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>
</html>