CSS3选择器

📗目录

🍊一.基本选择器

🍊二.组合选择器

🍊三.属性选择器

🍊四.CSS 伪元素

---

🟢一.基本选择器

1 *：通配符选择器

通用元素选择器，匹配任何元素

* {   margin:0;   padding:0;  }

2.元素选择器(E)

匹配所有使用E标签的元素

p { font-size:24px; }

3 .class：类选择器

class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class

.error {
  color: red;
}

4.id选择器（#ID）

#container {
   width: 960px;
   margin: auto;
}

5. tagName：标签选择器

定位页面上所有的某标签

a { color: red; }
ul { margin-left: 0; }

🟢二.组合选择器

1.群组选择器（selector1,selector2,...,selectorN）

每个选择器之间使用逗号“，”隔开

div,p { color:#f00; }

 2.后代选择器（Ｅ Ｆ）

选择了Ｅ元素的所有后代Ｆ元素，中间是一个空格

li a {
  text-decoration: none;
}

3.子元素选择器(E>F)

子元素选择器，匹配所有E元素的子元素F

div > strong { color:#f00; }

4.相邻兄弟元素选择器(E + F) 

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

ul + p {
   color: red;
}

5.通用兄弟选择器（Ｅ 〜 Ｆ）

选择某元素后面的所有兄弟元素

ul ~ p {
  color: red;
}

🟢三.属性选择器

1.E[attr]

只使用属性名，但没有确定任何属性值

a[title] {
  color: green;
}

2.E[att=val]

 指定属性名，并指定了该属性的属性值

	
div[class=”error”] { color:#f00; }

 3.E[att~=val]

指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

td[class~=”name”] { color:#f00; }

 4.E[att|=val]

指定了属性名，并且属性值是value或者以“value-”开头的值

p[lang|=en] { color:#f00; }

5.E[att^=”val”]

指定了属性名，并且有属性值，属性值是以value开头的

div[id^="nav"] { background:#ff0; }

6.E[att$=”val”]

属性att的值以”val”结尾的元素

a[href$=".jpg"] {
  color: red;
}

7.E[att*=”val”]

属性att的值包含”val”字符串的元素

a[data-filetype="image"] {
   color: red;
}

 🟢四.CSS 伪元素

1.selector:link  selector:visited  selector:hover  selector:active  伪类选择器

一般情况下selector都为a标签，以上四种伪类选择器代表的意思如下：

• link:连接平常的状态
• visited:连接被访问过之后  
• hover:鼠标放到连接上的时候
• active:连接被按下的时候

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

2.E:first-child

匹配父元素的第一个子元素

ul li:first-child {
   border-top: none;
}

3.E::last-child

选择某个元素的最后一个子元素

ul > li:last-child {
   color: green;
}

4.E:nth-child(n)

匹配其父元素的第n个子元素，第一个编号为1

p:nth-child(1) { color:#f00; }

 5.E:nth-last-child(n)

匹配其父元素的倒数第n个子元素，第一个编号为1

P:nth-last-child(2) { background:#ff0; }

 6.E:nth-of-type(n)

:nth-of-type类似于:nth-child；唯一不同的是这种指定了元素的类型而以

ul:nth-of-type(3) {
   border: 1px solid black;
}

7.E:nth-last-of-type(n)

选择指定的元素，从元素的最后一个开始计算

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

8.E:only-child

表示的是一个元素是它的父元素的唯一一个子元素

p:only-child { background:#ff0; }

9.E:only-of-type

选择一个元素是它的上级元素的唯一一个相同类型的子元素

li:only-of-type {
   font-weight: bold;
}