新手向CSS选择器全面整理

CSS选择器大整理

1. 元素选择器

*{ }	通配符选择器（不推荐使用）	可以选中全文
#id{ }	id选择器	选择此表示此id的元素
p{ } 、a{ }、div{ } 等	标签选择器	对某类元素进行选择
className{ }	类选择器	对标识每个类名的元素进行选择

2. 关系选择器

div a{ }	后代选择器	选中div中包含的a和其子元素包含的a，不分层级
div>a{ }	子代选择器	仅选中div自己包含的a，分层级（仅找子元素）
p，a { }	并集选择器	选中所有的p和a标签

这两个不经常使用的

.className~p{ }	兄弟选择器	只选择同一级别的，离的很近的元素
div+p{ }	相邻选择器	只找div与p相邻者的、紧挨着的，只找下面，不找上面

3. 伪元素选择器

CSS中有如下四种伪元素选择器：

   1）first-line:为某个元素的第一行文字使用样式；

   2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；

   3）before:在某个元素之前插入一些内容；

   4）after: 在某个元素之后插入一些内容；

使用方法：选择器：伪元素{样式}
以常用的清楚浮动的工具来举例

.clearfix:after {
	clear: both;
	display: block;
	content: "";
}

4. 普通的常用伪类选择器

• :link /* 未访问的链接的样式 */
• :visited /* 已访问的链接的样式 */
• :hover /* 鼠标悬停到链接上的样式 */
• :active /* 在鼠标点击与释放之间发生的事件的样式*/
• :fouse /* 设置元素在成为输入焦点时的样式。 */

以:hover为例，这是一个实现悬停动画功能的样式

.sp1ulli:hover {
	z-index: 2;
	transform: translate3d(0, -2px, 0);
}

5.结构伪类选择器

5.1
E:nth-child(n)：选择父元素中第n个元素E，假设该子元素不是E，则选择符无效

• 其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、2n)和关键词(odd、even)
• 实例：p:nth-child(2n) 选中父元素中所有的偶数行且为p的元素

5.2
E:nth-last-child(n)：选中父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效

• 实例：p:nth-last-child(2n+1) 选中父元素中所有的奇数行且为p的元素（倒着开始）

5.3
E:nth-of-type(n)

• 只计算父元素中指定的某种类型的子元素E。
• 在E:nth-child(n)中，第n个子元素不是E，选择符就无效。但是对于E:nth-of-type(n)来说，会无视掉非E元素，只选择E元素中的第n个
• 相应的还有E:nth-last-of-type(n)

5.4
E:first-child 和E:last-child

• 这两个比较简单，只会选择子元素中的第一和最后一个E元素

5.5
E:not(s)
匹配不含有s选择符的元素E。

6. 属性选择器

语法：[属性名=’’]{}

<button title="普通按钮">普通按钮</button>
<a href="http://www.baidu.com">百度链接</a>
<a href="www.sina.cn">新浪博客</a>
<a href="https://www.sohu.com/">搜狐</a>

[title]{
  font-size: 18px;
}
/* 选中以http开始的元素 */
[href^="http"]{
  color: #008B8B;
}
/* 选中以cn结束的元素 */
[href$="cn"]{
  color: #483D8B;
}
/* 选中含有i的元素 */
[href*='i']{
  color: #808080;
}