CSS入门笔记二十七:CSS3新增选择器

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

新增选择器

a.属性选择器:可以根据元素特定的属性来选择元素
CSS入门笔记二十七:CSS3新增选择器
注意:类、伪类、属性选择器的权重伪10.

b.结构伪类选择器
CSS入门笔记二十七:CSS3新增选择器
E:nth-child(n)扩展
CSS入门笔记二十七:CSS3新增选择器
注意:E e : nth-child(x)与E e:nth-of-type的用法
E e : nth-child(x)的选择过程是先找到E标签的第x个子标签,再判断第x个子标签是不是e标签,若是,则选择,若不是则不选择。
例:

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结构

写法及注意:

CSS入门笔记二十七:CSS3新增选择器
伪元素清除浮动法原理解释

CSS入门笔记二十七:CSS3新增选择器

CSS入门笔记二十七:CSS3新增选择器

上一篇:2 flex布局 子项的三个常用属性


下一篇:2021.01.23css3选择器