Hexo

一.CSS3的基本选择器

1.标签选择器

一个HTML页面由很多的标签组成，如<h1>~<h6>,<p>,<img/>等，CSS标签选择器就是用来声明这些标签。每种HTML标签的名称都可以作为相应的标签选择器的名称，例如，h3选择器用于声明页面中页面所有<h3>标签的样式风格。

语法：p{ font-size:16px;}

标注：p为HTML标签中的标签选择器，{}括号里面的是声明，属性：值

标签选择器是网页样式中经常用到的，通常用于设置页面中的标签样式。

代码示例

123456789101112

<style type="text/css">  h3{      color:#090;  }  p{      font-size:16px;      color:red;  }<body>  <h3>北京欢迎你</h3>  <p>北京欢迎你，有梦想谁都了不起</p></body>

2.类选择器

在标签选择器中看到，标签选择器一旦声明，那么页面中所有的该标签，都会相应的发生变化。例如，当声明了<p>都为红色时，页面中所有的<p>标签都将显示为红色，如果希望其中的某个<p>标签不是红色，而是绿色，仅靠标签选择器是不够的，还需类（class）选择器。
类选择器的名称可以有用户自定义，必须符合CSS规范，属性和值跟标签选择器一样。

语法 .class{ font-size:16px;}

标注：class为类名称，{}括号里面的是声明，属性：值
代码示例

1234567891011121314

<style type="text/css">  p{      font-size:16px;      color:red;  }  .green{      font-size:20px;      color:green;  }<body>  <h3>北京欢迎你</h3>  <p>北京欢迎你，有梦想谁都了不起</p>  <p class="green">有勇气就会有奇迹</p></body>

类选择器是网页中最常用的一种选择器，设置了一个类选择器后，只要页面中某个标签中需要相同的样式，直接使用class属性即可。类选择器在同一个页面中可以频繁地使用，应用起来非常方便

3.ID选择器

ID选择器的使用方法与类标签基本相同，在HTML中，只要在HTML中设置了id属性，就可以直接调用CSS中的ID选择器

语法 #id{ font-size:16px;}
标注：id为id名称，{}括号里面的是声明，属性：值
注意 ID选择器在页面中只能使用一次，也就是说在同一个页面同一个id属性只能设置一次；而类选择器可以在页面中多次使用。

代码示例

<style type="text/css"><body>  <h3>北京欢迎你</h3>  <p  id="first">北京欢迎你，有梦想谁都了不起</p>  <p id="second">有勇气就会有奇迹</p></body>

4.CSS选择器的命名规范

1）使用英文字母小写

2）不要和ID选择器同名

3）使用具有语义化的单词命名

4）长名称或词组可以使用驼峰命名方式命名选择器

二.CSS3的高级选择器

1.层次选择器

层次选择器是通过HTML的文档对象模型元素间的层次来选择元素的，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟等几种关系，通过它们之间的关系就可以快速选定需要的元素，其语法如下：
层次选择器的语法：

| 选择器 | 类型 | 功能描述 |
| ————- |:————-:| —–:|
| E F | 后代选择器|选择匹配的F元素且匹配的F元素被包含在匹配的E元素内 |
| E> F |子选择器 | 选择匹配的F元素且匹配的F元素是匹配的E元素的子元素 |
| E+ F | 相邻兄弟选择器 | 选择匹配的F元素且位于匹配的F元素紧位于匹配的E元素后面 |
| E~ F | 通用兄弟选择器 | 选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素 |
代码示例1：

1234567891011121314151617181920212223

<head>  <style type="text/css">    p,ul{        border:1px solid red;    }  </style></head><body>  <p class="active">1</p>  <p>2</p>  <p>3</p>  <ul>     <li>        <p>4</p>     </li>    <li>        <p>5</p>     </li>    <li>        <p>6</p>     </li>  </ul></body>

1）后代选择器

后代选择器的作用就是可以选择某元素的后代，例如：“E F”中，E为祖先，F为后代元素，那么F元素无论是E元素的子元素，孙辈元素，或者更深层次的关系，都将被选中.

在代码示例1中样式中，加入如下代码：

<style type="text/css">   body p{       background:red;   }</style>

注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入。

2）子选择器

子选择器（E>F），只能选择某元素的子元素，其中E为父元素，F为子元素，
在代码示例1中样式中，加入如下代码：
12345
<style type="text/css"> body>p{ background:pink; }</style>

3）相邻兄弟选择器

相邻兄弟选择器（E+F），可以选择紧接着在另一个元素的后面他们有一个相同的父级元素，换句话说，E和F是同辈元素，并且相邻。
在代码示例1中样式中，加入如下代码：

<style type="text/css">   active+p{       background:green;   }</style>

4）通用兄弟选择器

通用兄弟选择器（E~F），用于选择某元素后面的所有兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说，E和F元素都是同辈元素，并且F元素，在E元素的后面，E~F将选中E后面的所有F元素。
在代码示例1中样式中，加入如下代码：

<style type="text/css">   .active~p{       background:green;   }</style>

注意：通用兄弟选择器选中的是E元素相邻的后面兄弟元素F,是一个或多个元素，相邻兄弟选择器选中的仅是与E元素相邻并且紧挨的兄弟元素F,其选中的的只是一个元素。
2.结构伪类选择器
伪类可以将一段并不存在的HTML当作独立元素来定位，或者是找到无法使用的其他简单选择器就能定位到切实存在的元素上，这种选择器可以根据元素在文档树中的某些特征性定位到它们。
代码示例2：
12345678910
body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul></body>

12345678910

<style type="text/css">    /*ul的第一个子元素*/    ul li:first-child{background:red;}     /*ul的最后一个子元素*/    ul li:last-child{background:green;}     /*选择父级里的第一个子元素*/    p:nth-child(1){background:yellow;}     /*选择父级里第2个类型为P的元素*/    p:nth-of-type(2){background:blue;} </style>

总结
E F：nth-child (n)和E F：nth-of-type(n) 在使用时记住以下关键点

E F：nth-child (n)在父级里从一个元素开始查找，不分类型。

E F：nth-of-type(n)在父级里先看类型，再看位置。
3.属性选择器
在HTML中，可以给元素设置各种各样的属性，如id,class,title,,href等，通过各种各样的属性可以选择到元素并为其设置样式。
属性选择器的语法：

| 属性选择器 | 功能描述 |
| ————- |:————-:| —–:|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)|
| E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说，字符串val与属性值中的任意位置相匹配 |
注意：
E[attr=val] 属性选择器中，属性和属性值必须完全匹配才能被选中。