CSS选择符与继承

一、选择符

1、元素、类和ID选择符

//元素
ELEMENT {
	STYLES
}
//类
*.CLASS {
	STYLES
}
//子类
*.CLASS.SUBCLASS.ETC{
	SUBCLASS_STYLES
}
//ID
#id {
	STYLES
}

如果有多个选择符选择同一元素，那么每个选择符中的样式都会被添加到那个元素上。拥有高层叠排序的选择符会覆盖低层叠排序选择符中相同规则的值。

2、位置与群组选择符

• 群组选择符

多个选择符用逗号连起来，可以为不同的选择符赋予相同的样式规则。

SELECTOR, SELECTOR, ETC{
	STYLES
}

• 后代选择符

多个选择符用空白连起来，可以选择后代元素。

SELECTOR SELECTOR ETC{
	STYLES
}

• 子元素选择符

多个选择符用大于号连起来，可以选择子元素。

SELECTOR > SELECTOR > ETC{
	STYLES
}

• 兄弟元素选择符

多个选择符用加号连起来，可以选择兄弟元素。

SELECTOR + selecotr + ETC{
	STYLES
}

• 第一个子元素选择符

在任何选择符后面添加:first-child可以选择第一个子元素。

SELECTOR:first-child{
	STYLES
}

3、属性选择符

• 属性存在选择符

选择含有某个属性的元素。

SELECTOR[attribute]{
	STYLES
}

• 属性值选择符

  • 选择属性中包含指定内容的元素

    SELECTOR[attribute~="value"]{
        STYLES
    }
  

  • 选择属性值为指定内容的元素

    SELECTOR[attribute="value"]{
        STYLES
    }
  

4、伪类元素选择符

伪类元素选择符有：first-letter、first-line

SELECTOR:first-letter{
	STYLES
}

SELECTOR:first-line{
	STYLES
}

first-letter与first-line只与终端块状元素搭配，对内联元素或结构化块状元素不起作用。浏览器不能定位伪元素，也就是说，position、left、right、top、bottom等对伪元素不起作用。

5、伪类选择符

伪类选择符只能作用于<a>，一般按link、visited、hover、active、focus的顺序定义。

//选择未被浏览的超链接
a:link{
	STYLES
}
//选择已被浏览的超链接
a:visited{
	STYLES
}
//选择鼠标悬停的超链接
a:hover{
	STYLES
}
//选择获得焦点的超链接(非IE)
a:focus{
	STYLES
}
//选择获得焦点的超链接(IE)
a:active{
	STYLES
}

二、继承

1、可继承属性

• 被所有元素继承

visibility、cursor

• 被内联元素继承

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

• 被终端块状元素继承

text-indent、text-align

• 被列表元素继承

list-style、list-style-type、list-style-position、list-style-image

• 被表格元素继承

border-collapse

2、不可继承属性

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi

3、inherited

inherited是CSS提供的一个常量值，可以赋值给任何属性。当属性被赋值为inherited时，该属性会从它的父元素继承值。

4、视觉继承

由于background-color默认值是transparent(透明)，background-image默认是none，因此如果没有给子元素定义背景时，子元素会”视觉继承”父元素背景。
如果不希望视觉继承，给子元素设置背景色与图片即可。

SELECTOR{
	background-colr: COLOR;
	background-image: url("IMAGE_PATH");
}

参考资料

• 精通CSS与HTML设计模式