search

博客列表 >细说CSS选择器

细说CSS选择器

昊森
昊森原创
2023年02月08日 02:08:35339浏览

基本选择器

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

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

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

标签选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <!-- 引入外部样式表 -->
  9.     <link rel="stylesheet" href="/index.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 创建一个H2标签 -->
  13.     <h2 class="head">你好，在线源码网</h2>
  14.   </body>
  15. </html>

css代码

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

属性选择器

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

css代码

  1. /* 使用标签选择器将h2标签内的内容更改为红色 */
  2. h2 {
  3.   color: red;
  4. }
  5. /* 属性选择器 */
  6. h2[class="sety"] {
  7.   color: aqua;
  8. }

ID选择器

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

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

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

css代码

  1. /* 使用标签选择器将h2标签内的内容更改为红色 */
  2. h2 {
  3.   color: red;
  4. }
  5. /* 属性选择器 */
  6. h2[class="sety"] {
  7.   color: aqua;
  8. }
  9. /* id选择器 */
  10. h2[id="hs"] {
  11.   color: blue;
  12. }


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

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

  1. /* 属性选择器 */
  2. h2[class="sety"] {
  3.   color: aqua;
  4. }
  5. /* id选择器 */
  6. h2[id="hs"] {
  7.   color: blue;
  8. }
  9. /* 属性选择器(简化) */
  10. h2.sety{
  11.     color: coral;
  12. }
  13. h2#hs{
  14.     color: fuchsia;
  15. }

上下文选择器

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

  1. 父子：>
    2.后代：空格
    3.兄弟：+
    4.同级：~
    class权重是很高的，所以为了降低权重我们需要采用一些技巧
  1. <!-- 上下文选择器 -->
  2.     <ul class="list">
  3.       <li class="hs">item1</li>
  4.       <li class="hs">item2</li>
  5.       <li class="hs">item3</li>
  6.       <li class="hs">item4</li>
  7.       <li class="hs zx">item5</li>
  8.       <li class="hs">item6</li>
  9.       <li class="hs">item7</li>
  10.       <li class="hs">item8</li>
  11.     </ul>

css代码

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

伪类选择器

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

结构伪类

  1. :nth-child()：
  2. :first-child()：
  3. :last-child()：
  4. :nth-last-child()：

状态伪类

通常用于链接与表单元素

  1. :hover：鼠标悬停
  2. :enabled：有效控件
  3. :disabled：禁用控件
  4. :checked：选中控件
  5. :required：必选控件
  6. `:focus：焦点控件
  1. <!-- 伪类选择器 -->
  2.     <ul class="list">
  3.       <li>itme1</li>
  4.       <li>itme2</li>
  5.       <li>itme3</li>
  6.       <li>itme4</li>
  7.       <li class="five">itme5</li>
  8.       <li>itme6</li>
  9.       <li>itme7</li>
  10.       <li>itme8</li>
  11.       <li>itme9</li>
  12.       <li>itme10</li>
  13.     </ul>

css代码

  1. /* !伪类选择器 结构*/
  2. /* 伪类选择器，最常用的就是结构伪类，用于查询子元素 */
  3. /* 这与上下文选择器非常相似，必须设置一个起点，否则从html开始查询 */
  4. /* 与上下文选择器相比，结构伪类要简洁很多，除起点元素外，几乎不需要在子元素上添加多余属性 */
  5. /* 获取第五个 */
  6. .list :nth-child(5) {
  7.   background: #ff3;
  8. }
  9. /* 获取左后八个  */
  10. .list :nth-child(8) {
  11.   background: #ff3;
  12. }
  13. /* 第一个和最后一个属于高频操作，经常用 */
  14. /* 获取第一个 */
  15. .list :first-child {
  16.   background: #f09;
  17. }
  18. /* 获取左后一个  */
  19. .list :last-child {
  20.   background: #f09;
  21. }
  22. /* 匹配前三个 */
  23. .list :nth-child(-n + 3) {
  24.   background: #ff3;
  25. }
  26. /* 匹配第五个之后的所有 */
  27. /* 用上下文选择器的方式 */
  28. /* 这个是群组选择器的使用方式 */
  29. .list > .five,
  30. .list > .five ~ * {
  31.   background: violet;
  32. }
  33. /* 用伪类的方式获取地址个之后的所有 */
  34. /* 可以对比出来那个更简单，更方便 */
  35. .list :nth-child(n + 5) {
  36.   background: blue;
  37. }

nth-child()计算方式

:nth-of-type(an+b)

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <!-- 引入外部样式表 -->
  9.     <link rel="stylesheet" href="/index.css" />
  10.   </head>
  11.   <body>
  12.     <ul class="list">
  13.       <li>item1</li>
  14.       <li>item2</li>
  15.       <li>item3</li>
  16.       <li>item4</li>
  17.       <li>item5</li>
  18.       <li>item6</li>
  19.       <li>item7</li>
  20.       <li>item8</li>
  21.       <li>item9</li>
  22.       <li>item10</li>
  23.     </ul>
  24.   </body>
  25. </html>

css代码

  1. /* 匹配元素的场景有两种
  2. 1、匹配一个
  3. 2、匹配一组 */
  4. /* a=0 ： 匹配一个 */
  5. /* .list > :nth-child(0n + 1) {
  6.   color: aqua;
  7. } */
  8. /* 0乘以任何数都是0，那么0n=0   0+1还是1 所以我们可以这样写 */
  9. .list > :nth-child(1) {
  10.   color: aqua;
  11. }
  12. /* -------------------------- */
  13. /* a=1: 匹配一组 */
  14. .list > :nth-child(1n + 2) {
  15.   color: blue;
  16. }
  17. /* 从第二个开始全部获取 */
  18. /* ---------------- */
  19. /* 只获取前三个：反选 */
  20. .list > :nth-child(-1n + 3) {
  21.   color: black;
  22. }
  23. /* 1乘以任何数都不变，所以我们可以省略1， */
  24. /* 所以上面的两个我们可以直接省略1 */
  25. .list > :nth-child(n + 2) {
  26.   color: blue;
  27. }
  28. .list > :nth-child(-n + 3) {
  29.   color: black;
  30. }
  31. /* 偶数位 */
  32. /* 如果a=2会怎么样呢？ */
  33. .list > :nth-child(2n) {
  34.   background: #000;
  35. }
  36. /* 他会变成偶数，即2/4/6/8/10 */
  37. /* 2n可以用even关键字代替 */
  38. .list > :nth-child(even) {
  39.   background: rgb(244, 0, 0);
  40. }
  41. /* 奇数2n+1 */
  42. .list > :nth-child(2n + 1) {
  43.   background: rgb(54, 177, 60);
  44. }
  45. /* 获取倒数第四个之后的 */
  46. .list > :nth-last-child(-n + 4) {
  47.   background: rgb(18, 192, 255);
  48. }

状态伪类

html代码

  1. <form action="">
  2.       <fieldset>
  3.         <legend>用户注册</legend>
  4.         <input type="text" id="user" name="user" placeholder="用户名" />
  5.         <input type="email" id="email" name="email" placeholder="邮箱" />
  6.         <input type="password" id="pass" name="pass" placeholder="密码" />
  7.         <div>
  8.           <input type="checkbox" id="rem" />
  9.           <label for="rem">记住我</label>
  10.         </div>
  11.         <button>提交</button>
  12.       </fieldset>
  13.     </form>

css代码

  1. fieldset {
  2.   width: 20px;
  3. }
  4. /* 用户注册居中显示 */
  5. fieldset legend {
  6.   text-align: center;
  7. }
  8. /* 当记住我为选中状态更改颜色 */
  9. input[type="checkbox"]:checked + label {
  10.   color: aqua;
  11. }
  12. /* 设置按钮的基础样式 */
  13. button {
  14.   border: none;
  15.   outline: none;
  16.   background: #2ba7ba;
  17.   width: 170px;
  18.   height: 25px;
  19.   color: #fff;
  20. }
  21. /* 鼠标悬停至提交按键的时候按钮发生变化 */
  22. /* cursor: pointer;鼠标悬停变为小手 */
  23. /* opacity: 0.8;鼠标悬停调整透明度 */
  24. button:hover {
  25.   cursor: pointer;
  26.   opacity: 0.8;
  27. }
上一条：实战使用css选择器做一个下拉菜单下一条：实例演示字体图标的引入与显示与媒体查询(移动优先)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多