首页 > 代码库 > CSS选择器

CSS选择器

关于CSS常用选择器:

1、ID选择器
  关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错的。

  例如:<h1 id="warning">Meerkat <em>Central</em></h1>   #warning{color:red} 进行CSS样式的设置

2、类选择器

   对文档元素的class属性命名不具有唯一性,也就是说不用的元素可以拥有相同的类名

   例如:<h1 class="warning">Meerkat <em>Central</em></h1>

         <h2 class="warning">Shipping And Payment</h2>

   这种情况在类的命名中是可以存在,而且当你用类选择器进行样式时 .warning{color:red}一级标题和二级标题的颜色都会被设置成红色

3、属性选择器

   属性选择器顾名思义就是利用属性选择出某个标签然后对样式或者js进行操作的。属性选择器分为几类:

   1)简单属性选择器

   例如:<h1 class="hoopla">Hello</h1>

         <h1 class="severe">Serenity</h1>

         <h1 class="fancy">Fooling</h1>

   h1[class] {color:red} 按上面设置样式h1标题的颜色都会被设置成红色,文档中设置了class属性的h1标签颜色都会被设置成红色

   2)根据具体的属性选择

   例如:<h1 class="hoopla">Hello</h1>

         <h1 class="severe">Serenity</h1>

         <h1 class="fancy">Fooling</h1>

   h1[class="hoopla"] {color:red;}    h1[class="severe"] {color:blue;}  h1[class="fancy"] {color:yellow;} 根据以上特定属性选择,Hello被设置成红色,Serenity设置成蓝色,Fooling设置成黄色

   还有两种属性选择器分别是:根据部分属性值选择和特定属性选择类型,这两种选择在实际开发的过程中用到较少,这里不做介绍。有兴趣的可以自己去了解

 

CSS选择器