CSS简单总结
2018-05-05 本文已影响0人
miaomiao159
一.属性选择器：
所有title 属性元素
[title] {
...
}
全部匹配title元素和全部内容：点击此处登录
[title="点击此处登录"] {
...
}
title元素包含点击二字
[title*="点击"] {
...
}
title元素以点击开始
[title^="点击"] {
...
}
title元素以登录结束
[title$="点击"] {
...
}
其他属性
a[href^="http://abc"] {
...
}
a[href] {
...
}
二.后代选择器
div嵌套 class: a->b->c
//a下所有元素
.a *{
}
//a下找b
.a .b {
}
//a下找c,若有多个C，同时找到
.a .c {
}
html 下选a
html .a{
}
三.相邻选择器
1)相邻选择器(+) class a,b,c 相邻div，不嵌套
到a。
//以a开始，选下一个div内容，即b
.a +div {
}
//以b开始，选下一个div内容，即c
.b +div {
}
2)通用相邻选择器(~)
//以a开始，选下面所有相邻div内容，即b，c
.a ~ div {
}
从上到下取，比如共有3个，a,b,c,若从取b的相邻元素，则只能取到c,取不
//以b开始，选下面所有div内容，即c,a选不上
.b ~ div {
}
四.伪元素选择器
1)//p中第一个字母添加属性
p:first-letter{
}
2)before 内容前面加东西
after 内容后面加东西
html中 class=help
.help:after {
}
.help:before {
}
3)first-child
last-child
nth-child(2)2匹配第几个后代。
html:
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
div p:first-child {
...
}
div p:last-child{
...
}
div p:nth-child(2){
...
}
五.display属性：
display :block;
display: none;
六.行内元素和行内块元素
行内元素填充只有左右有变化，上下无变化；行内块元素填充上下左右均有变化，导航栏使用。
七.block
block.png
)
