SCIRU-CSS基本选择器

1、标签选择器
标签选择器是最简单的选择器，它的被命名为HTML的标签名，例如：

h1{
font-size:30px;
color:#333;
}

这里的h1就是标签选择器，在实际项目中，标签选择器一般用于定义全局样式。合理地使用标签选择器定义全局样式，可以大大减轻开发和维护的工作量。

2、类选择器
类选择器也称为class选择器，它的语法非常简单，在名称前面加上“.”符号。例如：

//CSS代码：
.red{
background:red;
}
//HTML代码：
<div class="red"></div>

3、id选择器
id选择器的语法是一个“#”号加上id的名称，例如：

//CSS代码：
#uid{
width:100px;
line-height:20px;
height:20px;
}
//HTML代码：
<div id = "uid">HELLO</div>

一个HTML元素只能对应一个id。
注意：id选择器拥有最高的权重，因此可以用于覆盖之前的一些定义。

4、通配符选择器
CSS从CSS 2时代开始就引入了一种简单选择器—通配符选择器（universal selector），它以星号（*）开始，该选择器可以与任意元素匹配。例如，下面的规则可以使文档中的每个元素都显示为红色：

 * {color:red;}

这个声明等价于列出了文档中所有元素的一个分组选择器。

注意：通配符选择器的权重是最低的，因此只要有其他的定义，使用通配符选择器进行的定义就会被覆盖。

5、子选择器
子元素选择器用于表示某些特定HTML嵌套关系时的样式展现，其语法关键词是一个“>”符号。例如：

//CSS代码：
li > a{
  color:blue;
}
//HTML代码：
<li><a href='#'>www.sciru.com</a></li>
<li><div><a href='#'>www.sciru.com</a></div></li>

“>”左边是父元素，右边是子元素。上面的代码就表示第一个列表项（<li>）中的链接（<a>）为蓝色，而其他地方的链接则不受影响。

注意：如果两个元素不是严格的“父子关系”，则使用子元素选择器的定义不会生效。例如上面HTML代码中的第2个列表项的文字就不会被设置为蓝色。

6、后代选择器
后代元素选择器类似于子元素选择器，只不过它的要求不那么严格。它的语法关键词是一个空格，例如：

//CSS代码：
li a{
  color:blue;
}
//HTML代码：
<li><a href='#'>www.sciru.com</a></li>
<li><div><a href='#'>www.sciru.com</a></div></li>

只要链接（<a>）标签是列表项（<li>）的后代元素即可，如上面的HTML代码，两个链接的文字都会被设置为蓝色。

注意：一定要分清楚后代元素选择器和子元素选择器的区别，后代包括子辈、孙子辈、曾孙子辈等，而子元素只包括子辈。

7、相邻元素选择器
相邻元素选择器用于选取和某个元素相邻的同级元素，其语法关键词是一个“+”符号，例如：

//CSS代码：
h1+p{
  color: red;
}
//HTML代码
<div class="content">
  <h1>测试</h1>
  <p>测试内容</p>
</div>

上面的CSS代码定义了和h1标题(<h1>)相邻的段落（<p>）的样式。

相邻元素选择器的使用有两个条件：
二者必须拥有同一个父元素。
二者相邻。

8、属性选择器
属性选择器的语法关键词是一对中括号“[]”，它是通过
（1）通过是否包含某些属性来选取HTML元素
（2）通过属性的值来选取HTML元素

例如：

拥有title属性的元素的文字颜色设为红色

[title] {
    color:red;
}

同时拥有href和title属性的a标签的文字颜色设为红色

 a[href][title] {
      color:red;
    }

a[href='http://www.sciru.com'][title='SCIRU'] { color: red; }

9、组选择器
如果要对多个元素定义同样的样式，则可以用组选择器来缩减重复代码。组选择器的语法关键字是一个“，”（英文的逗号），例如：

h1, h2, h3,h4,h5,h6{
  color:red;
}

这段代码表示从h1~h6文字都是红色。

10、复合选择器
第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。例如：

//CSS代码：
p.cls{
  color:red;
}
//HTML代码：
<p class="cls">hello01</p>
<div>hello02</div>
<div class="cls">hello</div>
<p>hehe</p>

只有第1个段落（<p>）中的文字会被设置为红色，因为它同时满足了p元素和class=”cls”两个条件。

CSS基本选择器