CSS的五大选择器

CSS 五大选择器

元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {
	background-color: black;
}

p {
	font-size: 30px; backgroud-color: gray;
}

h2 {
	background-color: red;
}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名 ： 属性值。

类选择器

作用：通过元素的class属性值选中一组元素

语法：.class属性值{}

.p2{
	color: red;
}

.hello{
	font-size: 50px;
}

id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

#f1{
    text-align:center;
    color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

把所有拥有 center 类的 HTML 元素均为居中。

.center {
	text-align:center;
}

指定特定的HTML元素使用class，所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {
	text-align:center;
}

CSS 属性 选择器

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id。

属性选择器

把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

属性和值选择器

改变标题title='runoob’元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值

包含指定值的title属性的元素样式，使用（~）分隔属性和值:

[title~=hello] {
	color:blue;
}

包含指定值的lang属性的元素样式，使用（|）分隔属性和值:

[lang|=en] { 
	color:blue; 
}

表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"]{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]{
    width:120px;
    margin-left:35px;
    display:block;
}