简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2020年4月6日作业--CSS选择器
Blogger Information
Blog 29
fans 0
comment 0
visits 27002
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
2020年4月6日作业--CSS选择器
暴宇
Original
642 people have browsed it

CSS 选择器

1.简单选择器

1.1 元素选择器包含：元素选择器、群组选择器、通配选择器

1.2 属性选择器包含：属性选择器、类选择器、id 选择器

html 复用代码：

  1. <!-- html九宫格 -->
  2. <div class="com">
  3.   <span class="item">1</span>
  4.   <span class="item two">2</span>
  5.   <span class="item">3</span>
  6.   <span class="item" name="four">4</span>
  7.   <span class="item" id="five">5</span>
  8.   <span class="item">6</span>
  9.   <span class="item">7</span>
  10.   <span class="item">8</span>
  11.   <span class="item">9</span>
  12. </div>

css 代码

  1. /* css简单元素选择器 */
  2. div {
  3.   width: 300px;
  4.   height: 300px;
  5.   display: grid;
  6.   grid-template-columns: repeat(3, 1fr);
  7.   gap: 5px;
  8. }
  9. span {
  10.   font-size: 2rem;
  11.   background-color: #80ff80;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15. }
  16. /* css类选择器 */
  17. .com {
  18.   width: 300px;
  19.   height: 300px;
  20.   display: grid;
  21.   grid-template-columns: repeat(3, 1fr);
  22.   gap: 5px;
  23. }
  24. .item {
  25.   font-size: 2rem;
  26.   background-color: #80ff80;
  27.   display: flex;
  28.   justify-content: center;
  29.   align-items: center;
  30. }

简单选择器和类选择器效果：

id 选择器和属性选择器

  1. #five {
  2.   background-color: #ffff00;
  3. }
  4. .item[name="four"] {
  5.   background-color: #ff00ff;
  6. }

效果

2.上下文选择器

上下文选择器分为：后代选择器、父子选择器、同级相邻选择器、同级所有选择器四种

css 代码

  1. /* 后代选择器 */
  2. .com span {
  3.   background-color: #0080ff;
  4. }
  5. /* 父子选择器 */
  6. div > span {
  7.   border: 3px solid red;
  8. }
  9. /* 后代选择器 */
  10. .item.two {
  11.   background-color: #80ffff;
  12. }
  13. /* 同级相邻选择器，选择后面相邻的第一个元素 */
  14. .item.two + .item {
  15.   background-color: #ff00ff;
  16. }
  17. /* 同级相邻所有选择器，选择后面的所有兄弟元素 */
  18. .item.two ~ .item {
  19.   background-color: #ffff00;
  20. }

效果

3.伪类选择器

3.1 结构伪类

（1）不分组匹配

代码

  1. /* 匹配第一个子元素 */
  2. div > span:first-child {
  3.   background-color: #ff8080;
  4. }
  5. /* 匹配最后一个子元素 */
  6. span:last-child {
  7.   background-color: #0080ff;
  8. }
  9. /* 匹配任意一个子元素 */
  10. span:nth-child(2) {
  11.   background-color: #ffff80;
  12. }
  13. /* 匹配倒数任意一个子元素 */
  14. span:nth-last-child(2) {
  15.   background-color: #80ffff;
  16. }

效果

代码

  1. /* 匹配前4个元素 */
  2. span:nth-child(-n + 4) {
  3.   background-color: #ffff80;
  4. }
  5. /* 从第5个开始选择剩下的所有元素 */
  6. span:nth-child(n + 5) {
  7.   background-color: #80ffff;
  8. }

效果

代码

  1. /* 选择偶数元素 */
  2. span:nth-child(2n) {
  3.   background-color: #ffff80;
  4. }
  5. span:nth-child(even) {
  6.   background-color: #ffff80;
  7. }
  8. /* 选择奇数元素 */
  9. span:nth-child(2n -1) {
  10.   background-color: #80ffff;
  11. }
  12. span:nth-child(odd) {
  13.   background-color: #80ffff;
  14. }

效果

（2）分组匹配

html 复用代码：

  1. <!-- html九宫格 -->
  2. <div class="com">
  3.   <div class="item">1</div>
  4.   <div class="item two">2</div>
  5.   <div class="item">3</div>
  6.   <div class="item" name="four">4</div>
  8.   <span class="item" id="five">5</span>
  9.   <span class="item">6</span>
  10.   <span class="item">7</span>
  11.   <span class="item">8</span>
  12.   <span class="item">9</span>
  13. </div>

css 代码

  1. /* div分组第一个 */
  2. .com div:first-of-type {
  3.   background-color: #ff8080;
  4. }
  5. /* div分组最后一个 */
  6. .com div:last-of-type {
  7.   background-color: #ff8080;
  8. }
  9. /* div分组任意一个 */
  10. .com div:nth-of-type(2) {
  11.   background-color: #ff8080;
  12. }
  13. /* div分组倒数第2个 */
  14. .com div:nth-last-of-type(2) {
  15.   background-color: #ff8080;
  16. }
  17. /* span分组前2个 */
  18. .com span:nth-of-type(-n + 2) {
  19.   background-color: #80ffff;
  20. }
  21. /* span分组后2个 */
  22. .com span:nth-last-of-type(-n + 2) {
  23.   background-color: #80ffff;
  24. }
  25. /* span分组从第3个开始 */
  26. .com span:nth-of-type(n + 3) {
  27.   background-color: #ff00ff;
  28. }

效果

3.2 表单伪类

html 代码

  1. <h3>用户登录</h3>
  2. <form action="" method="post">
  3.   <div>
  4.     <label for="email">邮箱:</label>
  5.     <input
  6.       type="email"
  7.       id="email"
  8.       name="email"
  9.       required
  10.       placeholder="example@email.com"
  11.     />
  12.   </div>
  14.   <div>
  15.     <label for="password">密码:</label>
  16.     <input
  17.       type="password"
  18.       id="password"
  19.       name="password"
  20.       placeholder="不得少于6位"
  21.     />
  22.   </div>
  23.   <div>
  24.     <label for="password">手机号:</label>
  25.     <input
  26.       type="password"
  27.       id="password"
  28.       name="password"
  29.       disabled
  30.       placeholder="手机号"
  31.     />
  32.   </div>
  33. </form>

css 代码

  1. /* 选择html */
  2. :root {
  3.   background-color: #80ffff;
  4.   font-size: 20px;
  5.   padding: 20px;
  6. }
  7. /* 选择活动文本框 */
  8. input:enabled {
  9.   background-color: #ffff80;
  10.   font-size: 20px;
  11.   margin: 10px;
  12. }
  13. /* 选择禁用文本框 */
  14. input:disabled {
  15.   background-color: #0080ff;
  16.   font-size: 20px;
  17.   margin: 10px;
  18. }
  19. /* 选择必填文本框 */
  20. input:required {
  21.   background-color: #ff00ff;
  22. }

效果

总结

1.选择器分为简单选择器、上下文选择器、伪类选择器

2.伪类选择器需要重点掌握

3.选择器优先级：ID 选择器>类选择器/属性选择器>元素选择器

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！