zoukankan      html  css  js  c++  java
  • css 选择器

    1、标签选择器

    p{
    font-size: 12px;
    background: #900;
    color: 090;
    }

    2、ID选择器

      <style>
          #one{
              font-size: 12px;
              background: #900;
              color: 090;
          }
      </style>
    
    <div id="one">Id选择器</div>

    3、类选择器

     .one
          {
              font-size: 26px;
              background: #900;
              color: 090;
          }
    <div class="one">类选择器</div>

    4、通用选择器

    *{
              font-size: 26px;
              background: #900;
              color: 090;
          }

    通用选择器对网页中所有标签进行定义。还有作用就是:保证页面兼容所有浏览器要对页面左右HTML标签进行重置可以是用他。如果我们想让做出的页面在不同浏览器下显示都一样,就可以是用通用选择器。这样也有不好的地方,因为它会在页面加载时对所有HTML(HTML4.01共89个标签)都加上样式设定。HTML4.01共89个标签我们用到的其实比较少,只需要对需要设置的标签进行设置。如:

     body,p,a,li {font-size: 12px}

    补充:一个标签可以有多个类选择器,不同值之间用空格隔开。也可将Id和class用于同一个标签中

    <div class="one two three">类选择器</div>

    <div id="selector" class="one two three">类选择器</div>
     

    5、属性选择器

    h1[class] {
                    color: silver;
                }
    <h1 class="aa">aaa</h1> 
    <!--只要有h1 标签带有class都会起作用->

    也可以让所有带有alt的图像应用某种样式,如:

    img[alt]{bolder:3px solid red;}

    6、根据多个属性进行选择如:

    a[href][title]{background:red;color:red;}
    <a href="#" title="tip">链接</a>

    7、根据具体属性值进行选择如:

    a[href="www.baidu.com"] {font-size:12px;}
    
    这种要求必须与属性值完全匹配

    8、部分属性选择器:

     p[class~=warning] {
                    font-weight: bold;
                }
    <p class="warning urgent">段落  </p>
    
    p.warning=p[class~=warning] 这两者是等价的。注意,如果p[class~=warning] 没有~,则需要完全匹配,完全匹配的时属性的顺序也必须完全一致
    
    

     HTML 中有~=不仅仅可以用于标签的class属性中(如上样例),也可直接应用在标签的属性上如:

    img[alt~="lang"]{ border: 2px solid red;}
    <img src="/images/T_CHINESE.png" alt="lang"/>

    9、子串匹配选择器(IE支持有问题)

     如:

    span[class^="bar"] {
                    color: yellowgreen;
                }
                span[class$="y"] {
                    font-style: italic;
                }
                span[class*="bearing"] {
                    font-size: 120px;
                }
    <span class="barren rocky">文本</span>
    <span class="barren cloudy">文本2</span>
    <span class="cloudy life-bearing">文本3</span>

     10、特定属性选择器

    *[lang|="en"] {
                    color: wheat;
                }
    <h1 lang="en">aaa</h1> 

    一般[att|="val"]可用于任何属性及值,通常应用在匹配语言值

    11、选择子元素

    h1 >strong {
                    color: red;
                }
    <h1>very <strong> good</strong></h1> <!-- 起作用 -->
    <h1>very <em><strong> good</strong></em></h1><!-- 无作用 -->

    12、选择后代元素

     h1 strong {
                    color: red;
                }
    <h1>very <strong> good</strong></h1>  <!-- 起作用 -->
    <h1>very <em><strong> good</strong></em></h1><!-- 起作用 -->
    
    

    13、相邻兄弟选择器,如下h1标签后所有p标签h1与P同一父元素。

    h1+p {
                    color: red;
                }
    <h1>very  good</></h1>
            <p>!</p>

    节选自:KwooJan的《2天驾驭DIV+CSS》

        《CSS权威指南第三版》

  • 相关阅读:
    九、Shell 流程控制
    八、Shell test 命令
    七、Shell printf 命令
    六、Shell echo命令
    五、Shell 基本运算符
    四、Shell 数组
    三、Shell 传递参数
    二、Shell 变量
    一、Shell 教程
    KVM 介绍(1):简介及安装
  • 原文地址:https://www.cnblogs.com/tyb1222/p/4168769.html
Copyright © 2011-2022 走看看