简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器提权，以及盒模型
Blogger Information
Blog 10
fans 0
comment 0
visits 7511
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
591 people have browsed it

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;
Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！