CSS3学习
最近写了几篇文章都是基础的,先巩固下基础。嘿嘿
学习Css3不得不谈下CSS1和CSS2(最主要是CSS2.2),而CSS学习中选择器又是最重要的。下面讲下CSS选择器各个版本的变更
CSS1
选择器 类型 说明
E 元素选择器 如 DIV{ }
#showId ID选择器
.showClass 类型选择器
E F 包含选择器 如：DIV SPAN 表示DIV中的SPAN
E::first-line 第一行文本选择器
E::first-letter 第一字符选择器
CSS2.2
* 统配选择符 匹配所有的元素
E[foo] 属性选择器 匹配E元素，且E元素包含foo属性
E[foo="bar"] 属性选择器 匹配E元素，且E元素包含foo属性为bar
E[foo~="bar"] 属性选择器 匹配E元素，且E元素包含foo属性以bar为空格符分割列表中的一个
如a[foo~="bar"] 匹配 而a[foo~="bar1 bar2"]不会匹配
E[foo!="en"] 属性选择器 匹配<body foo="en-ss">不匹配 <body foo="ss_kk">
E:first-child 伪类选择器 匹配第一个子节点
E::before/after 伪类选择器 在匹配的E选择插入内容
E>F 、E+F 子包含选择符 相邻兄弟选择符 都匹配F
总结：关于伪类和伪元素
伪类：:first-child
伪元素：获取方式:: 有 ::first-line，":first-letter，::before，::after
例子1
HTML代码如下：<h1>伪类用法例子 mxria </h1>
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
h
1:
before {
display
:
block
;
width
:
100px
;
height
:
100px
;
background-color
:
#0066CC
;
text-align
:
center
;
white-space
:
pre
;
content
:
""
;
}
h
1:
after {
display
:
block
;
width
:
150px
;
height
:
100px
;
color
:
#FF33CC
;
font-size
:
13px
;
background-color
:
#6600FF
;
text-align
:
center
;
white-space
:
pre
;
content
:
"after伪元素"
;
}
|
例子1
CSS3增加了 3个选择符
E[foo^="bar "] 匹配E 并且包含属性foo且属性值前缀为bar 如 ：匹配<E foo="bar-kk">
E[foo$="bar"] ........................................................后缀.........
E[foo*="bar"] 匹配E 并且属性foo包含子串bar
关于伪类的扩展 :hover 实现看图购的功能：
<div id="main">
<ul>
<li><a href="http://www.jiawin.com">---</a></li>
<li><a href="http://www.jiawin.com">---</a></li>
<li><a href="http://www.jiawin.com">---</a></li>
<li><a href="http://www.jiawin.com">---</a></li>
<li><a href="http://www.jiawin.com">---</a></li>
<li><a href="http://www.jiawin.com">---</a></li>
<ul>
</div>
</body>
<style type="text/css">
#main:hover a{
opacity: 0.2;
}
#main:hover ul:hover a:hover {
opacity: 1;
}
#main a {
text-decoration: none;
display: block;
padding: 10px;
background: #900;
border-radius: 20px;
color: white;
text-align: center;
margin: 0 0 5px 0;
-webkit-transition: all 0.2s ease; //该地方涉及另外的关于CSS3动画的只是 可以先跳过 在下面会学习
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
</style>
关于 #main:hover ul:hover a:hover {
opacity: 1;
}
首先是分析经过main选择器、然后是经过main选择器里面的ul元素、
最后是经过ul元素里面的a标签，把这些条件全部加起来就是这里所代表的含义了，也就是鼠标同时经过main选择器、
main选择器里面的ul元素、ul元素里面的a标签时，所对应的a标签的属性为1
注意 该地方可以改成 #main ul a :hover {opacity:1}经过测试在各个浏览器中Chrome中测试通过
该地方涉及的应该是CSS的优先级问题 main ul a:hover优先级是 100+10+10 #main:hover a优先级是100+10 所以会优先显示Opacity=1.0样式。如果这个地方改成#main a:hover {} 也是可以的 因为CSS会优先解析后面的
所以关于Opacity还是会解析1.0的 而不会解析0.2的 但是如果样式1和样式2互换 那么会解析0.2的
伪类结构选择符
伪类结构选择符 是CSS3新增功能 但是并不是所有的浏览器都支持。该选择符利用文档结构树进行元素过滤 减少对ID和CLAS定义：
E:nth-child(n) : 匹配E的子元素第N个位置的子元素 参数有（公式（2n+1,2n 注意n是从1开始的），奇数偶数（odd,even）,数值（1,2,3））
E:nth-last-child(n) :语法与上同 但是是反方向的
E:nth-of-type(n) p匹配元素E的元素中所有E类型元素排序后的第N个元素
E:nth-last-of-type(n) 语法上同 但是反方向
E:last-child 匹配最后一个E元素父节点的E元素
E:first-of-type =E:nth-of-type(1)
E:last-of-type E:nth-last-of-type(1)
E:only-child E的父节点只包含一个子元素 匹配该元素E
E:only-of-type E的父节点只有一个同类型的子元素 匹配该元素E
E;empty 匹配E元素 且E元素无子节点 文本也节点
关于兼容性：
关于CSS3选择符定义总结归纳如下：
1、通用子元素过滤器：如E：nth-child(n) E:nth-last-child(n)
2 、通用子类型过滤器 如：E:nth-of-type(n) E:nth-last-of-type(n)
3、特定位置子元素 如：E :first-child E:first-type-child E:last-child
4、其他 如：E:root(根元素) E：only-chilid E:only-of-type E:empty
伪状态选择器：
E：enabled 选择E所有可用UI元素 指在当前FORM下
E：disable 。。。。。不可用元素，，，，，
E:checked 单选框复选框 选中的UI元素
至此：CSS选择符介绍完毕：
至此总结如下:
CSS选择符包括以下几种：ID选择符(E#id), 类选择符(E.class),包含选择符(E F),链接伪类选择器(E:link、E:visit),用户操作伪类选择器(E:hover,E:active,E:focus),伪元素选择器（E::first-line,E::first-letter,E:after,E:before）,
属性选择器（E[foo] E[foo="bar"] E[foo~="bar"] ,E[foo^="bar"], E[foo!="bar"],E[foo^="bar"] E[foo$="bar"] E[foo*="bar"]） 结构选择符：(E:first-child+上面的伪类结构选择符)
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
