search

博客列表 >css选择器

css选择器

小程_武汉_214945
小程_武汉_214945原创
2020年04月15日 19:18:31745浏览

选择器

1. 简单选择器

1.1 种类

选择器 描述 举例
元素选择器 根据元素标签名称进行匹配 div {...}
群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
通配选择器 选择全部元素,不区分类型 * {...}
属性选择器 根据元素属性进行匹配 *[...]
类选择器 根据元素 class 属性进行匹配 *.active {...}
id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

  • 选择器有优先级：id>class>标签 可使用!important添加优先级权重

  • 效果展示

  • 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>简单选择器</title>
  7.     <style>
  8.       /* 用类选择器创建九宫格结构 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 用id选择器将1变为红色 */
  24.       #first {
  25.         background-color: red;
  26.       }
  27.       /* 用元素选择器将body背景变为黄色 */
  28.       body {
  29.         background-color: #ffffa2;
  30.       }
  31.       /* 含多个类的选择器 */
  32.       .item.center {
  33.         background-color: #ff80ff;
  34.       }
  35.       /* 属性选择器 */
  36.       /* 选中带有title属性的div */
  37.       div[title] {
  38.         background-color: #9efa9c;
  39.       }
  40.       /* 选中title属性值为8的item类 */
  41.       .item[title="8"] {
  42.         background-color: #a3a3a3;
  43.       }
  44.       /* 因为优先级id>class>标签所以8号位颜色不是绿色而是灰色 */
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <div class="container">
  49.       <div class="item" id="first">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  52.       <div class="item">4</div>
  53.       <div class="item center">5</div>
  54.       <div class="item">6</div>
  55.       <div class="item">7</div>
  56.       <div class="item" title="8">8</div>
  57.       <div class="item" title="9">9</div>
  58.     </div>
  59.   </body>
  60. </html>

2. 上下文选择器

  • html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
  • 每一个元素, 在文档中, 都有自己的位置,即上下文关系
  • 所以, 完全可以根据元素的上下文关系,来获取到它们

2.1 一个元素的四种角色

角色 描述
祖先元素 拥有子元素,孙元素等所有层级的后代元素
父级元素 仅拥有子元素层级的元素
后代元素 与其它层级元素一起拥有共同祖先元素
子元素 与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

选择器 操作符 描述 举例
后代选择器 空格 选择当前元素的所有后代元素 div p, body *
父子选择器 > 选择当前元素的所有子元素 div > h2
同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

  • 效果展示

  • 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>上下文选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 后代选择器 */
  23.       body div {
  24.         border: 3px solid red;
  25.       }
  26.       /* 子类选择器 */
  27.       div > .item {
  28.         border: 2px solid rgb(207, 33, 230);
  29.       }
  30.       /* 同级相邻选择器 */
  31.       .item.center + .item {
  32.         background-color: rgb(7, 6, 94);
  33.       }
  34.       /* 同级所有选择器 */
  35.       .item.six ~ .item {
  36.         background-color: #fff;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.       <div class="item">4</div>
  46.       <div class="item center">5</div>
  47.       <div class="item six">6</div>
  48.       <div class="item">7</div>
  49.       <div class="item eight">8</div>
  50.       <div class="item">9</div>
  51.     </div>
  52.   </body>
  53. </html>

3. 伪类选择器

  • 学习之前,先分析上下文选择器的局限性,例如选择同一个父级下的第二个子元素,就没那么简单
  • 而伪类就正好弥补了上下文选择器的短板, 所以伪类,大多数是基于文档中元素结构的
  • 伪: 本意是假的,不存在的意思, 这里是特指, 不需要在元素上添加额外的属性来获取元素
  • 类: 暗指伪类的级别, 仍然是属于”class”级别, 仍然属于属性选择器范畴,级别高于元素选择器

我们重点放在伪类最重要的应用场景:

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.1 不分组匹配

选择器 描述 举例
:first-child 匹配第一个子元素 div :first-child
:last-child 匹配最后一个子元素 div :last-child
:only-child 选择元素的唯一子元素 div :only-child
:nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
:nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

  • 效果展示

  • 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>结构伪类: 不分组匹配</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 第一个元素 */
  23.       .container > :first-child {
  24.         background-color: #4ae36c;
  25.       }
  26.       /* 最后一个元素 */
  27.       .container > :last-child {
  28.         background-color: #280fd7;
  29.       }
  30.       /* 第五个元素 */
  31.       .container > :nth-child(5) {
  32.         background-color: rgb(204, 143, 143);
  33.       }
  34.       /* 倒数第三个元素 */
  35.       .container > :nth-last-child(3) {
  36.         background-color: rgb(247, 231, 15);
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.       <div class="item">4</div>
  46.       <div class="item">5</div>
  47.       <div class="item">6</div>
  48.       <div class="item">7</div>
  49.       <div class="item">8</div>
  50.       <div class="item">9</div>
  51.     </div>
  52.   </body>
  53. </html>

3.1.2 分组匹配

选择器 描述 举例
:first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
:last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
:only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
:nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
:nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面

  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素

  • 效果展示

  • 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>结构伪类: 分组匹配</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 前三个div */
  23.       .container > div:nth-of-type(-n + 3) {
  24.         background-color: rgb(235, 44, 44);
  25.       }
  26.       /* 后三个span */
  27.       .container > span:nth-last-of-type(-n + 3) {
  28.         background-color: rgb(18, 230, 99);
  29.       }
  30.       /* 鼠标悬停换背景颜色 */
  31.       .container > .item:hover {
  32.         background-color: #fff;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">4</div>
  42.       <!-- 分为二组 -->
  43.       <span class="item">5</span>
  44.       <span class="item">6</span>
  45.       <span class="item">7</span>
  46.       <span class="item">8</span>
  47.       <span class="item">9</span>
  48.     </div>
  49.   </body>
  50. </html>

3.3 其它伪类

选择器 描述
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:root 根元素,通常是html
:empty 选择没有任何子元素的元素(含文本节点)
:not() 排除与选择器参数匹配的元素
:enable 匹配表单中有效属性的元素
:disable 匹配表单中禁用属性的元素
:required 匹配表单中必选属性的元素

  • 效果展示

  • 代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单伪类</title>
  7.     <style>
  8.       :root {
  9.         background-color: rgb(238, 247, 192);
  10.       }
  11.       /* 有效地表单伪类 */
  12.       input:enabled {
  13.         background-color: rgb(178, 201, 228);
  14.       }
  15.       /* 禁用的表单伪类 */
  16.       input:disabled {
  17.         background-color: rgb(169, 173, 169);
  18.       }
  19.       /* 键盘焦点 */
  20.       input:focus {
  21.         background-color: #fff;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <h3>用户登录</h3>
  27.     <form action="" method="post">
  28.       <div>
  29.         <label for="email">邮箱:</label>
  30.         <input
  31.           type="email"
  32.           id="email"
  33.           name="email"
  34.           required
  35.           placeholder="example@email.com"
  36.         />
  37.       </div>
  38.       <div>
  39.         <label for="password">密码:</label>
  40.         <input
  41.           type="password"
  42.           id="password"
  43.           name="password"
  44.           required
  45.           placeholder="不得少于6位"
  46.         />
  47.       </div>
  48.       <div>
  49.         <label for="save">保存密码:</label>
  50.         <input type="checkbox" id="save" name="save" checked readonly />
  51.       </div>
  52.       <div>
  53.         <label for="save_time">保存期限:</label>
  54.         <select name="save_time" id="save_time">
  55.           <option value="7" selected>7天</option>
  56.           <option value="30">30天</option>
  57.         </select>
  58.       </div>
  59.       <div>
  60.         <input type="hidden" name="login_time" value="登陆时间戳" />
  61.       </div>
  62.       <div>
  63.         <label for="warning">警告:</label>
  64.         <input
  65.           type="text"
  66.           id="warning"
  67.           value="一天内仅允许登录三次"
  68.           style="border: none;"
  69.           disabled
  70.         />
  71.       </div>
  72.       <script>
  73.         document.querySelector('[type="hidden"]').value = new Date().getTime();
  74.       </script>
  75.     </form>
  76.   </body>
  77. </html>
上一条：Grid 布局基础知识详解下一条：Grid实战案例分享(相册和栅格布局组件)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多