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

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. 常用的一些属性说明
  2. EditText单行显示
  3. Android的四种启动方式
  4. Android中生成xml文件
  5. viewpager实现自动循环轮播图
  6. Android基础知识(二)
  7. Android应用程序与SurfaceFlinger服务之
  8. adb 工具学习
  9. android 相对布局 RelativeLayout
  10. android跳转进市场的代码