《任务2 CSS总结》选择器

1.元素选择器

说白了就是针对某一个元素的。针对html都是可以的

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

2.类型选择器

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。

<h1 class="important">

This heading is very important.
</h1>
​
<p class="important">
This paragraph is very important.
</p>

语法：*. 或 .

*.important {color:red;}

.important {color:red;}

3.ID选择器

不引用class属性值，要引用id属性中的值。比如：

<p id="intro">This is a paragraph of introduction.</p>

语法： #

*#intro {font-weight:bold;}

#intro {font-weight:bold;}

4.属性选择器

就是给有某个属性的值，附上属性。。。哈哈 比如

*[title] {color:red;}

这个意思就是含有tittle的所有颜色执行这个color属性

a[href] {color:red;}

这个是针对有href属性的 a元素

5.包含选择器

其实也叫做后代选择器，但其实叫包含更能体现它的不同。看个例子一目了然

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

h1 em {color:red;}

不出你所料，就是那个被em标签包含的会变成红色，所以叫包含选择其嘛。

6.子元素选择器

我个人觉得，子元素选择器就是在包含选择其的基础上再次缩小了范围，我们体会一下这个用法。
语法：用 > 连接

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

h1 > strong {color:red;}

css1.png

结果回事这样了。这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。
在这里我想问问为什么，有幸被大神看到希望为菜鸟的我指点迷津，为什么第二个h1中的srtong不会收到影响呢？

7.相邻兄弟选择器

这个名字起的就非常的生动，他们是兄弟就要要同一个父亲，还必须是相邻的兄弟。就相当于熊大和熊二吧。然后还是看看例子吧

h1 + p {margin-top:50px;}

解释：选择紧接在 h1 元素后出现的段落p，h1 和 p 元素拥有共同的父元素
语法：用 + 连接
然后我们再体会一下他的特殊情况：

<div>

 <ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ul>
 <ol>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ol>
</div>

li + li {font-weight:bold;}

快想想现在是什么情况，谁是谁的兄弟，谁又是谁的爸爸呢？揭晓答案：

Screenshot from 2016-12-07 22-13-25.png