欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS选择器类型

程序员文章站 2022-07-04 20:06:00
...

每一条css样式声明由选择器和样式两部分组成,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

  1. 标签选择器

    通过html代码标签选择元素。例如:

     p{font-size:12px;line-height:1.6em;}
  2. 类选择器

    作用于具有特定的class属性的标签。语法如下:

     .stress{color:red;}
  3. ID选择器

    作用于具有特定id属性的标签。语法如下:

    
    #setGreen{
    
       color:green;
    }

    类选择器和ID选择器的区别
    (1)因为元素的id是唯一的,不能出现两个元素具有同一个id值。ID选择器只能使用一次。而class可以使用多次,同时作用于多个元素。
    (2)可以使用类选择器词列表方法为一个元素同时设置多个样式。通俗的将,可以为一个元素指定多个类,如<span class="stress bigsize">,但不能为一个元素指定多个id。

  4. 子选择器

    选择指定标签元素的第一代子元素,如下,

    .food>li{border:1px solid red;}
  5. 包含(后代)选择器

    选择指定标签元素下的后辈元素,如

    .first  span{color:red;}

    子选择器和后代选择器的区别
    (1)子选择器仅选择直接后代(第一代后代),后代选择器作用于所有后代
    (2)表达方式不同

  6. 通用选择器

    匹配html中所有标签元素,表达方法为

    * {color:red;}
  7. 伪类选择器
    给标签的状态(鼠标滑过)设置样式,如

    a:hover{color:red;}
  8. 分组选择器
    为多个标签元素设置同一个样式,如

     h1,span{color:red;}

    相当于:

    h1{color:red;}
    span{color:red;}
相关标签: css