Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器的应用/盒模型的分析
Blogger Information
Blog 43
fans 4
comment 0
visits 19385
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
伪类选择器的应用/盒模型的分析
汇享科技
Original
356 people have browsed it

结构伪类

结构伪类：通常是HTML代码中用来选择某一个元素下面的子元素的伪类选择器，例如我们想找到一个ul下面的第5个li元素

nth-of-type(an+b):
通常括号内可以填一个索引填几就是选中第几个

an+b a是系数 n是参数变量 b是偏移量
a：从0开始计算[0,1,2,3,…] n：从0开始递增[0,1,2,3,…] b是偏移量从0开始
注意：计算出来的最终索引必须有效 而且要从1开始

nth-of-type(1) == nth-of-type(0n+1)
0n+1 == 0*0+1

选择的情况要么是选择一个要么选择一组

实例演示结构伪类：

  1. <!--HTML代码部分-->
  2. <body>
  3.     <ul class="list">
  4.         <li>item1</li>
  5.         <li>item2</li>
  6.         <li>item3</li>
  7.         <li>item4</li>
  8.         <li>item5</li>
  9.         <li>item6</li>
  10.         <li>item7</li>
  11.         <li>item8</li>
  12.     </ul>
  13. </body>
  • 选择第一个li

选择第一个

  1. /*CSS部分*/
  2. /*选中第1个li 两个方法相同*/
  3. /*方法1：*/
  4. .list li:nth-of-type(0n+1){
  5.     background-color: aqua;
  6. }
  7. /*方法2*/
  8. .list li:first-of-type{
  9.     background-color: blue;
  10. }
  • 选择前三个li

选择前三个

  1. /*CSS部分*/
  2. /*选择前三个li*/
  3. .list li:nth-of-type(-1n+3){
  4. background-color: aquamarine;
  5. }
  6. /* 可以简化为-n+3 */
  • 选择从第三个li开始后面所有的li

l5bsr3rz.png

  1. /*从第三个开始往后全部li*/
  2. .list li:nth-of-type(1n+3){
  3.     background-color: blueviolet;
  4. }
  • 选择最后一个li

l5bstcb8.png

  1. /*选择最后一个li*/
  2. .list li:last-of-type{
  3.     background-color: coral;
  4. }
  • 奇数偶数

l5bszp29.png

  1. /*奇偶数*/
  2. /*偶数*/
  3. .list li:nth-of-type(2n){
  4.     background-color: violet;
  5. }
  6. /*奇数*/
  7. .list li:nth-of-type(2n-1){
  8.     background-color: saddlebrown;
  9. }
  • 反向获取最后三个

l5bt3lik.png

  1. /* 获取最后三个 */
  2. .list li:nth-last-of-type(-n + 3){
  3.     background-color: darkcyan;
  4. }

状态伪类

状态伪类：指通过某个元素的状态来选择对应的元素

伪类名称 描述
hover 鼠标悬停
disabled 禁用当前元素
focus 获取焦点
checked 获取被选中的单选按钮
active 元素被激活
link 未被点击的链接

l5bucysh.png

  1. <style>
  2.         /*选中输入框状态为禁用*/
  3.         input:disabled{
  4.             border: none;
  5.             color: red;
  6.             font-weight: bold;
  7.         }
  8.         /*通过当前选中的单选按钮来更改lable的文字颜色*/
  9.         input:checked + label{
  10.             color: red;
  11.         }
  12.         /*输入框获取焦点时更改背景颜色*/
  13.         input:focus{
  14.             background-color: darkseagreen;
  16.         }
  17.         /*设置按钮样式*/
  18.         button{
  19.             width: 50px;
  20.             border: none;
  21.             outline: none;
  22.             background-color: aqua;
  23.             border-radius: 3px;
  24.         }
  25.         /*鼠标悬停到按钮上的样式*/
  26.         button:hover{
  27.             cursor: pointer;
  28.             background-color: lawngreen;
  29.             border: 1px solid;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <form action="">
  35.         <fieldset>
  36.             <legend>用户注册</legend>
  37.             <label for="usname">账 号：</label>
  38.             <input type="text" name="uname" id="usname" placeholder="请输入11位账号">
  39.             <br>
  40.             <label for="">提 示：</label>
  41.             <input type="text" value="请核对手机号是否正确" disabled>
  42.             <br>
  43.             <label for="a">性别</label>
  44.             <input type="radio" name="sex" id="a" value="male" checked><label for="a">男</label>
  45.             <input type="radio" name="sex" id="b" value="mfeale"><label for="b">女</label>
  46.             <br>
  47.             <button>注册</button>
  48.         </fieldset>
  49.     </form>
  50. </body>

盒模型的概念

当我们定义一个盒子模型的时候 如果不定义一些可见元素并且盒子内没有任何元素

一个盒子的构成是由边框+内边距+内容区组成
默认页面中是看不到的
可见属性：颜色、边框
不可见属性：宽高、内外边距

  • 当我们创建一个盒子给他定义了宽高边框的时候页面中的盒模型是这样的
    l5bv55t7.png

那么我们怎么才能计算出这个盒子现在的默认大小呢：

边框+内边距+内容区是最重的大小
由此可得border left+padding left+内容区+border right +padding right = 最终生成的盒模型的宽度
高度同理border top+padding top+内容区+border bottom +padding bottom = 最终生成的盒模型的高度
5+20+200+20+5=250为宽度
5+20+100+20+5=150为高度
也就是说目前box这个盒子宽高为250*150

l5bvcrll.png

很多时候我们想创建一个就是200*100的盒子应该怎么做呢

微软制定了一个标准:box-size:border-box
box-size:border-box,定义此项目的是 页面中所有生成的盒子 定义的宽高是多少就是多少并不会被边框和内边距所影响
例如这个盒子是200高度 里面就包含了内边距和边框的大小 只是将内容区进行压缩了
通常在开发之前会进行初始化操作 推荐使用！

l5bvrs9x.png

  1. /*盒模型的基本概念*/
  2. /*当我们定义一个盒子模型的时候 如果不定义一些可见元素并且盒子内没有任何元素
  3. 默认页面中是看不到的
  4. 可见属性：颜色、边框
  5. 不可见属性：宽高、内外边距
  6. */
  7. /*定义盒子的宽高、边框、背景色*/
  8. *{
  9.     padding: 0;
  10.     margin: 0;
  11.     box-sizing: border-box;
  12. }
  13. .box{
  14.     width: 200px;
  15.     height: 100px;
  16.     padding: 20px;
  17.     background-color: aqua;
  18.     border: 5px solid #000;
  19. }
  20. /*计算默认盒模型大小*/
  22. /*
  23. 边框+内边距+内容区是最重的大小
  24. 由此可得border left+padding left+内容区+border right +padding right = 最终生成的盒模型的宽度
  25. 高度同理border top+padding top+内容区+border bottom +padding bottom = 最终生成的盒模型的高度
  27. 5+20+200+20+5=250为宽度
  29. 5+20+100+20+5=150为高度
  31. 也就是说目前box这个盒子宽高为250*150
  32.  */
  33.  /*
  34.  很多时候我们想创建一个就是200*100的盒子应该怎么做呢
  35.  微软制定了一个标准:box-size:border-box
  36.  box-size:border-box,定义此项目的是 页面中所有生成的盒子 定义的宽高是多少就是多少并不会被边框和内边距所影响
  37.  例如这个盒子是200高度 里面就包含了内边距和边框的大小 只是将内容区进行压缩了
  38.  通常在开发之前会进行初始化操作 推荐使用！
  39.  */
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