CSS选择器学习总结

厚积薄发

CSS选择器学习总结

CSS 选择器学习简单选择器

•   
•    
•    
•     CSS选择器
•    
•   
•   
•    
•       1
•       2
•       3
•       4
•       5
•       6
•       7
•       8
•       9
•    
•     CSS选择器学习
•     2020年4月7号
•   
• 
  

---

• 显示效果
  
  

---

• style里面添加下面样式
  
  •    /* 父子选择器 */
  •     body > div {
  •       border: 3px solid white;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* 同级相邻选择器（后面一个） */
  •     .item#center + .item {
  •       background-color: lightgreen;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •    /* 同级相邻选择器（后面全部） */
  •     .item#center ~ .item {
  •       background-color: violet;
  •     }
    
• 显示效果
  
  

---

伪类选择器不分组匹配

• style里面添加下面样式
  
  •    /* 伪类选择器（不分组匹配） */
  •     /* 匹配第一个子元素 */
  •     .container > :first-child {
  •       background-color: lime;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •      /* 匹配最后一个子元素 */
  •     .container > :last-child {
  •       background-colorlivedrab;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •    /* 匹配任何一个子元素 */
  •     .container > :nth-child(4) {
  •       background-color: mediumblue;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •   /* 匹配倒数任何一个子元素 */
  •     .container > :nth-last-child(4) {
  •       background-color: midnightblue;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* 匹配倒数偶数元素 */
  •     .container > :nth-child(even) {
  •       background-color:tomato;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* 将ID选择器样式注释掉，因为权重大于类选择器 */
  •     /* #center {
  •       background-color: slateblue;
  •     } */
  •     /* 匹配倒数奇数元素 */
  •     .container > :nth-child(odd) {
  •       background-color: yellowgreen;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* 匹配前四个元素 */
  •     .container > :nth-child(-n + 4) {
  •       background-color: red;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  
  •    /* 从第6个开始,选择剩下的所有元素 */
  •           .container > :nth-child(n +6) {
  •       background-color:seagreen;
  •     }
    
• 显示效果
  
  

---

伪类选择器分组匹配

HTML源码

•   
•    
•    
•     CSS选择器
•    
•   
•   
•    
•       1
•       2
•       3
•       4
•       5
•       6
•       7
•       8
•       9
•    
•     CSS选择器学习
•     2020年4月7号
•   
• 
  

---

• style里面添加下面样式
  
  •     /* 伪类选择器（分组匹配） */
  •     /* 匹配span第一个子元素 */
  •     .container > span:first-of-type{
  •         background-color: orangered;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •       /* 匹配span最后一个子元素 */
  •     .container > span:last-of-type{
  •         background-color:sienna;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* span分组第三个 */
  •     .container > span:nth-of-type(3) {
  •       background-color: springgreen;
  •     }
    
• 显示效果
  
  

---

• style里面添加下面样式
  
  •     /* span分组前三个 */
  •     .container > span:nth-child(-n + 3){
  •         background-color: springgreen;
  •     }
    
• 显示效果
  
  

IT论坛伪类

html源码

•   
•    
•    
•     CSS选择器
•    
•   
•   
•    
•       1
•       2
•       3
•       4
•       5
•       6
•       7
•       8
•       9
•    
•   
• 
  

• 初步预览效果
  
  

---

• :root伪类
• style里面添加下面样式
  
  •     /* :root伪类 */
  •     :root {
  •       background-color: yellow;
  •     }
    
• 显示效果
  
  

---

• a:hover伪类
  
  •     6
    
• 上面源码修改成下面源码
  
  •    
  •       php官网
  •    
    
  -在style里面添加下面样式
  •     /* a:hover伪类 */
  •     a:hover {
  •       background-color: red;
  •     }
    
• 显示效果
  
  

---

学习总结1.伪类学习感觉很重要，对学习帮助很大，希望以后可以常用2.经过老师讲解后感觉伪类很好理解3.似乎还是对display属性掌握不好，需要加深对display理解

摘自：https://www.php.cn/blog/detail/20397.html