Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器的使用与盒模型属性使用方式
Blogger Information
Blog 19
fans 0
comment 0
visits 10191
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
伪类选择器的使用与盒模型属性使用方式
搬砖来学php
Original
454 people have browsed it

1.伪类选择器

伪类选择器分为“结构伪类和状态伪类，常用的选择器我们一般在html元素里面直接选中相对应的元素进行描述：
结构伪类
一般常用方法
1.常用方法在item1标签中添加属性first取其属性值使用

  1. <style>
  2.     .list > li.first{
  3.         background-color: blue;
  4.     }
  5. </style>
  6. <body>
  7.     <ul class="list">
  8.         <li class="first">item1</li>
  9.         <li >item2</li>
  10.         <li>item3</li>
  11.         <li>item4</li>
  12.         <li>item5</li>
  13.         <li>item6</li>
  14.         <li>item7</li>
  15.         <li>item8</li>
  16.     </ul>
  17. </body>

方法2.使用伪类选择器属性标签:nth-of-type(1)选中你想要的标签这里选择的是1，nth-of-type(1)标签的前面需要加上li里面的父级

  1. <style>
  2.     .list > li:nth-of-type(1){
  3.         background-color: aquamarine;
  4.     }
  5. </style>
  6. <body>
  7.     <ul class="list">
  8.         <li class="first">item1</li>
  9.         <li >item2</li>
  10.         <li>item3</li>
  11.         <li>item4</li>
  12.         <li>item5</li>
  13.         <li>item6</li>
  14.         <li>item7</li>
  15.         <li>item8</li>
  16.     </ul>
  17. </body>


3指定顺序选择是由一组公式计算结果进行选择，公式方式：a:代表系数（0.1.2.3….）n:代表参数（0.1.2.3…）b代表偏移量也是从0开始算，假如我们需要拿到下面item6标签 需要使用的方式是(0n+6)，a=0.n=0 b=3 计算结果0*0+6=6

  1. <style>
  2.     ..list > li:nth-of-type(0n+3){
  3.         background-color: aquamarine;
  4.     }
  5. </style>
  6. <body>
  7.     <ul class="list">
  8.         <li class="first">item1</li>
  9.         <li >item2</li>
  10.         <li>item3</li>
  11.         <li>item4</li>
  12.         <li>item5</li>
  13.         <li>item6</li>
  14.         <li>item7</li>
  15.         <li>item8</li>
  16.     </ul>
  17. </body>


如果需要选择一整组使用的公式，我们把A代表1，n代表0计算公式就是1*0=1，从1开始递增就会选择所有的元素

  1. <style>
  2.     .list > li:nth-of-type(1n) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>
  7.   <body>
  8.     <ul class="list">
  9.       <li class="first">item</li>
  10.       <li>item</li>
  11.       <li>item</li>
  12.       <li>item</li>
  13.       <li>item</li>
  14.       <li>item</li>
  15.       <li>item</li>
  16.       <li>item</li>
  17.     </ul>
  18.   </body>


反向匹配公式(-1n+3)

  1.     <style>
  2.     .list > li:nth-of-type(-1n+3) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>

奇偶公式计算：偶数(2n)20=2 代表的是偶数选中，(2n-1) 这里的计算是20-1=1 得到的是基数
偶数

  1.   <style>
  2.     .list > li:nth-of-type(2n) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>

奇数

  1.   <style>
  2.     .list > li:nth-of-type(2n) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>


前三个和后三个都有对应的属性标签 前三个”nth-of-type”后三个”nth-last-of-type”
（前三个）

  1. <style>
  2.     .list > li:nth-of-type(-n+3) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>
  7.   <body>
  8.     <ul class="list">
  9.       <li class="first">item</li>
  10.       <li>item</li>
  11.       <li>item</li>
  12.       <li>item</li>
  13.       <li>item</li>
  14.       <li>item</li>
  15.       <li>item</li>
  16.       <li>item</li>
  17.     </ul>
  18.   </body>

（后三个）

  1.   <style>
  2.     .list > li:nth-last-of-type(-n+3) {
  3.       background-color: aquamarine;
  4.     }
  5.   </style>
  7.   <body>
  8.     <ul class="list">
  9.       <li class="first">item</li>
  10.       <li>item</li>
  11.       <li>item</li>
  12.       <li>item</li>
  13.       <li>item</li>
  14.       <li>item</li>
  15.       <li>item</li>
  16.       <li>item</li>
  17.     </ul>
  18.   </body>

2.状态伪类

指定某个元素来获取相对应的元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>状态伪类</title>
  8.   </head>
  9.   <style>
  10.     /* 获取被禁用的元素：disabled  */
  11.     input:disabled {
  12.       color: red;
  13.       background-color: blue;
  14.     }
  16.     /* 获取被默认选择中的单选按钮 */
  17.     input:checked + label {
  18.       color: blueviolet;
  19.     }
  21.     /* 鼠标移入的状态变化 */
  22.     button:hover {
  23.       /* 光标 */
  24.       cursor: pointer;
  25.       background-color: aqua;
  26.     }
  27.     /* 获得焦点时变化 */
  28.     input:focus {
  29.       background-color: yellow;
  30.     }
  31.   </style>
  32.   <body>
  33.     <form action=""></form>
  34.     <fieldset>
  35.       <legend>后台登陆</legend>
  36.       <label for="uname">账号：</label>
  37.       <input type="text" id="uname" value="请输入您的账号" />
  38.       <br />
  39.       <label for="psw">密码：</label>
  40.       <input type="password" id="psw" value="" />
  41.       <br />
  42.       <label for="tips">警告：</label>
  43.       <input
  44.         type="text"
  45.         id="uname"
  46.         value="输错密码三次自动锁定"
  47.         disabled
  48.         style="border: none"
  49.       />
  50.       <div class="user">
  51.         <label for="user">用户：</label>
  52.         <input type="radio" name="user" id="user" value="0" checked /><label
  53.           for="user"
  54.           >用户</label
  55.         >
  56.         <input type="radio" name="person" id="person" value="1" /><label
  57.           for="uperson"
  58.           >管理员</label
  59.         >
  60.       </div>
  61.       <button style="color: brown">登录</button>
  62.     </fieldset>
  63.   </body>
  64. </html>

3.盒模型

  1. margin=外边距
  2. border=边框
  3. padding=内容区

可见属性：背景，颜色，边框
不可见属性只能设置宽度，不能设置颜色样式：外边距（margin)，padding(内容区)
页面中计算盒子的实际宽高是不包含外边距

  1.     <title>盒模型</title>
  2.   </head>
  4.   <style>
  5.       .box {
  6.     width: 200px;
  7.     height: 100px;
  8.     background-color: blue;
  9.     background-clip: content-box;
  10.     border: 5px solid;
  11.     padding: 20px;
  12.        }
  13.   </style>
  14.   <body>
  15.     <div class="box"></div>
  16.   </body>
  17. </html>

2.如果我们需要制作一个200*100的盒子我们需要用到一个特定的属性box-sizing: border-box; （box-sizing: border-box;）属性包括了边框和外边距

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post