📗目录
🟢一.基本选择器
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.后代选择器(E F)
选择了E元素的所有后代F元素,中间是一个空格
li a {
text-decoration: none;
}
3.子元素选择器(E>F)
子元素选择器,匹配所有E元素的子元素F
div > strong { color:#f00; }
4.相邻兄弟元素选择器(E + F)
EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻
ul + p {
color: red;
}
5.通用兄弟选择器(E 〜 F)
选择某元素后面的所有兄弟元素
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;
}