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.

  • 相关阅读:
    转MySQL详解--索引
    [转]关于MYSQL Innodb 锁行还是锁表
    根据STATUS信息对MySQL进行优化
    源码编译安装 MySQL 5.5.x 实践
    thrift服务端到客户端开发简单示例
    thrift安装
    thrift 调取 python php go 客户端代码
    Linux系统启动级别及顺序
    Linux手动释放内存
    /etc/passwd&/etc/shadow文件分析
  • 原文地址:https://www.cnblogs.com/wz0107/p/4611613.html
Copyright © 2011-2022 走看看