css的选择器总结

关于几种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 属性的所有元素设置样式。适用于由连字符分隔的属性值：*/

属性选择器在设置表单的样式时使用十分方便。

除此之外的后代选择器、子元素选择器、相邻兄弟选择器使用大同小异