CSS学习之基础选择器和高级选择器

1>什么是选择器

    一个HTML页面中有很多的元素,不同的元素可能会有不同的样式,有些元素又需要设置相同的样式,

    选择器就是用来从HTML页面中查找特定一个或一组元素,找到之后就可以为它们设置样式了。 

    选择器为样式规则指定一个作用范围

    基础选择器包括:

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

2>基础选择器的用法

    2.1>标签选择器---故名思议,通过标签名来选择元素

        

        作用范围:所有的p标签,字体颜色设置成红色

    2.2>类选择器:所有样式类含 xx字段的元素,格式: .类值

        

        作用范围:所有标签中 class属性等于c1的标签,字体颜色设置成红色

    2.3>ID选择器:顾名思义,通过标签的id值选择标签,格式:#id值

        

        作用范围:标签中id=name的元素 字体颜色设置成红色,注:同一个html页面中不能存在相同的id,

    2.4>通用选择器:使用 * 表示所有元素

        

    2.5>各基础选择器优先级

     ID选择器 > 类选择器 > 标签选择器 > 通用选择器

    

3>高级选择器

    

    3.1>并集选择器,又称分组选择器,用于定义多个不同类型标签相同的样式。

    

    3.2>交集选择器:通过标签和属性(类属性或id属性)来限制作用范围,

    

    3.3>后代选择器

        作用于某个标签所包含的所有指定元素,

        如 div p {xx:xx},定义div下面所有p标签,样式xx=xx

    3.4>子元素选择器

        通过 > 连接,仅作用于子元素

        如 div p {xx:xx},定义直属div下面的p标签,样式xx=xx

    3.5>毗邻选择器

        如 div+p {xx:xx}

        找到所有紧挨在div后面的第一个p标签,设置xx样式=xx

    3.6>兄弟选择器

         如 div~p {xx:xx}

        找到所有div标签后面同级的p标签,设置xx样式=xx

    3.7>属性选择器

    除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素

    --->根据属性查找 [属性]{xx:xx}

    

    --->根据属性和值查找 [xx='xx']{xx:xx}

    

    --->其他扩展用法

    找到所有title属性以aa开头的元素     [title^='aa']{xx:xx}

    找到所有title属性以aa结尾的元素     [title$='aa']{xx:xx}

    找到所有title属性包含aa的元素     [title*='aa']{xx:xx}

    找到所有title属性(有多个值或值以空格分割)中有一个值为aa的元素     [title~='aa']{xx:xx}

            

    

    3.8>表单常用

input[type="text"] {
background-color: #13ff67;
}
    
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页