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

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.