首页 > 代码库 > CSS 选择器

CSS 选择器

1、基本选择器

(1)“*”选择器:通配符

   描述:将匹配所有的HTML标记,所有的标记都会改变的。  

   语法:*{ color:red; }

   注意:“*”尽量少用,因为IE6不支持。

技术分享

(2)标签选择器

   描述:将匹配指定的HTML标记。

   语法:h1{ color:red; }

   注意:CSS标签选择器,与HTML标记的名称一样,但不能加尖括号。

  技术分享

(3)class选择器(类选择器)——类选择器是使用频率最高的

   描述:给一类HTML标记加样式。这里所指的“一类”是:每个HTML标记都有一个class属性,且class的值一样。class属性是公共属性,每个HTML标记都有。

   类选择器的名称,必须以“.”开头,后限HTML标记的class属性的值。如:.box{ color:red; }

   HTML标记的class属性的值,不能以数字开头。

 

技术分享

 

(4)id选择器

  描述:给指定id的元素添加样式。

  注意:网页中HTML标记的id属性的值,必须是唯一的

  每一个HTML标记都有一个id的公共属性。

  注意:id属性一般是给JS使用的,不是让你来加样式的。class属性只能给CSS用,不能给JS用的。

  id选择器的名称,必须以“#”开头,后跟HTML标记的id属性的值

技术分享

2、组合选择器

(1)多元素选择器

    描述:给多个元素加同一个样式,多个选择器之间用逗号“,”隔开。

    举例:h1,p,div,body{color:red;}

 技术分享

(2)后代元素选择器(最常用)

   描述:给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。

   举例:div  .title{ color:red;}

技术分享

(3)子元素选择器

  描述:给某个元素的子元素添加样式。

  举例:div > h1.title{color:red;}

技术分享

 

CSS 选择器