结构伪类

结构伪类：通常是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.  */

更多相关文章

  1. CSS盒子模型
  2. [置顶] ［Android自定义控件］Android中如何用代码写出优美的Button
  3. Android(安卓)TV 智能电视/盒子 APP 开发焦点控制 两种方法实例
  4. layer-list 的用法
  5. android设置控件样式（边框颜色，圆角）和图片样式（圆角）
  6. Android(安卓)圆角边框实现
  7. android zbar二维码扫描(中文不乱码)
  8. Android(安卓)ImageView设置边框
  9. Android(安卓)自定义带圆角的dialog

随机推荐

  1. php中定义常量的两种方法
  2. php怎么跟数据库连接
  3. 使用PHP多维数组重组方法，兼容API接口
  4. php 字符串替换方法
  5. php怎么给密码进行md5加密
  6. php单引号和双引号用法
  7. php中函数的定义
  8. php怎么改端口
  9. php变量命名规则
  10. php文件上传步骤是什么