CSS选择器 | 星期天

基本选择器

选择器	描述	举例
标签选择器	通过标签名选择元素	div
类选择器	通过类名选择元素，一个类名可对应多个元素	.menu
id选择器	通过元素id属性选择元素，这个元素应该是唯一的	#footer
通配符选择器	选择页面中的所有元素，常用来清除内外边距	*

相邻选择器

选择所有指定元素的相邻后一个兄弟节点

h1 + p {
  text-decoration: underline;
}

<h1>h1-2</h1>
<p>p0 被选中</p>
<div class="container">
  <h1 class="good">h1</h1>
  <p>p1 被选中</p>
  <p>p2</p>
</div>

后代选择器

在所有后代节点中选

ul li {
  color: blue;
}

子选择器

与后代选择器不同的是，它只在亲儿子中选

div > a {
  color: green;
}

并集选择器

也叫分组选择器，选择用，分隔的所有元素

h1,h2,h3 {
    text-align: center;
}

交集选择器

选择指定类名的指定元素

p.center {
  color: yellow;
}

伪类选择器

根据元素的状态或所处 DOM 结构选择元素

动态伪类选择器

a:link {}       /*链接一开始的样式*/
a:visited {}    /*链接访问后的样式*/
a:hover {}      /*光标经过链接的样式*/
a:active {}     /*链接被按下时的样式*/


input:focus     /*:focus 用于选择获取焦点的表单元素，一般针对表单元素而言*/
textarea:focus

结构伪类选择器（CSS3）

选择符	含义
E:first-child	第一个子元素 E
E:last-child	最后一个子元素 E
E:nth-child(n)	第n个子元素 E
E:first-of-type	指定元素 E 的第一个
E:last-of-type	指定元素 E 的最后一个
E:nth-of-type(n)	指定元素 E 的第 n 个

nth-child 先找父亲的第n个孩子，再看是否为元素 E;
nth-of-type 是直接找第 n 个 E，忽略其他非 E 的元素

n可以是数字（从0开始）、关键字（even，odd）、公式等

/* 啥都选不到,因为元素div的第二个孩子不是p元素*/
div > p:nth-child(2) {
  color: red;
}
/* 选到2号p标签 */
div > p:nth-of-type(2) {
  color: blue;
}

<div>
  <p>1</p>
  <span>span</span>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

属性选择器（CSS3）

选择符	含义
E[att]	选择具有 att 属性的 E 元素
E[att=“val”]	选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”]	选择具有 att 属性且属性值以 val 开头的 E 元素
E[att$=“val”]	选择具有 att 属性且属性值以 val 结尾的 E 元素
E[att*=“val”]	选择具有 att 属性且属性值含有 val 的 E 元素

伪元素选择器(CSS3)

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

选择器	含义
::before	在元素内部前面插入内容
::after	在元素内部后面插入内容

伪元素必须有 content 属性,哪怕为""

before 和 after 创建了一个行内元素，在 DOM 树中无法找到，故为伪元素

/* 伪元素字体图标 */
p::before {
  content: '\e91e';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}

/* 伪元素清除浮动 */
/* 1、额外标签法（隔墙法） */
/* 在浮动元素后面添加一个块级标签（如div），并设置 clear: both */
<div style="clear:both" ></div>

/* 2、父级元素添加overflow，将其属性值设置为 hidden、 auto 或 scroll */

/* 3、父级添加after伪元素 */
.clearfix:after {
  content: ""; 必须要有content属性
  display: block; 块级元素
  height: 0; 不要看见该元素
  clear: both; 核心代码清除浮动
  visibility: hidden; 不要看见该元素
}
.clearfix { /* IE6、 7 专有 */
  *zoom: 1;
}

4、父级元素添加双伪元素
.clearfix:before,.clearfix:after {
  content:"";
  display:table; 
} 
clearfix:after {
  clear:both;
} 
clearfix {
  *zoom:1;
}

CSS选择器案例

ref：

CSS基础