• 欢迎光临~

CSS笔记 - 02 CSS选择器

开发技术 开发技术 2022-10-12 次浏览

2. CSS选择器

2.1 常用选择器

1.元素选择器

  • 根据标签名来选中指定的元素

    语法:标签名{}

    div{
    	border: 1px solid red;
    }
    
    span{
    	border: 2px solid yellow;
    }
    

2.id选择器

  • 根据元素的id属性值选中一个元素

    语法:#id属性值{}

    #id001{
    	border: 1px solid red;
    }
    
    #id002{
    	border: 2px solid yellow;
    }
    

3.class类型选择器

  • 根据元素的class属性值选中一组元素

    语法:.class属性值

    .class001{
    	border: 1px solid red;
    }
    
    .class002{
    	border: 2px solid yellow;
    }
    

4.通配选择器

  • 选中页面中的所有元素

    语法:*{}

2.2 复合选择器

1.交集选择器

  • 同时选中符合多个条件的元素

    语法:选择器1选择器2选择器n{}

    (交集选择器中如果有元素选择器,必须使用元素选择器开头)

    /*div元素中有red的class类型的元素*/
    div.red{
    	font-size: 30px;
    }
            
    /*同时具有a,b,c的class类型的元素*/
    .a.b.c{
    	color: blue;
    }
    

2.并集选择器

  • 同时选中多个选择器对应的元素

    语法:选择器1,选择器2,选择器n{}

    (交集选择器中如果有元素选择器,必须使用元素选择器开头)

    /*选中h1元素和span元素*/
    h1,span{
    	font-size: 30px;
    }
    

2.3 关系选择器

  • 元素关系

    • 父元素:直接包含子元素的元素叫做父元素

    • 子元素:直接被父元素包含的元素是子元素

    • 祖先元素:直接或间接包含后代元素的元素叫做祖先元素

      ​ 祖先元素不一定是父元素,父元素一定是祖先元素

    • 后代元素:直接或间接被祖先元素包含的元素叫做后代元素

      ​ 子元素一定是后代元素,后代元素不一定是子元素

    • 兄弟元素:拥有相同父元素的元素是兄弟元素

1.子元素选择器

  • 选中指定父类元素的指定子元素

    语法:父元素 > 子元素

    div.box > span{
    	color: orange;
    }
    
    div > p > soan{
    	color: red;
    }
    

2.后代元素选择器

  • 选中指定元素内的指定后代元素

    语法:祖先 后代

    div span{
    	color: red;
    }
    

3.兄弟元素选择器

  • 选择下一个兄弟

    语法:前一个 + 下一个

  • 选择下面所有兄弟

    语法:兄 ~ 弟

p + span{
	color: red;
}

p ~ span{
	color: red;
}

2.4 属性选择器

  • 根据属性名和属性值选中指定元素

    语法:

    • [属性值] 选择含有指定属性的元素
    • [属性名=属性值] 选择含有指定属性和属性值的元素
    • [属性名^=属性值] 选择属性值以指定值开头的元素
    • [属性名$=属性值] 选择属性值以指定值结尾的元素
    • [属性名*=属性值] 选择属性值中含有某值的元素
    p[title]{
    	color: red;
    }
    
    p[title=abc]{
    	color: red;
    }
    
    p[title^=abc]{
    	color: red;
    }
    
    p[title$=abc]{
    	color: red;
    }
    

2.5 伪类选择器

常见伪类

  • 伪类用来描述一个元素的特殊状态,如:第一个子元素、被点击的元素等

    语法::要选中的伪类

    常见的伪类:

    • :first-child 第一个子元素

    • :last-child 最后一个子元素

    • :nth-child(number) 选中第n革子元素

      • n 选中第n个元素
      • 2n 选中偶数位的元素
      • 2n+1 选中奇数位的元素

      以上这些伪类都是根据所有的子元素进行排序

    • :first-of-type:last-of-type:nth-of-type()

      这几个伪类的功能和上述的类似,但他们是在同类型元素中进行排序

    • not() 否定伪类,将符合条件的元素从选择器中去除

    ul > li:first-child{
    	color: red;
    }
    ul > li:nth-child(2n+1){
    	color: red;
    }
    ul > li:first-of-type{
    	color: red;
    }
    ul > li:not(:nth-child(3)){
    	color: red;
    }
    

超链接伪类

  • :link 用来表示没访问过的链接

  • :visited 用来表示访问过的链接

  • :hover 用来表示鼠标移入的状态

  • :active 用来表示鼠标点击

    a:link{
    	color: red;
    }
    a:visited{
    	color: red;
    }
    a:hover{
    	color: red;
    }
    a:active{
    	color: red;
    }
    

2.6 伪元素选择器

  • 伪元素,表示页面中一些特殊的,并不真实存在的元素

  • 语法:元素::伪元素

    常见的伪元素:

    • ::first-letter:表示第一个字母

    • ::first-line:表示第一行

    • ::selection:表示选中的内容

    • ::before:元素的开始

      ::after:元素的末尾

      before和after必须结合content属性使用

    p::first-letter{
    	color: red;
    }
    
    p::first-line{
    	color: red;
    }
    
    p::selection{
    	color: red;
    }
    
    div::before{
    	content: 'hi';
    	color: red;
    }
    
    div::after{
    	content: 'haha';
    	color: blue;
    } 
    
程序员灯塔
转载请注明原文链接:CSS笔记 - 02 CSS选择器
喜欢 (0)