search

博客列表 >css选择器

css选择器

Mryang的博客
Mryang的博客原创
2020年04月08日 23:30:30550浏览

选择器

1. 简单选择器

1.1 种类

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略
  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>简单选择器</title>
  6.     <style>
  7.       .container{
  8.         width:300px;
  9.         height:300px;
  10.         display: grid;
  11.         grid-template-columns: repeat(3, 1fr);
  12.         gap: 5px;
  13.       }
  14.       .container div{
  15.         background-color: #e4defe;
  16.         font-size: 2rem;
  17.         display: flex;
  18.         justify-content: center;
  19.         align-items: center;
  20.       }
  22.       /* 元素选择器 */
  23.       body{
  24.         background-color: #86bdce;
  25.       }
  27.       /* 群组选择器 */
  28.       span,p{
  29.         background-color: #818726;
  30.       }
  32.       /* 通配选择器 */
  33.       *{
  34.         color:lemonchiffon
  35.       }
  37.       /* 属性选择器 */
  38.       .item[name='aba']{
  39.         background-color: #eeccbb;
  40.       }
  42.       /* 类选择器 */
  43.       .item{
  44.         color: mediumblue;
  45.       }
  47.       /* id选择器 */
  48.       #second{
  49.         background-color: #6aa97a;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item">1</div>
  56.       <div class="item" id='second'>2</div>
  57.       <div class="item" name='glootie'>3</div>
  58.       <div class="item">4</div>
  59.       <div class="item center">5</div>
  60.       <div class="item" name='aba'>6</div>
  61.       <div class="item">7</div>
  62.       <div class="item">8</div>
  63.       <div class="item">9</div>
  64.     </div>
  66.     <span>span</span>
  67.     <p>p</p>
  68.   </body>
  69. </html>

2. 上下文选择器

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

2.1 一个元素的四种角色

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

2.2 四种上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 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.       }
  16.       /* 类选择器 */
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightskyblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       /* 后代选择器 */
  26.       *.container div {
  27.         border: 2px solid #e4137b;
  28.       }
  30.       /* 父子选择器,只有外层的div受影响 */
  31.       body > div {
  32.         border: 3px solid #aceb32;
  33.       }
  35.       /* 使用后代选择器模拟父子选择器 */
  36.       body div.container {
  37.         border: 3px solid #9a7c6e;
  38.       }
  40.       /* 同级相邻选择器 */
  41.       /* 选择与第5个相邻的,即后面的"一个"元素 */
  42.       .item.center + .item {
  43.         background-color: #aa99ee;
  44.       }
  46.       /* 同级所有选择器 */
  47.       /* 选择与第5个后面的,有共同父级的所有兄弟元素 */
  48.       .item.seven ~ .item {
  49.         background-color: #9a8c7e;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item">1</div>
  56.       <div class="item">2</div>
  57.       <div class="item">3</div>
  58.       <div class="item">4</div>
  59.       <div class="item center">5</div>
  60.       <div class="item">6</div>
  61.       <div class="item seven">7</div>
  62.       <div class="item">8</div>
  63.       <div class="item">9</div>
  64.     </div>
  65.   </body>
  66. </html>

3. 伪类选择器

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

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

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

3.1 结构伪类

3.1.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :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.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  24.       /* 匹配第一个子元素 */
  25.       .container :first-child{
  26.         background-color: #cefe9a;
  27.       }
  29.       /* 匹配最后一个子元素 */
  30.       .container :last-child{
  31.         background-color: #123867;
  32.       }
  34.       /* 选择唯一子元素 */
  35.       .only :only-child{
  36.         background-color: #febacd;
  37.       }
  39.       /* 匹配任意位置子元素(下标从1开始) */
  40.       .container :nth-child(4){
  41.         background-color: rgb(50, 197, 241);
  42.       }
  44.       /* 匹配倒数任意位置子元素 */
  45.       .container :nth-last-child(2){
  46.         background-color: rgb(235, 182, 68);
  47.       }
  49.       /* 匹配前3个子元素 */
  50.       .container :nth-child(-n+3){
  51.         color:orchid
  52.       }
  54.       /* 匹配后三个子元素 */
  55.       .container :nth-last-child(-n+3){
  56.         color:yellow
  57.       }
  59.       /* 匹配奇数 */
  60.       .container :nth-child(2n-1){
  61.         font-size: 10px;
  62.       }
  64.       /* 匹配偶数 */
  65.       .container :nth-child(2n){
  66.         font-size: 40px;
  67.       }
  68.     </style>
  69.   </head>
  70.   <body>
  71.     <div class="container">
  72.       <div class="item">1</div>
  73.       <div class="item">2</div>
  74.       <div class="item">3</div>
  75.       <div class="item">4</div>
  76.       <div class="item">5</div>
  77.       <div class="item">6</div>
  78.       <div class="item">7</div>
  79.       <div class="item">8</div>
  80.       <div class="item">9</div>
  81.     </div>
  83.     <div class='only'>
  84.       <span>only</span>
  85.     </div>
  86.   </body>
  87. </html>

3.1.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :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.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  24.       /* 匹配分组后的第一个元素,如果不指定类型，则选中所有分组的第一个元素 */
  25.       .container :first-of-type{
  26.         color:palevioletred
  27.       }
  29.       .container div:first-of-type{
  30.         background-color: #2718fa;
  31.       }
  33.       .container span:first-of-type{
  34.         background-color: #1fc6f0;
  35.       }
  37.       /* 匹配分组后的最后一个元素 */
  38.       .container div:last-of-type{
  39.         background-color: #ec6083;
  40.       }
  42.       .container div:nth-of-type(3){
  43.         background-color: #1ce27f;
  44.       }
  46.       .container span:nth-last-of-type(3){
  47.         background-color: #1c93e2;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="container">
  53.       <div class="item">1</div>
  54.       <div class="item">2</div>
  55.       <div class="item">3</div>
  56.       <div class="item">4</div>
  57.       <!-- 分为二组 -->
  58.       <span class="item">5</span>
  59.       <span class="item">6</span>
  60.       <span class="item">7</span>
  61.       <span class="item">8</span>
  62.       <span class="item">9</span>
  63.     </div>
  64.   </body>
  65. </html>

3.3 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>其他伪类</title>
  8.   <style>
  9.     :root {
  10.       background-color: lightgreen;
  11.     }
  13.     input:enabled {
  14.       background-color: blanchedalmond;
  15.     }
  17.     input:disabled {
  18.       background-color: lightgreen;
  19.     }
  21.     input:required {
  22.       background-color: yellow;
  23.     }
  25.     input:active {
  26.       background-color: #af1717;
  27.     }
  29.     input:focus {
  30.       background-color: #443ace;
  31.     }
  33.     h3:hover {
  34.       background-color: rgb(41, 241, 191);
  35.     }
  37.     a:link {
  38.       background-color: rgb(210, 172, 228);
  39.     }
  41.     a:visited {
  42.       background-color: rgb(26, 238, 245);
  43.     }
  45.     input:empty {
  46.       background-color: rgb(226, 55, 218);
  47.     }
  49.     :not(input) {
  50.       background-color: #fff;
  51.     }
  52.   </style>
  53. </head>
  55. <body>
  56.   <h3>用户登录</h3>
  57.   <form action="" method="post">
  58.     <div>
  59.       <label for="email">邮箱:</label>
  60.       <input type="email" id="email" name="email" required placeholder="example@email.com" />
  61.     </div>
  63.     <div>
  64.       <label for="password">密码:</label>
  65.       <input type="password" id="password" name="password" required placeholder="不得少于6位" />
  66.     </div>
  68.     <div>
  69.       <label for="save">保存密码:</label>
  70.       <input type="checkbox" id="save" name="save" checked readonly />
  71.     </div>
  73.     <div>
  74.       <label for="save_time">保存期限:</label>
  75.       <select name="save_time" id="save_time">
  76.         <option value="7" selected>7天</option>
  77.         <option value="30">30天</option>
  78.       </select>
  79.     </div>
  81.     <div>
  82.       <input type="hidden" name="login_time" value="登陆时间戳" />
  83.     </div>
  85.     <div>
  86.       <label for="warning">警告:</label>
  87.       <input type="text" id="warning" value="一天内仅允许登录三次" style="border: none;" disabled />
  88.     </div>
  90.     <a href="">php中文网</a>
  92.     <script>
  93.       document.querySelector('[type="hidden"]').value = new Date().getTime();
  94.     </script>
  95.   </form>
  96. </body>
  98. </html>

4.总结

复习了一遍选择器，知道了类、id选择器前面是省略了元素类型*

上一条：CSS基础：框模型（盒模型）下一条：CSS之盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多