zoukankan      html  css  js  c++  java
  • 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.

  • 相关阅读:
    我和计算机
    十四周学习记录
    十五周个人作业
    怎样成为一个高手
    C语言第0次作业
    C语言博客作业03函数
    C博客作业01分支、顺序结构
    C语言博客作业02循环结构
    Rails后台,Firefox Addons前端,JS的AJAX调用
    Ruby 三元一次线性方程组
  • 原文地址:https://www.cnblogs.com/wz0107/p/4611613.html
Copyright © 2011-2022 走看看