css初识（选择器篇）

在学过html基础之后，对于页面有了一定的了解，也能够自己做一些页面了，但是做出来的页面非常的难看，感觉十二年前的网页就基本是这个样子，下图是某相亲网站（不喜勿喷）：

但是这和我们现在的页面差距很大，这不是仅仅学html就可以弥补的，需要我们接触一个新的东西–css。
首先介绍css是什么。CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。
和html类似，它也不存在类似Java实现逻辑判断等一系列操作，他只是可以改变网页的外观，仅此而已。首先介绍css选择器：
css选择器有这么几种，先写一下大概的格式，选择器格式都比较类似。

p {
    color:red;
    /* 修改文字颜色 */
    font-size: 12px;
    /* 修改文字大小 */
    /* 属性之间用冒号隔开，键值对之间加分号分开 */
}
/* 
语义如下：

选择器{样式}

给谁改样式{改什么样式} */

选择器也分好几种类型，在html之中，我们知道许多标签，比如< a >标签，< div >标签，< p >标签等，那么我们要想给这些标签内的文字加上一些特殊的效果，就要用到这个选择器的功能，这就是标签选择器的用途。

/* 标签选择器：作用为某一大类全部选择标签，后修改样式 
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
*/
/*比如现在有一个<p></p>标签,我们要将它里面包裹的文字改成红色，字体大小改成12px（像素的意思），那么我们就可以这么去写
*/
p{
color:red;
font-size:12px;
}

这个选择器最为基础，也非常简单，初学者很好理解。
下面是类选择器：
当我们有多个p标签时，我们要将其中的一个标签内文字做一些操作，这时上面的方法就不能很好的控制你具体选择的是哪个标签，这是就需要用到类选择器。

<p class = "red">
html真的是太简单啦！
</p>
<p>
html真的是太简单啦！
</p>

/* 类选择器：
.类名{
    属性1：属性值1； 
    属性1：属性值1； 
    属性1：属性值1； 
    属性1：属性值1； 
    属性1：属性值1； 
    */
    .red{
        color:red;

    }
/* 类选择器使用"."来进行标识，后面跟一定的类名（自己命名的）
遇到一些长名词，可用短横线进行分割 
不要用纯数字、中文命名，尽量使用英文字母表示
尽量让别人一眼知道这个名的意义*/

这里的.red 是类名，比如上面的html代码，如果你选择使用标签选择器，那么两个标签内的内容都会被选择操作，但如果我们给要操作的内容加上一个类名red，那么你只需要选中这个red，就可以满足我们上述所说的要求，好比给这个标签一个名字，然后对名字进行操作。这里需要注意的是，既然是名字，那么就可以有很多名字，小名、译名都可以，也就是一个标签可以有多个名字。

/* 多类名:一个标签有多个类名，从而达到更多选择的目的
    1.使用方式：
    <div class = "red font 35">中间用空格隔开
    可以将公共部分属性放到一起从而增加代码的简洁，减少代码量，还方便后续的改变公共属性和统一修改
*/

此外，两个标签的类名也可以重复，因为在这个世界上可能会有和你重名的人，因此这个类名也可以重复
回到我们上述的需求，还有没有其他选择器也可以实现这个效果呢？答案显而易见是有的，下面就要介绍id选择器。

/* id选择器可以为标有特定id的HTML元素指定特定的样式 
 
   样式#定义，结构id调用，只能调用一次，因为一个标签id只能有一个，但class可以有很多个
   */
     #pink{
       color: pink;
   }

<p id = "pink">
html真的是太简单啦！
</p>
<p>
html真的是太简单啦！
</p>

这段代码也可以达到和上边类选择器一样的效果，那么这两种选择器有什么区别呢？id选择器，顾名思义，就是给予这个标签一个id，然后通过css选择它进行操作，但关键的是，这个id只能有一个，它不能像class一样可以同时命名多个相同id，这就好比我们的身份证号码，每个人都只能有一个，而且这个和别人的都不一样。那么现在这两种选择器的区别就很明显了，

类选择器	可以命名多次，不同标签之间可以有相同类名
id选择器	只能命名一次，不同标签不可以有相同类名

具体使用还是要看你所需要的是什么情况。
在实际开发情况中，情况往往较为复杂，只有这四种选择器肯定是不够用的，好在css还拥有一些功能更加强大方便的选择器，他们统称为复合选择器，下面就让我们一一介绍。

/* 复合选择器
复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的，可以更准确，更高效的选择目标元素。
常用的符合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等*/

<ul>
<div></div>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<div></div>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

现在设想这么一种情况，当我们有很多个子标签的时候，我们要给全部这两个的< li >子标签内容做一些操作，这时候一个一个给li类名太过麻烦，直接选择ul标签则会把下面的li也选上，给上面的div类名然后使用类选择器，但如果你有30个这样的ul标签，那么这种情况也变的不现实起来，这个时候，css就为我们提供了另外一种选择，那就是后代选择器：

/* 1.后代选择器
又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：

元素1 元素2{ 样式声明 }
只要元素2时元素1的后代就可以这么写，如果有非常多的相同元素1，则可以给元素1定义一个class，达到符合选择器的目的 */

需要注意这个后代选择器的语法格式，中间用空格隔开。此外，元素2后面也可以加元素3，元素4等等等等，为了方便，你也可以直接写成这样：

元素1 元素2 元素3 元素4 { 样式声明 }
/* 为了简便，可以这么写：*/
元素1 元素4 { 样式声明 }

只要后面的元素是前面的后代元素就可以，无论是子元素，孙子元素亦或此类。这个选择器还有一个弱化版，那就是子选择器。

/* 2.子选择器 
只能作为某元素的最近一级的子元素，只能选里的最近的子类元素
元素1>元素2{ 样式声明 }*/

顾名思义，子选择器只能作为最近一级的子元素来选择，比上面哪个后代选择器差了一点，但好处是代码很简便，一看>就知道这个是子选择器，就可以很快定位到这个地方。
还有一种情况，我要选择这个页面的其中一些标签对他们进行相同操作，他们不尽相同，父子类关系也都不是很明确，这时候一个一个选，代码量太大，那么有没有一种选择器可以将他们一次性全部选择出来呢？这个时候，并集选择器就起到了很大的作用，下面就来介绍一下。

/* 3.并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
元素1，元素2，元素3，。。。。元素n{样式声明}
通过英文逗号分割链接，任何形式的选择器都可以作为并集选择器的一部分 */

并集选择器在我们需要将大量不同标签做相同操作的时候非常好用，简洁而节约代码量。
在我们访问链接的时候，我们通常会遇到以下情况，在鼠标没有移动到链接位置的时候是一种颜色，在鼠标移动到链接上方是另一种颜色，在鼠标点击但并未弹起的时候又是另一种颜色，那么这个其实也是通过一种选择器来实现的，这种特殊的选择器就叫伪类选择器（我也不知道为什么叫这个）

/* 4.伪类选择器
伪类选择器用于向某些选择器添加一些特殊的效果，比如给链接添加特殊的元素，又或者选择第一个，第n个元素
伪类选择器最大特点是用冒号表示，比如:hover,:first-child 
4.1 链接伪类选择器
a:link / 选择所有未被访问的链接 /
a:visited / 选择所有已被访问的链接 /
a:hover / 选择所有鼠标指针位于其上的链接 /
a:active / 选择活动链接（鼠标按下未弹起的链接） /
注意事项：
为了确保生效，一般按照link\visited\hover\active 的顺序进行书写
2.因为a链接有单独默认的样式，所以在实际书写中要给链接单独指定样式
4.2 :focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标，一般<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input :focus{
    background-color:yellow;
}
*/