search

博客列表 >CSS中简单选择器，上下文选择器的实战应用随笔

CSS中简单选择器，上下文选择器的实战应用随笔

浪子修罗记录有趣的事
浪子修罗记录有趣的事原创
2020年06月16日 12:46:15903浏览

选择器:简单选择器

元素选择器：标签选择器

*:属于元素级别
优先级元素 < class < id
1、类选择器
前面是.
2、ID 选择器
前面是#号

  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.       /* 九宫格演示：grid布局 */
  9.       .container {
  10.         width: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 元素选择器：标签选择器 */
  24.       body {
  25.         background-color: bisque;
  26.       }
  27.       /* 类选择器：对应HTML标签中的class属性 */
  28.       .item {
  29.         border: 1px solid rebeccapurple;
  30.       }
  31.       /* 多个类复合应用 */
  32.       .item.center {
  33.         background-color: rosybrown;
  34.       }
  35.       /* ID选择器 */
  36.       #first {
  37.         background-color: salmon;
  38.       }
  39.       /* ID,CLASS可以添加到任何元素上 */
  40.       /* ID选择器的应用场景目前只有二种：表单元素 和 锚点 */
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="container">
  45.       <div class="item" id="first">1</div>
  46.       <div class="item">2</div>
  47.       <div class="item">3</div>
  48.       <div class="item">4</div>
  49.       <div class="item center">5</div>
  50.       <div class="item">6</div>
  51.       <div class="item">7</div>
  52.       <div class="item">8</div>
  53.       <div class="item">9</div>
  54.     </div>
  55.   </body>
  56. </html>

-重点内容在代码注释中

选择器:上下文选择器

  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.       /* 九宫格演示：grid布局 */
  9.       .container {
  10.         width: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 1、后代选择器  空格  */
  24.       .container div {
  25.         border: salmon solid 1px;
  26.       }
  27.       /* 2、父子选择器 >  只选择body下的第一级div*/
  28.       body > div {
  29.         border: 5px solid coral;
  30.       }
  31.       /* 3、同级相邻选择器 + 同级下一个*/
  32.       .item.center + .item {
  33.         background-color: darkblue;
  34.       }
  35.       /* 4、同级所有选择器  ~  */
  36.       .item.center ~ .item {
  37.         background-color: darkmagenta;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item">1</div>
  44.       <div class="item">2</div>
  45.       <div class="item">3</div>
  46.       <div class="item">4</div>
  47.       <div class="item center">5</div>
  48.       <div class="item">6</div>
  49.       <div class="item">7</div>
  50.       <div class="item">8</div>
  51.       <div class="item">9</div>
  52.     </div>
  53.   </body>
  54. </html>

-重点内容在代码注释中

5、结构伪类选择器

不分组
  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.       /* 九宫格演示：grid布局 */
  9.       .container {
  10.         width: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 匹配第一个子元素 使用 > 来精确指定 */
  24.       .container > :first-child {
  25.         background-color: darkmagenta;
  26.       }
  27.       /* 最后一个子元素 */
  28.       .container > :last-child {
  29.         background-color: darkslategray;
  30.       }
  31.       /* 选择第3个 索引是从1开始，不是0 */
  32.       .container > :nth-child(3) {
  33.         background-color: dodgerblue;
  34.       }
  35.       /* 只选择偶数单元格   2n 或 even */
  36.       .container > :nth-child(2n) {
  37.         background-color: green;
  38.       }
  39.       /* 只选择奇数单元格  2n -1 或 odd */
  40.       .container > :nth-child(2n -1) {
  41.         background-color: lawngreen;
  42.       }
  43.       /* 从指定位置(从第4个)开始，选择剩下的所有有元素 */
  44.       .container > .item:nth-child(n + 4) {
  45.         background-color: lightgrey;
  46.       }
  47.       /* 只取前三个 */
  48.       .container .item:nth-child(-n + 3) {
  49.         background-color: lightseagreen;
  50.       }
  51.       /* 取最后三个 */
  52.       .container .item:nth-last-child(-n + 3) {
  53.         background-color: magenta;
  54.       }
  55.       /* 取第8个，用倒数的方式更快，直观 */
  56.       .container .item:nth-last-child(2) {
  57.         background-color: mediumblue;
  58.       }
  59.       /* n 是从0开始计算。所以： 
  60.          n  + 4 = 4
  61.          -n + 3 = 3     */
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <div class="container">
  66.       <div class="item">1</div>
  67.       <div class="item">2</div>
  68.       <div class="item">3</div>
  69.       <div class="item">4</div>
  70.       <div class="item">5</div>
  71.       <div class="item">6</div>
  72.       <div class="item">7</div>
  73.       <div class="item">8</div>
  74.       <div class="item">9</div>
  75.     </div>
  76.   </body>
  77. </html>

-重点内容在代码注释中

分组
  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.       /* 九宫格演示：grid布局 */
  9.       .container {
  10.         width: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /*
  24.       分组结构伪类分二步：
  25.       1、元素按类型进行分组
  26.       2、在分组中根据索引进行选择
  27.       */
  29.       /* 在div分组中最后一个元素 */
  30.       .container div:last-of-type {
  31.         background-color: mediumseagreen;
  32.       }
  33.       /* 在span分组匹配任何一个 */
  34.       .container span:nth-of-type(3) {
  35.         background-color: mediumslateblue;
  36.       }
  37.       /* 在span分组中前3个 */
  38.       .container span:nth-of-type(-n + 3) {
  39.         background-color: lawngreen;
  40.       }
  41.       /* 在span分组中倒数2个 */
  42.       .container span:nth-last-of-type(-n + 2) {
  43.         background-color: lightsalmon;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <div class="container">
  49.       <div class="item">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  53.       <span class="item">4</span>
  54.       <span class="item">5</span>
  55.       <span class="item">6</span>
  56.       <span class="item">7</span>
  57.       <span class="item">8</span>
  58.       <span class="item">9</span>
  59.     </div>
  60.   </body>
  61. </html>

-重点内容在代码注释中

伪类与伪元素

  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.       /* :target: 必须ID配合，实现锚点操作 */
  9.       /* 关掉form标签 */
  10.       #login-form {
  11.         display: none;
  12.       }
  13.       /* 当前#login-form的表单元素被A的锚点激活的时候执行 */
  14.       #login-form:target {
  15.         display: block;
  16.       }
  17.       /* :focus:当获取焦点的时候执行 */
  18.       input:focus {
  19.         background-color: lightsalmon;
  20.       }
  22.       /* ::selection: 设置焦点文本的前景色与背景色 */
  23.       /* input可以是其它元素 如：label */
  24.       input::selection {
  25.         color: red;
  26.         background-color: lime;
  27.       }
  28.       /* :not(): 用于选择不满足条件元素 */
  29.       .list > *:not(:nth-of-type(3)){
  30.           color: blue;
  31.       }
  32.       /* 浏览器自动补全生成的HTML称之为伪元素 是不能被选择的 */
  33.       /* ::before 在什么之前 */
  34.       .list::before {
  35.           content: "购物车";
  36.           color: blueviolet;
  37.           font-size: 1.5rem;
  38.           border-bottom: 1px solid lightcoral;
  40.       }
  41.       /* ::after: 在什么之后 */
  43.       .list::after {
  44.           content: "结算中。。。。";
  45.           color: rgb(44, 22, 141);
  46.           font-size: 1.5rem;
  48.       }
  49.       /* 伪元素前面是双冒号，伪类前面是单冒号 */
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <a href="#login-form">点我显示登录</a>
  54.     <button onclick="location='#login-form'">点我登录</button>
  55.     <form action="" method="POST" id="login-form">
  56.       <label for="email">邮箱</label>
  57.       <input type="email" name="email" id="email" />
  58.       <label for="password">密码</label>
  59.       <input type="password" name="password" id="password" />
  60.       <button>登录</button>
  61.     </form>
  62.     <hr />
  63.     <hr />
  64.     <ul class="list">
  65.       <li>item1</li>
  66.       <li>item2</li>
  67.       <li>item3</li>
  68.       <li>item4</li>
  69.     </ul>
  70.   </body>
  71. </html>

-重点内容在代码注释中

上一条：导航下拉菜单的简单实现下一条：CSS选择器的应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多