前端---HTML中CSS选择器

CSS选择器

定义CSS样式的语法总遵循以下格式:

Selector {
    property1:value1;
    property2:value2;
    ....
}

  上面语法格式可分为两个部分:

 

• Selector(选择器):选择器觉得该样式定义对哪些元素起作用. 
• {property1:value1;property2:value2;...}(属性定义):属性定义部分这些样式起怎样的作用(字体,颜色,布局等).

1.元素选择器

元素选择器是最简单的选择器,其语法格式如下:

E {......}   /* 其中E代表有效的HTML元素名 */

其实E可以是任意有效的HTML元素名,甚至可以用"*"来代表元素名,"*"可匹配HTML文档中的任意元素.

2.属性选择器 

 从广义来讲元素选择器其实是属性选择器的特例.属性选择器一共有如下几种语法格式:

E{...}:指定该CSS样式对所有E元素起作用.

E[attr]{...}:指定该CSS样式对具有attr属性的E元素起作用.

E[attr=value]{...}:指定该样式对所有包含attr属性,且attr属性为value的E元素起作用.

E[attr~=value]{...}:指定该CSS样式对所有包含attr属性,且attr属性的值为以空格隔开的系列值,其中某个值为value的E元素起作用.

div[id]{
    background-color:#aaa;
}

3.ID选择器 

ID选择器指定CSS样式将会对具有id属性值的HTML元素起作用.ID选择器的语法如下:

      #idValue{...}

#xx {
    border:2px dotted black;
    background-color:#888;
/*对id名为"xx"的元素起作用的CSS样式*/
}

4.class选择器 

class选择器指定CSS样式对具有class属性的元素起作用.class选择器的语法格式如下:

[E].classValue {......}    /* 其中E是有效的HTML元素,也可以不加[E] */

5.包含选择器 
包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部,语法格式如下: 

Selector1.Selector2 {...}  /* 其中Selector1,Selector2都是有效的选择器 */

..........之后还有诸多选择器格式,不再逐一介绍.