关于几种CSS的选择器的总结
**前言:**首先,明确css的基本语法构成为:
selector {declaration1;declaration2;……declarationN}
选择器,以及一条或多条声明。
选择器为想要改变的HTML元素,声明由属性和一个值组成:
selector {property: value}
一、首先是最简单的选择器
h1,h2,h3,h4,h5,h6 {
color: green;
} /*使用选择器对你想规范的元素进行分组*/
注意css中的继承,比如你对进行了规范,在不做声明的前提下,body里面的标签都将是按照此规范进行修饰;如果你不想使用,那就直接声明即可,如:
body {
font-family: Verdana, sans-serif;
}
/* 实际上,直接对body进行声明,就已经包含了这层意思
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
*/
p {
font-family: Times, "Times New Roman", serif;
}
二、派生选择器(上下文选择器)
依赖于上下文关系,来确定对哪些元素进行规范:
直接举个栗子:
li strong {
font-style: italic;
font-weight: normal;
}
它规定只有在列表的strong元素会执行这些规范。
三、id选择器
id选择器对标记有特定id的HTML元素进行样式的指定。
“#”对id选择器的id进行定义。
下面的两个 id 选择器:
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意:id选择器可以搭配派生选择器使用,具体就是,将大范围换为**#id strong{ XXX}**。
四、类选择器
先看三个例子:
.abc {text-align: center}
p.abc {color: #f60}
.center strong {color: #f60}
<p class="center">
This paragraph will also be
<strong class='abc'>center-aligned</strong>.
</p>
第一个,明显是对类为abc的元素进行规范,第二个是对在p标签中的abc类进行规范,第三个是派生选择器的用法,可以类比id选择器。
五、属性选择器
普通格式:
[title]{color:red};
属性和值选择器:
[title=abc]{color:red};/*注意这里没有引号*/
属性和多值选择器:
[title~=hello] { color:red; }/*包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:*/
[lang|=en] { color:red; }/*包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:*/
属性选择器在设置表单的样式时使用十分方便。
除此之外的后代选择器、子元素选择器、相邻兄弟选择器使用大同小异