关于CSS 一
什么是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又想选择一个按特定的标签，怎么办呢？
-
序选择器
- 什么是序选择器？
就是通过顺序来进行定位的。
<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中文
