1.1.1 引入CSS
/* 不建议@import 性能问题 */
1.2 选择器
1.2.1 元素选择器
/* 仅对P标签有作用 */p{...} 1.2.2 属性选择器
/* 仅对具有attr属性的E元素起作用 */E[attr]{...}/* 仅对attr=value的E元素起作用 */E[attr=value]{...}/* attr的值以空格为分隔符分开,其中一个值等于value即可的E元素 */E[attr~=value]{...}/* attr的值以连字符'_'为分隔符分开,其中一个值等于value即可的E元素 */E[attr |=value]{...}/* attr属性包含value值的E元素 */E[attr*="value"]{...}/* attr属性以value为开头的E元素 */E[attr^="value"]{...}/* attr属性以value为结尾的E元素 */E[attr$="value"]{...} 1.2.3 ID选择器
/* id为xx的元素起作用 */#xx{...}/* id为xx的E元素起作用 */E#xx{...} 1.2.4 class选择器
/* E为可选是否填写指定元素,my_class为指定lcass */[E].my_class{...} /* class同时包含class1.class2 */.class1.class2{...} 1.2.5 包含选择器
/* div内所有class为a的元素起作用,无论元素是否为子元素 */div .a{...} /*注意 包含关系有空格,同时满足关系无空格 */.class1 .class2 1.2.6 子选择器
/* 仅对div的子元素且class为a的元素起作用 */div>.a{...} 1.2.7 兄弟选择器
/* id为android的标签 之后出现的且class为long的同级元素 */#android ~ .long{...} 1.2.8 选择器组合
/*逗号分隔或关系,仅符合一种选择器即起作用 */#a,.b,div>.a{...} 1.2.9 伪元素选择器
:first-letter :first-line :before :after:first-letter和:first-line可实现首字大写与首行大写之类的问题
注意,这两个伪属性只对块元素div,p,section等元素起作用,对内嵌span等必须设定heihht与width、或postition:absolute、或display:block.
span{ disply:block;}//首字变蓝.span:first-letter{ color:#00f;} :before与:after用于在指定元素前/后插入内容,参考下面的内容相关属性.
1.2.10 内容相关属性
include-source: 属性值为url(url) content: 作用向指定元素之前或元素之后插入指定内容,该属性的值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name,list-style-type)、open-quote和close-quote等格式. quotes: 该属性的值可以是两个以空格分隔的字符串,前面代表open-quotes,后面带便quote. counter-increment:该属性用于定义一个计数器,值为该计数器的名称.counter-rest: 重置计数器.
eg: div>div:before{ content: '文字'; colol: blue; } div>div.no:after{ content:url("K.gif"); } div>div{ quotes: " >"; } div>div:before{ content: open-quote; } div>divafter{ content:close-quote; } div>div{ counter-increment: fucking_K; } div>div:before{ content: counter{fucking_K} '.'; font-size: 20pt; } --> div>after{ content: counter{fucking_K,lower-roman} '.'; font-size: 20pt; } div>h2{ counter-increment: fucking_K; } div>div{ counter-increment: funcking_K2; } div>h2:before{ counter-increment: funcking_K; counter-reset: fucking_K2; } div>div:before{ content: counter: funcking_K2; } 1.2.11 伪类选择器
Selecttor可省略.不作为匹配条件
结构性伪类选择器
1.1 Selector:root: HTML元素中,永远指向 元素.
1.2 Selector:first-child: 匹配其父元素的第一个节点.
1.3 Selector:last-child: 匹配选择器,而且是其父元素的最后一个节点.
1.4 Selector:nth-child(n): 匹配选择器,而且是其父元素的第n个节点.
1.5 Selector:nth-last-child(n): 匹配选择器,而且是其父元素倒数第n个节点.
1.6 Selector:only-child: 匹配选择器,而且是其父元素唯一的节点.
1.7 Selector:first-of-type: 匹配选择器,而且是其同类型的兄弟元素中的第一个元素.
1.8 Selector:last-of-type: 匹配选择器,而且是其同类型的兄弟元素中的最后一个元素.
1.9 Selecttor:nth-of-type(n): 匹配选择器,而且是其同类型的兄弟元素中的第n个元素.
1.10 Selector:nth-last-of-type(n): 匹配选择器,而且是其同类型的兄弟元素中的倒数第n个元素.
1.11 Selector:only-of-type: 匹配选择器,而且是其同类型的兄弟元素的唯一一个元素.
1.12 Selector:only:empty: 匹配选择器,而且其内部没有任何子元素(包括文本)的元素.
拿first-child和first-of-type举例
... //匹配不到任何元素,li必须是父元素的第一个元素. li:first-child{...} //匹配到li,是在父元素中匹配到的类型中的第一个即可. li:first-of-type{...} -child匹配是会把其他不同类型的兄弟节点算进去,而-of-type只计算同类型的兄弟元素
其中nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)支持参数
odd:匹配奇数的元素 even:匹配偶数的元素 xn+y: 匹配第(x乘以n)加y的元素UI元素状态伪类选择器
2.1 Selector:link: 匹配未访问的元素
2.2 Selector:visited: 匹配访问过的元素
2.3 Selector:active: 匹配处于用户被激活(鼠标点击与释放的过程中)的元素
2.4 Selector:hover: 匹配鼠标悬停状态的元素
2.5 Selector:focus: 匹配已得到焦点的元素
2.6 Selector:enabled: 匹配当前处于可用状态的元素
2.7 Selector:disabled: 匹配当前不可用状态的元素
2.8 Selector:checked: 匹配当前选中状态的元素
2.9 Selector:ready-only: 匹配当前只读状态的元素
2.10 Selector:read-write: 匹配当前处于读写状态的元素
2.11 Selector::selection: 匹配当前被选中的内容.
特殊的伪类选择
3.1 Selector1:not(Selector2): 匹配符合Selector1选择器,但不符合Selector2选择器的元素
3.2 Selector:target: 匹配符合Selector选择器且必须是命名描点的且正在被访问的目标选择器.
:target{ background-color: #fff; } //当正在浏览此div,:target生效 ...
查看更多关于疯狂Html+CSS+JS中CSS总结_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109769