css选择器

CSS选择器 以及它的类型

最近刚开始学HTML5，学到css这块呢，知识点很多，也比较碎，学的我头昏脑涨的，想要学好就需要进行细细的整理，所以为了以后也学这个的小伙伴们，今天我来给大家分享一下我认为很重要的一块知识，那就是css选择器，以及它都有哪些类型。

Css选择器指的是css它对应在HTML里生效的那个标签，而标签它的名称就是选择器。

一、 类选择器（想要一个元素或多个元素同时生效）
语法： .名称{}
例如:

    <div class="header"></div>
    .header{width:200px; height:200px;}

我们给div起名字叫header，在css中就可以体现类选择器的用法
注意： class起名不要用数字开头
Class可以起多个名字 class=“header center”
它的语法是前面加个点（不要漏掉哦）

二、 ID选择器
语法：#名称{}
举例：

     <div id="header"> </div>
     #header{width:200px; height:200px;}      `

注意：ID具有唯一性 只能有一个名字

三、 层次选择器
它主要包括四类：包含选择器 子选择器 相邻兄弟选择器 通用兄弟选择器

1. 包含选择器
   语法：父元素 子元素{}
   例如：

<div id="header">
   <p>我是儿子p</p>
   <div class="center">
     <p>我是孙子p</p>
   </div>
</div>

给容器div里面包含了一个p标签，给p修改样式如下

 #header p {font-size:15px;}

注意： a.父元素和子元素之间是空格
b.父元素可以是最近的父元素，也可以是爷爷元素或者其他祖先元素
c.如果是给子元素p设置样式，那么既包括儿子p也包括孙子p，重孙p等等，所有的p都生效。

2. 子选择器
   语法：父元素>子元素{}
   例如：

<div id="header">
    <p>我是儿子p</p>
    <div class="center">
      <p>我是孙子p</p>
    </div>
 </div>
 #header>p 
 {font-size:15px;}

该操作就只是对儿子元素p生效，对孙子p不生效。

3. 相邻兄弟选择器
   语法：选择器1+选择器2{}
   例如：

<div id="header">
    <div class="center"></div>
    <div class="top"></div>
    <div class="top"></div>
   </div>

 .center+.top{
 width: 200px;
 height: 200px;
 background-color: aquamarine;
 margin-bottom: 20px;
}

相邻兄弟选择器实现的是选择器1后面最近的选择器2样式改变

4. 通用兄弟选择器
   语法：选择器1~选择器2{} 两者之间是波浪号
   例如：

<div id="header">
     <div class="center"></div>
     <div class="top"></div>
     <div class="top"></div>
    </div>

 .center~.top{
 width: 200px;
 height: 200px;
 background-color: aquamarine;
 margin-bottom: 20px;
}
`

通用选择器实现的是选择器1后面所有选择器2的样式发生改变

四、 伪类选择器
它主要分为动态伪类、结构伪类、语言伪类、否定伪类、UI状态伪类、目标伪类、语言伪类。今天我主要说一下常用的动态伪类有哪些。
动态伪类主要有以下四种：
1.:link{} 指的是标签初始的样子
2.:visited 指的是被访问过后的样式
3.:hover 指的是鼠标悬停在上面的样式
4.:active 指的是鼠标按住不动后样式
这四个属性一般情况下用于超链接

五、 伪对象选择器
伪对象选择器有五个 after before first-line first-letter selection

1. after和before必须和content连用，content里面可以有内容，也可以不填。有内容的情况下，如果是文字，必须有双引号；但如果是图片，就不需要。
   用法：::after{content=“”；}
   ::before{ content=“”；}

2. first-line 指的是第一行文字
   用法： p::first-line{color:red;}
   将p标签的第一行文字变成红色。

3. first-letter 指的是第一个字符，它只支持块元素。
   用法：p::first-letter{color:red;}

4. selection 只支持背景颜色和字体颜色
   例如： .header::{font-size:13px;color:blue;background:yelow}
   其中字号大小的设置并不生效，背景色和字体颜色可以生效。

六、群组选择器
语法：选择器1，选择器2，选择器3，选择器4{}
一般需要代码化简的时候，会用到群组选择器。
例如： p,ul,h1{margin:0;padding:0}
给 p标签，ul列表和h1统一设置内外边距为0
七、通配符选择器
语法：{} 它一般是用来重置样式或者清除默认样式
例如 1.{color:green;} 使该页面中所有元素都变成绿色
2. *{margin：0；padding：0；} 使所有元素的的内外间距变为0，主要用于清除一些标签自带默认边框的情况。