search

博客列表 >选择器提权，以及盒模型

选择器提权，以及盒模型

 有料！
 有料！原创
2021年01月23日 17:29:17595浏览

3.选择器

1.简单选择器

序号 简单选择器 值
1 标签选择器 页面中的元素标签
2 属性选择器 分为 id 选择器和类选择器 class

分为两种标签选择器，属性选择器（class，id）

  1. <ul>
  2.   <li>item1</li>
  3.   <li class="foo">item2</li>
  4.   <li>item3</li>
  5.   <li class="foo">item4</li>
  6.   <li id="roo">item5</li>
  7. </ul>
  1. /* 1.标签选择器 */
  2. li {
  3.   background-color: yellowgreen;
  4. }
  5. /* 2.类选择器 ,两者皆可*/
  6. li[class="foo"] {
  7.   background-color: blue;
  8. }
  9. .foo {
  10.   background-color: blue;
  11. }
  12. /* 3.id选择器 ，两者皆可*/
  13. li[id="roo"] {
  14.   background-color: darkred;
  15. }
  16. #roo {
  17.   background-color: deeppink;
  18. }

2.上下文选择器

html 是一个结构化的文档，每一个元素在文档中都有确切的位置
所以用上下文选择器是没有问题的

序号 属性 值
1 空格 后代选择器,标签所有层级
2 > 子元素选择器：仅父子层
3 + 同级相邻选择器，紧选中与之相邻的第一兄弟个元素
4 ~ 同级所有选择器:选中与之相邻的后面所有的兄弟元素 
  1. <ul>
  2.   <li class="start">item1</li>
  3.   <li>item2</li>
  4.   <li>
  5.     <ul>
  6.       <li>item1</li>
  7.       <li>item2</li>
  8.       <li>item3</li>
  9.     </ul>
  10.   </li>
  11.   <li>item3</li>
  12.   <li>item4</li>
  13. </ul>
  1. /* 引文html是一个结构化的文档，
  2.         每一个元素在文档中都有确切的位置
  3.         所以根据元素的上下文环境来选择是完全没问题的
  4.       /* 1.后代选择器：所有层级 */
  5. ul li {
  6.   background-color: deepskyblue;
  7. }
  8. /* ------------------------------- */
  9. /* 子元素选择器：仅父子层 */
  10. body > ul > li {
  11.   background-color: rgb(180, 75, 154);
  12. }
  13. /* ------------------------------- */
  14. /* 同级相邻选择器:选中与之相邻的第一个兄弟元素 */
  15. .start + li {
  16.   background-color: magenta;
  17. }
  18. /* ---------------------- */
  19. /* 4.同级所有选择器：选中与之相邻的后面所有的兄弟元素 */
  20. .start ~ li {
  21.   background-color: red;
  22. }

3.伪类选择器

序号 属性 值
1 nth-of-type(an+b) 匹配任意位置的元素,an 起点。b 偏移量
2 nth-last-of-type(an+b) 反向选取任意位置的元素
3 nth-of-type(odd) odd 选取为基数的元素
4 nth-of-type(even) even 选取为偶数的元素
5 first-of-type 选取第一个元素
6 last-of-type 选取最后一个元素 
  1. <ul>
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5.   <li>item4</li>
  6.   <li>item5</li>
  7.   <li>item6</li>
  8.   <li>item7</li>
  9.   <li>item8</li>
  10.   <li>item9</li>
  11.   <li>item10</li>
  12. </ul>

nth-of-type(an+b) 用法

  1. /* 1.匹配任意位置的元素：:nth-of-type（an+b） */
  2. /* an+b:an是起点，b是偏移量，n=（0,1,2,3...） */
  3. /* 匹配第3个li ,0乘以任何元素都等于0，通常直接写偏移量就可以*/
  4. ul li:nth-of-type(0n + 3) {
  5.   background-color: aquamarine;
  6. }
  7. ul li:nth-of-type(3) {
  8.   background-color: blue;
  9. }
  10. /* 选中所有元素,只为全选，用伪类没有任何意义 */
  11. ul li:nth-of-type(1n) {
  12.   background-color: chartreuse;
  13. }
  14. /* 从第三个元素开始全选 */
  15. ul li:nth-of-type(1n + 3) {
  16.   background-color: aqua;
  17. }
  18. /* 1乘以任何数都等于自己，所以可以省去1 */
  19. ul li:nth-of-type(n + 3) {
  20.   background-color: blue;
  21. }
  22. /* 从第8个选取到结尾 */
  23. ul li:nth-of-type(n + 8) {
  24.   background-color: brown;
  25. }
  26. /* 2，反向选取任意位置的元素：'nth-last-of-type(an+b)'' */
  27. ul li:nth-last-of-type(-n + 3) {
  28.   background-color: brown;
  29. }
  30. /* 我只选择第三个 */
  31. ul li:nth-last-of-type(3) {
  32.   background-color: brown;
  33. }
  34. /* 选择所有索引为偶数的子元素，2，4，6,8... */
  35. ul li:nth-of-type(2n) {
  36.   background-color: brown;
  37. }
  38. /* 选择所有索引为基数的子元素，2，4，6,8... */
  39. /* 2n+1也是对的 */
  40. ul li:nth-of-type(2n-1) {
  41.   background-color: cadetblue;
  42. }

反向选取任意位置的元素:nth-last-of-type(an+b)

  1. /* 从末尾开始，选择倒数三个 */
  2. ul li:nth-last-of-type(-n + 3) {
  3.       background-color: brown;
  4.     }
  5. /* 我只选择第三个 */
  6. ul li:nth-last-of-type(3) {
  7. background-color: brown;

快速选偶奇元素方式

  1. /* 偶数行:even */
  2. ul li:nth-of-type(even) {
  3.   background-color: cadetblue;
  4. }
  5. /* 奇数行:odd */
  6. ul li:nth-of-type(odd) {
  7.   background-color: red;
  8. }

快捷选取首尾元素

  1. /* 3,选择第一个子元素：first-of-type */
  2. ul li:first-of-type {
  3. background-color: red;
  4. /* 选择最后一个:last-of-type */
  5. background-color: red;

4.伪类选择器状态匹配

序号 a 标签 属性 注释
1 :link 默认状态下属性
2 :visited 访问过属性
3 :hover 鼠标滑过属性
4 :active 点击时属性 
  1. <a href="https:www.baidu.com">百度一下</a>
  1. /* 1. 默认,没有访问/点击 */
  2. a:link {
  3.   color: red;
  4.   text-decoration: none;
  5. }
  6. /* 2. 已访问过的状态 */
  7. a:visited {
  8.   color: seagreen;
  9. }
  10. /* 3. 悬停的状态 */
  11. a:hover {
  12.   color: violet;
  13. }
  14. /* 4. 激活,当鼠标点击压下去的时候 */
  15. a:active {
  16.   color: yellow;
  17. }
序号 css 属性 对应 input 属性 注释
1 :read-only readonly 只读状态下属性匹配
2 : focus autofocus 默认聚焦状态下属性匹配
3 :required required 必写字段属性匹配
4 :disabled disabled 禁止输入的表单属性匹配 
  1. <form action="">
  2.   <p>用户名:<input type="text" name="" value="admin" readonly autofocus /></p>
  3.   <p>邮箱:<input type="email" name="" value="" required /></p>
  4.   <p>密码:<input type="password" name="" value="123456" disabled /></p>
  5.   <p><button>提交</button></p>
  6. </form>
  1. /* 只读状态下属性匹配 */
  2. input:read-only {
  3.   background-color: yellow;
  4. }
  5. /* 默认聚焦状态下属性匹配 */
  6. input:focus {
  7.   background-color: red;
  8. }
  9. /* 必写字段属性匹配*/
  10. input:required {
  11.   background-color: royalblue;
  12. }
  13. /* 禁用输入的表单属性匹配*/
  14. input:disabled {
  15.   background-color: seagreen;
  16. }

5.细说选择器优先级

  1. <h2 class="on os" id="foo">helloword</h2>

1,当选择器级别相同时，根据源码顺序，后面有效

  1. h2 {
  2.   color: red;
  3. }
  4. h2 {
  5.   color: blue;
  6. }

2,选择器优先权为 id>class>tag(标签) ,无先后顺序

  1. .on {
  2.   color: red;
  3. }
  4. #foo {
  5.   color: blueviolet;
  6. }
  7. h2 {
  8.   color: yellow;
  9. }

3,选择器组合提权
计算公式[id 选择器数量, class 选择器的数量, tag 选择器的数量]

  1. /* [0,0,1] */
  2. /* h2 {
  3.         color: red;
  4.       } */
  5. /* [0,0,2] */
  6. /* body h2 {
  7.         color: blue;
  8.       } */
  9. /* ------------------------ */
  10. /* [0,1,1] */
  11. /* h2.on {
  12.         color: red;
  13.       } */
  14. /* [0,1,2] */
  15. /* body h2.on {
  16.         color: yellow;
  17.       } */
  18. /* ------------------------------------ */
  19. /* [1,0,1] */
  20. /* h2#foo {
  21.         color: red;
  22.       } */
  23. /* [1,0,2] */
  24. /* body h2#foo {
  25.         color: greenyellow;
  26.       } */
  27. /* ------------------------------------- */
  28. /* .on {
  29.   color: red;
  30. }
  31. .on.os {
  32.   color: blueviolet;
  33. } */

4.常用属性以及盒模型

1.引入 iconfont 字体

1.去阿里云图标库选择字体下载

阿里云图标
https://www.iconfont.cn/

2.然后把字体复制到项目引入

  1. <!-- 头部引入 -->
  2. <link rel="stylesheet" href="font/iconfont.css" / >
  3. <span class="iconfont icon-shouye"></span>
  4. <span class="iconfont icon-tupian"></span>
  5. <span class="iconfont icon-wode"></span>
  1. .iconfont {
  2.   font-family: sans-serif;
  3.   font-size: 32px;
  4.   color: royalblue;
  5. }

2.常用字体属性

序号 属性 值 注释
1 font italic lighter 36px sans-serif 字体缩写模式
2 font-family sans-serif 无衬线字体 ，浏览器默认字体
3 font-size 16px 字体大小
4 font-style normal,italic 定义字体的风格
5 font-weight bold,lighter 加粗，加细

3.引入阿里云图标

去阿里云网址下载相应的图标，然后使用引用
<link rel=”stylesheet” href=”icon-font/iconfont.css”> > <span class=”iconfont icon-kehuguanli”></span>

4.背景图片样式

属性 值 注释
background-image url(https://img.php.cn/upload) 引入图片
background-repeat no-repeat 取消平移
background-position top，多少 px， 绝对定位
background-clip content-box 裁剪背景到内容区，一般与 padding 使用。
background-size 100px 背景图片大小

5.盒模型属性缩写

属性 值
padding 外边距，具有浮动
margin 内边距 
  1. /* 内边距 */
  2. /* padding: 上 右 下 左; 按顺时针方向*/
  3. padding: 5px 10px 15px 20px;
  4. /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
  5. /* 将背景色裁切到到内容区 */
  6. background-clip: content-box;
  7. /* 当左右相等，而上下不相等，使用三值语法 */
  8. padding: 10px 20px 15px;
  9. /* 当左右相等，上下也相等，使用二值语法 */
  10. padding: 10px 30px;
  11. /* 如果四个方向全相等，使用单值语法 */
  12. padding: 10px;
  13. /* 外边距:控制多个盒子之间的排列间距 */
  14. /* 四值,顺时针,上右下左 */
  15. margin: 5px 8px 10px 15px;
  16. /* 三值,左右相等，上下不等 */
  17. margin: 10px 30px 15px;
  18. /* 二值,左右相等,上下也相等 */
  19. margin: 10px 15px;
  20. /* 单值,四个方向全相等 */
  21. margin: 8px;
上一条：仿京东首页下一条：JS学习小结（数组常用的10个方法、JSON函数、跨域资源共享）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多