CSS3有兼容性问题，要IE9+才能使用

新增选择器：

a.属性选择器：可以根据元素特定的属性来选择元素

b.结构伪类选择器

section li: nth-child(1) {
	color: red;
	}
<section>
	<li>1 </li>
	<li>2 </li>
	<li>3 </li>
	/*结果是1变成红色*/

section div :nth-child(1){
	color: red;
	}
<section>
	<p>1</p>
	<div>2</div>
	<div>3</div>
	/*没有标签会变色*/

E e :nth-of-type(x)则是先将E中所有的e标签都选择出来并按顺序排列，然后再找出第x个e标签改变样式

c.伪元素选择:利用CSS创建新的标签元素，而不需要HTML标签，从而简化HTML结构

写法及注意：

CSS2 属性选择器和 css3 选择器的用法和区别

兄弟们，这是我第一次写博客，希望对进来的人有用，写的不好别喷哈，谢谢.

css2 属性选择器:

　　1.[attribute]

　　　　例子:   [title]

　　　　解释:   选择含有  title  属性的所有元素.  (<div title="nav"></div> 就会被选中)

　　2.[attribute=value]

　　　　例子:   [title=piple]  

　　　　解释:   选择含有  title  属性并该属性的属性值为 piple 的所有元素.  (<div title="piple"></div> 就会被选中)

　　　　　　　注意，写的时候  不要  写成  [title="piple"]

　　3.[attribute~=value]

　　　　例子:  [title~=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值中含有  piple  单词的所有元素.  (<div title="nav piple"></div> 就会被选中，  而 < div title="nav  piples"></div> 不会被选中)

　　　　　　　注意:  是  title  的属性值中有 piple 这个单词， 而并非是 title 属性的某个属性值中包含 piple 字符串.

　　4.[attribute|=value]

　　　　例子:  [title|=en]

　　　　解释:  选择含有  title  属性并该属性的属性值中包含以 en-  开头的单词 (该单词一定要是第一个属性值)

　　　　　　   或者单独含有 en  单词的所有元素.  (<div title="en"></div> ,<div title="en-p"></div> ,<div title="en-p piple"></div> 就会被选中)

　　　　　　　　　　　　　　　　　　　　　　　　(<div title="en piple"></div>, <div title="nav en"></div> , <div title="nav  en-ss"></div> 不会被选中)

css3 属性选择器:

　　1.[attribute^=value]

　　　　例子:  [title^=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的第一个单词必须是以  piple  字符串开头的单词

　　　　　　   或者第一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有以 piple 字符串开头的单词的所有元素.

　　　　　　　(  <div title="piple"></div>,

　　　　　　　　<div title="piples"></div>,

　　　　　　　　<div title="piple sss"></div>,

　　　　　　　　<div title="pipless ssds"></div> 

　　　　　　　　就会被选中)

　　2.[attribute$=value]

　　　　例子:  [title$=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的最后一个单词必须是以  piple  字符串结尾的单词

　　　　　　   或者最后一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有以 piple 字符串结尾的单词的所有元素.

　　　　　　　(　<div title="piple"></div>,

　　　　　　　　 <div title="tttpiple"></div>, 

　　　　　　　　<div title="ssss piple"></div>, 

　　　　　　　　<div title="ddd dfadpiple"></div> 

　　　　　　　　就会被选中)

　　3.[attribute*=value]

　　　　例子:  [title*=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的中的某一个单词必须包含  piple  字符串的单词

　　　　　　   或者所有单词中有一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有包含 piple 字符串的单词的所有元素.

　　　　　　　(<div title="piple"></div>, <div title="ssspiples"></div>, <div title="sss piple sss"></div>, <div title="ssss dadpipless ssds"></div> 就会被选中)

区别:  

　　主要是 [attribute~=value] 与 [attribute*=value] 以及 [attribute|=value] 与 [attribute^=value]  两组属性选择器的区别.

　　他们的区别是  css2 的属性选择器以  单词为单位，  css3 的属性选择器以字符串为单位来计算.

css3 新增选择器

一、css3 之前的选择器

1. ID 选择器
2. 类选择器
3. 包含选择器 (E F)
4. 伪类选择器（:link,visited,hover,active,focus,first-child）
5. 伪元素选择器（::first-line,first-letter,before,after）
6. 通配选择器 (.)
7. 属性选择器 (foo [name=''martin''])
8. 子包含选择器 (E>F)
9. 相邻兄弟选择器 (E+F)

二、css3 新增选择器

新增属性选择器：

1. E [foo^=''bar''] 匹配 E 元素，该元素包含 foo 属性，且 foo 属性值以 bar 开头
2. E [foo$=''bar''] 匹配 E 元素，该元素包含 foo 属性，且 foo 属性值以 bar 结尾
3. E [foo*=''bar''] 匹配 E 元素，该元素包含 foo 属性，且 foo 属性值包含 bar 字符串

新增结构伪类选择器：

1. E:root 匹配文档所在的根元素
2. E:nth-child (n) 匹配 E 所在父元素第 n 个匹配 E 的元素，非 E 的子元素也参与排序，若第 n 个子元素不是 E 元素，则该语句没有效果（注意这里的 n 从 1 开始）
3. E:nth-last-child (n) 匹配 E 所在父元素倒数第 n 个匹配 E 的元素
4. E:nth-of-type (n) 匹配 E 所在父元素第 n 个匹配 E 的元素，非 E 的子元素不参与排序 (n 同样是从 1 开始）注意区别 nth-child (n)
5. E:last-child
6. E:first-of-type
7. E:last-of-type
8. E:only-child
9. E:only-of-type
10. E:empty

CSS3 新增选择器总结

属性选择器

·!important 强制优先，在 CSS 中添加。

·input[value][style]{样式内容}

·input[value=’vip1’]{样式内容}

·input[style~=’15px’]{……} // 标签中含有 style=”font-size:15px”;

·p[lang=’en’]{……} // 其他语言

·input[value^=’vip’]{……} //value 中的值以 vip 开头

·input[value*=’vip’]{……} //value 中含有 vip

·a[href^=”http”]{……} //a 中值以 http 开头

·a[href$=”.cn”]{……} //a 中以 .cn 结尾

关系选择器

·ul  li：后代选择器（包含选择器）； 当中添加样式后，其中所有内容都会添加样式。

·ul > li：子选择器；ul 中的 li 会有样式，若 li 中还有其他标签，则其他标签不受影响。

・相邻选择器（E+F）：h1+p{内容样式} //h1 与 p 同级

・兄弟选择器（E~F）：选择 E 元素所有兄弟元素 F；h2~p{……} //h2 与 p 同级且选择的元素不包含 h2

伪元素选择器

·E:first-letter/E::first-letter：设置元素内第一个字符样式。 //p:::first-letter{……}

·E:first-line/E::first-line： 设置元素内第一行字符样式。 //p:::first-line {……}

·E:before/E::before：每个 E 元素内容之前插入内容，用来和 content 属性一起使用。 //a::before {content:” 点击”}

·E:after/E::after：每个 E 元素内容之后插入内容，用来和 content 属性一起使用。 //a::after{content:url(路径)}

·E::selection： 设置对象被选中时的颜色。 //p::selection {backgroun:red}

结构伪类选择器

· :root 选择文档的根元素。 //:root{……}

·E:first-child：父元素的第一个子元素 E。 //p:first-child{……}

·E:last-child：父元素的最后一个子元素 E。 //p:last-child{……}

·E:only-child：仅有一个子元素 E（的情况下作用）。

·E:only-of-type： 只有一种类型的子元素。

·E:first-of-type： 匹配同类型中的第一个同级元素。

·E:last-of-type： 匹配同类型中的最后一个同级元素。

·E:nth-of-type(n)：匹配同类型中的第 n 个同级兄弟元素。

·E:nth-last-of-type(n)：匹配同类型中的倒数第 n 个同级兄弟元素。

·E:nth-child(n)：E 元素的第 n 个子元素。

・可以直接用数字，如 2

・可以用奇数（odd）或偶数（even）

・可以用公式

·E:nth-last-child(n)：匹配父元素的倒数第 n 个子元素。

·E:empty： 匹配没有任何子元素。 //div:empty {……}（html 中：<div></div> 不能有空格）

UI 伪类选择器及其他选择器

·E:active 向被激活的元素添加样式。

·E:hover 当鼠标悬浮在元素上方时，向元素添加样式。

·E:link 向未被访问的链接添加样式。

·E:visited 向已被访问的链接添加样式。

·E:focus 向拥有键盘输入焦点的元素添加样式。

·E:lang 向带有指定 lang 属性的元素添加样式。如：P:lang(en){color:red;}

·input:checked 选择每个被选中的 input 样式。

·input:disabled 选择每个禁用的 input 样式。

·input:enabled 选择每个启用的 input 元素。

·#E:target 选择当前元素的锚点元素。

· :not(E) 选择 E 元素之外的每个元素。

・补充：选择器优先级：元素选择器 < 类选择器 < ID 选择器 < 行内样式

CSS3 新增选择器概览

selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

但是有问题, :last-child 不生效.

应该是:
1 当前 selector 的父元素 parent
2 parent所有子元素, [a,b,c]
3 子元素的集合的第一个元素, 如果是 selector
4 设置样式, 生效.

  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**

所以使用这两个伪类, 在其上添加一个父元素.就可以认为是第一种实现了.

nth-child() 同样适用于上面的规则.
注意这里的 n 有很大发展空间, 可以实现 奇／偶, 选择哪几个, 从哪几个开始选.

nth-last-child() 倒着选
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:root
选择文档根元素.就是 html
:empty
选择元素中连个空格都没有的元素
:not
否定选择器

:only-child
在集合只有一个元素的时候才会生效.

::selection
只能设置两个属性：background,color.

今天关于CSS入门笔记二十七：CSS3新增选择器和css3新增选择器有哪些的讲解已经结束，谢谢您的阅读，如果想了解更多关于CSS2 属性选择器和 css3 选择器的用法和区别、css3 新增选择器、CSS3 新增选择器总结、CSS3 新增选择器概览的相关知识，请在本站搜索。