2.2 CSS选择器

2.2 CSS选择器

      • 常用选择器
      • 复合选择器
      • 关系选择器
      • 属性选择器
      • 伪类选择器
        • 常见伪类选择器
        • 超链接伪类选择器
      • 伪元素选择器
      • 选择器权重

常用选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 通配选择器

示例代码


"en">
    
        "utf-8">
        选择器
        
    
    
        

雾霭有时晴

"first">风吹向哪里啦,雨ye懒得下

若非雾霭放晴了,没人关心它

醉了,就这样吧

"favorite">想不出不想啦,看不透都别看啦

"favorite">睡不着不睡啦,算不出的别算啦

"favorite">写不出别写啦,唱不出的都作罢

"favorite love">纵生风雨雷电时,我收工接你回家

复合选择器

  1. 交集选择器
  2. 选择器分组(并集选择器)

示例代码


"en">
    
        "utf-8">
        复合选择器
        
    
    
        
"red">我是div

"red">我是p标签

"red big">我是p2标签

我是h1标签

我是span标签

关系选择器

  1. 子元素选择器
  2. 后代元素选择器
  3. 选择下一个兄弟元素
  4. 选择后面所有兄弟元素

示例代码


"en">
    
        "utf-8">
        关系选择器
        
    
    
        
"red"> 我是一个div

我是div中的p元素 我是p中的div元素

我是div中的span元素1 我是div中的span元素2 我是div中的span元素3
我是div外的span
我是第二个div 我是第二个div中的span

属性选择器

  1. 五种属性选择器

示例代码


"en">
    
        "utf-8">
        属性选择器

        
    
    
        
        

"poem">人生若只如初见,当时只道是寻常。

"poem2">潭中鱼可百许头,皆若空游无所以。

"poem3">落霞与孤鹜齐飞,秋水共长天一色。

"song">天青色等烟雨,而我在等你。

我是无情的参照物

伪类选择器

用到就查表

常见伪类选择器

示例代码


"en">
    
        "utf-8">
        伪类选择器
        
    
    
        
  • ul是无序列表
  • 关系选择器
  • ol是有序列表
  • 伪类选择器
  • 最后的骑士

超链接伪类选择器


"en">
    
        "utf-8">
        超链接的伪类
        
    
    
        
        "https://www.baidu.com">百度
        

"https://www.baidu.com">百度一下

伪元素选择器

      注意 ::before 和 ::after
示例代码



    
        
        伪元素
    
    
    
        
Hello,How dare you?

"first"> 我家门前有两棵树,一棵是枣树,另一棵还是枣树。

"second"> 我家里有两只宠物,一只是黑白狗,另一只是黑白兔。

选择器权重

  1. 权重的大小比较
  2. 权重的相加
  3. !important

示例代码


"en">
    
        "utf-8">
        选择器的权重
        
    
    
        
"box1" class="red">我是一个无情的div

你可能感兴趣的:(HTML&CSS,css,选择器,选择器权重,类选择器,html)