伪类选择器
结构伪类选择器

nth-of-type(an+b)
a:表示系数,计算方法(0..1..2..3…..)
n:参数,计算方法(0..1..2..3…..)
b:偏移量,从0开始计算,计算的索引必须有效,并且是从1开始的
1.全选:

  1. <style>
  2. /*.list > .lime:nth-of-type(1n) {
  3. 由于1*n等于n所以可以简写成n
  4. */
  5. .list > .lime:nth-of-type(n) {
  6. color: blue;
  7. font-size: 20px;
  8. }
  9. </style>
  10. <ul class="list">
  11. <li class="lime">你好css1</li>
  12. <li class="lime">你好css2</li>
  13. <li class="lime">你好css3</li>
  14. <li class="lime">你好css4</li>
  15. <li class="lime">你好css5</li>
  16. <li class="lime">你好css6</li>
  17. <li class="lime">你好css7</li>
  18. <li class="lime">你好css8</li>
  19. </ul>

2.选择一个

  1. .list > .lime:nth-of-type(5){
  2. color: rgb(134, 243, 10);
  3. font-size: 20px;
  4. }

3.从第几行开始选择

  1. .list > .lime:nth-of-type(n+5){
  2. color: #000;
  3. }

4.选择偶数行

  1. .list > .lime:nth-of-type(2n+2){
  2. color: rgb(100, 8, 248);
  3. }
  4. /*简化写法*/
  5. .list > .lime:nth-of-type(even){
  6. color: rgb(100, 8, 248);
  7. }

5.选择奇数行

  1. .list > .lime:nth-of-type(2n11){
  2. color: rgb(100, 8, 248);
  3. }
  4. /*简化写法*/
  5. .list > .lime:nth-of-type(odd){
  6. color: rgb(100, 8, 248);
  7. }

6.获取最后一个

  1. .list > .lime:last-of-type {
  2. background-color: yellow;
  3. font-size: 30px;
  4. }

7.倒序选择

  1. .list > .lime:nth-last-of-type(-n+3){
  2. color:rgb(100, 8, 248);
  3. font-size: 50;

状态选择器

1.鼠标悬停

  1. <form action="">
  2. <fieldset class="use">
  3. <legend>用户注册</legend>
  4. <label>用户名:<input type="text"></label><br>
  5. 提示:<input type="text" class="tinps" value="一旦注册不允许注销"><br>
  6. <label>密码:<input type="password"></label><br>
  7. <label>性别:</label>
  8. <label for="nan"></label>
  9. <input type="radio" name="sex" value="0">
  10. <label for="nv"></label>
  11. <input type="radio" name="sex" value="1" id="nv">
  12. <input type="radio" name="sex" value="3" id="bm" checked>
  13. <label for="bm">保密</label>
  14. <br>
  15. <button >立即注册</button>
  16. </fieldset>
  17. </form>
  18. <style>
  19. button:hover {
  20. background-color: rgb(8, 241, 47);
  21. font-size: 1em;
  22. }
  23. </style>

2.获取焦点 \更改默认选择的文字颜色

  1. input:focus {
  2. background-color: rgb(11, 239, 247);
  3. }
  4. //更改默认选择的文字颜色
  5. input:checked + label {
  6. color: red;
  7. }

盒模型

1.修改大小

  1. div {
  2. width: 300px;
  3. height: 100px;
  4. }

2.计算内边距和不计算

计算公式:宽:宽300+左内边距20+左边框线2+右内边距20+右边框线2 = 344
高:高100+上内边距20+上边框线2+下内边距20+下内边距2 =144
box-sizing: border-box;不计算
box-sizing: content-box;计算

3.设置单个边框

  1. border-top: 20px solid red;
  2. /* 设置左边框线 */
  3. border-left: 20px solid red;
  4. /* 设置有边框线 */
  5. border-right: 20px solid red;

4.padding的修改方法

  1. /* 四个值计算方法 顺时针 */
  2. /* padding: 20px 30px 25px 35px; */
  3. /* 三个值计算方法 顺时针 */
  4. /* padding: 30px 35px 25px; */
  5. /* 两个值计算 */
  6. /* padding: 20px 30px; */
  7. /* 技巧第二个值始终是左右计算 */

更多相关文章

  1. Android(安卓)IPC进程间通信之AIDL双向通信
  2. Android简易实战教程--第一话《最简单的计算器》
  3. Android(安卓)简单的计算器实现
  4. [置顶] [Android自定义控件]Android中如何用代码写出优美的Button
  5. Android-使用SoundPool实现语音计算器
  6. layer-list 的用法
  7. Android动态改变高度以及计算长度的EditText
  8. android 计算器编写(1)
  9. Android关于图片内存计算

随机推荐

  1. JQuery TextArea的取值与赋值问题
  2. HTML5_旋转轮播-电子相册-新startMove函
  3. HTML5爱好者QQ群创建啦,欢迎大家来Q群讨论
  4. 如何在不使用Bootstrap CSS的情况下包含G
  5. Emmet插件快速编写html小技巧
  6. HTML5获取手机摄像头拍照
  7. 帮助相对路径链接到本地​​文件
  8. html文件上传到vss上面后文件大小改变
  9. 尘缘如水,伴随着似水年华如流云般划过天际
  10. 请问json文件在html head中以script的形