标签:
css选择器有10+种。这里介绍几种常用的和他们的特点
1.元素选择器
如h1 h2 h3 a p 等一系列标签名
2 通配选择器
*,匹配所有html的元素
3 类选择器
class=‘a b‘这种选择器在.a.b和.b.a是一样的,不区别先后顺序,另外类选择器区分大小写,class=‘A‘在css中不能用.a匹配到,只能用.A匹配到
类选择器在页面中一般用于样式的复用
4 ID选择器
id选择器在页面中具有唯一性,并区分大小写,就是说box和BOX不是同一个ID
5 属性选择器
有4种模式
1.【name】
2【name=‘a b‘】要完全匹配,ab顺序不能换,a和b之间的空格不能省
3【name*=value】name属性中有value值存在即可匹配到
4【name|=en】值为en或者en-开头的
6 后代选择器
例子 div p这样匹配到div下面所有的P元素,包括是子元素p,孙子元素P,如
<div> <p>123</p> <ul> <li><p>123</p></li> </ul> </div>
7 子选择器
只能匹配到儿子的选择器,如下面只能匹配到123,而不能匹配到333
<div> <p>123</p> <ul> <li><p>333</p></li> </ul> </div> div>p{color:red}
8 兄弟选择器
<h1>1111</h1> <h2>2222</h2> <h3>3333</h3> /*h1+h2{color: #3179ad} 有效*/ /*h1+h3{color: #3179ad} 无效*/ ===================== <h1>1111</h1> <div><h2>2222</h2></div> <h3>3333</h3> /*h1+h2{color: #3179ad} 无效*/ =================== 总结:/*只能匹配到紧接着的兄弟元素*/
9伪类选择器
分2种
1.静态:a:link和a:visited
这里的a:link后面的link是必须的,要不然 <a>123</a> <a href="123">123</a> a{color:red}都能匹配上面2个元素。 写成a:link只能匹配有href属性,并且href属性有值的a元素
2 动态.
focus,hover,active三个元素
动态伪类不会重绘css,就是说a:hover{font-size:20px}并不会让字体成20px
css2.0推荐的a标签伪类的写法是LVHA.
标签:
原文地址:http://www.cnblogs.com/wz0107/p/4611613.html