码迷,mamicode.com
首页 > Web开发 > 详细

css权威指南阅读笔记-第二章css选择器

时间:2015-06-30 21:55:32      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

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.

css权威指南阅读笔记-第二章css选择器

标签:

原文地址:http://www.cnblogs.com/wz0107/p/4611613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!