什么是CSS

CSS是对网页进行 样式和布局 设置的工具

要设置一个元素的样式，第一步是要选中一个元素，那么怎么选中元素呢？

选择器

我们是不是可以使用标签来选择呢？

• 标签选择器

格式：标签

p{
  样式属性: value
}
/**/
<p>我是标题1</p>
<p>我是标题2</p>
<p>我是标题3</p>

问题是标签选择器只能选择一类的标签，上例中的三个p标签都会被选中

---

好么我们又考虑在HTML中大多数的元素都有一id,class,title属性，所有我们可以给元素设置id,class,title来进行选择

• id选择器、类选择器、属性选择器

1. id选择器

id值是整个网页中唯一的
格式: #id值

#i666{
  样式属性: value
}
/**/
<h1 id="i666">我是标题</h1>

2. 类选择器

多个元素可以共用一个class
格式：.classname

.biaoti{
  样式属性: value
}
/**/
<h1 class="biaoti">我是标题</h1>

3. 属性选择器

格式：[]

h1[title]{
  样式属性: value
}
/**/
<h1 class="biaoti" title="这是这个网页的主标题abc">我是标题</h1>

以上面代码为例：
通常与标签配合作用，如上，选择有title属性的h1标签

选择器	描述
[title]	带有title属性的元素
[title="这是这个网页的主标题abc"]	title="这是这个网页的主标题abc"的元素
[title^="这"]	选择title值中以"这"开头的元素
[title$="abc"]	选择title值中以"abc"结尾的元素
[title*="b"]	选择title值中包含"b"的元素

---

但是如果给每一个元素都加上id,class,title属性是一个非常麻烦的事。
html是一个一层套一层的结构，那么我们是不是可以使用他们的父子、兄弟关系来选择呢？

• 关系选择器

1. 后代选择器

找所有的后代，无论是第几代
格式：_{以空格割开}
祖先选择器 子孙选择器

.abc p{
  样式属性: value
}
/**/
<div class="abc">
  <p id="i666">我是段落1</p>
  <div>
    <p class="c123">我是段落2</p>
  </div>
</div>

** 选择div中的两个p标签

2. 子类选择器

格式：_以>割开
父选择器>子选择器

.abc>p{
  样式属性: value
}
/**/
<div class="abc">
  <p id="i666">我是段落1</p>
  <div>
    <p class="c123">我是段落2</p>
  </div>
</div>

** 只选择”我是段落1“的p标签

3. 兄弟选择器

格式：_以+割开
选择选择器1+选择选择器2
同级选择，仅选择选择器1相邻的选择选择器2

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <p>我是段落1</p>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
  <p>我是段落2</p>
</div>

例如：

ul+p 只能选择”我是段落1“
-----因为第一个p中间割了一个ol
li+li 可以选择ol和ul中的第2、3个li
-----因为+只能选择后面的兄弟元素

---

• 同时满足两个条件
• 只要满足两个条件中的一个
  这也是一种关系

4. 交集选择器

格式：_{没有分割符}

例如：p.c123 选择p标签 同时 p标签的class为c123的标签

5. 并集选择器

格式：_以，割开

例如：#i666,.c123 选择id为i666以及类为c123的两个标签

---

再来想一想，如果不想设置id,class又想选择一个按特定的标签，怎么办呢？

• 序选择器

1. 什么是序选择器？
   就是通过顺序来进行定位的。

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <p>我是段落1</p>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
  <p>我是段落2</p>
</div>

如上面的代码，我只想选择ol中的第二个li，我们可以使用：
div>ol li:nth-child(2)
：div中的---ol中的---第二个li元素

详细：W3C中文