zoukankan      html  css  js  c++  java
  • 【WEB前端】CSS常用选择器

    1.1 标签选择器

    就是用标签名来当做选择器。

    1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等

    2) 不管这个标签藏的多深,都能够被选择上。

    3) 选择的是所有的,而不是某一个。所以是共性,而不是特性。

    比如网易,希望页面上所有的超级链接都没有下划线:

    1                         a{
    
    2                                /*去掉下划线:*/
    
    3                                text-decoration: none;
    
    4                         }

    1.2 id选择器

    #表示选择id

    1                         #lj1{
    
    2                                font-size: 60px;
    
    3                                font-weight: bold;
    
    4                                color:black;
    
    5                         }

    2)同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。1)任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线。大小写严格区别,也就是说mm和MM是两个不同的id。

    也就是说,如果有一个p的id叫做haha,这个页面内,其他所有的元素的id都不能叫做haha。

    1.3 类选择器

    .就是类的符号。类的英语叫做class。

    所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性

    class属性可以重复,比如,页面上可能有很多标签都有teshu这个类

    1                  <h3>我是一个h3啊</h3>
    
    2                  <h3 class="teshu">我是一个h3啊</h3>
    
    3                  <h3>我是一个h3啊</h3>
    
    4                  <p>我是一个段落啊</p>
    
    5                  <p class="teshu">我是一个段落啊</p>
    
    6                  <p class="teshu">我是一个段落啊</p>

    css里面用.来表示类:

    1                         .teshu{
    
    2                                color: red;
    
    3                         }

    同一个标签,可能同时属于多个类,用空格隔开

    1           <h3 class="teshu zhongyao">我是一个h3啊</h3>

    这样,这个h3就同时属于teshu类,也同时属于zhongyao

    初学者常见的错误,就是写成了两个class:

    1           <h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

    所以要总结两条:

    1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;

    2) 同一个标签可以同时携带多个类。

    类的使用,能够决定一个人的css水平。

    1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。

    2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

    到底用id还是用class?

    答案:尽可能的用class,除非极特殊的情况可以用id。

    原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

    2.1 后代选择器

    1                  <style type="text/css">
    
    2                         .div1 p{
    
    3                                color:red;
    
    4                         }
    
    5                  </style>

    空格就表示后代,.div1 p 就是.div1的后代所有的p。

    强调一下,选择的是后代,不一定是儿子。

    比如:

    1                  <div class="div1">
    
    2                         <ul>
    
    3                                <li>
    
    4                                       <p>段落</p>
    
    5                                       <p>段落</p>
    
    6                                       <p>段落</p>
    
    7                                </li>
    
    8                         </ul>
    
    9                  </div>

    能够被下面的选择器选择上:

    1                         .div1 p{
    
    2                                color:red;
    
    3                         }

    所以,看见这个选择器要知道是后代,而不是儿子。选择的是所有.div1“中的”p,就是后代p。

    空格可以多次出现。

    1                        .div1 .li2 p{
    
    2                               color:red;
    
    3                        }

    就是.div1里面的后代.li2里面的p。

    后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

    后代选择器,描述的是祖先结构。

    2.2 交集选择器

    1           h3.special{
    
    2                  color:red;
    
    3           }

    选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。

    交集选择器没有空格。

    所以有没有空格

    1           div.red

    1           div .red

    不是一个意思。

    交集选择器可以连续交(一般不要这么写)

    1           h3.special.zhongyao{
    
    2                  color:red;
    
    3           }

    交集选择器,我们一般都是以标签名开头,比如div.haha  比如p.special。

    2.3 并集选择器(分组选择器)

    1           h3,li{
    
    2                  color:red;
    
    3           }

    用逗号就表示并集。

    2.4 通配符*

    *就表示所有元素。

    1           *{
    
    2                  color:red;
    
    3           }

    效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

  • 相关阅读:
    阅读计划
    第一课 课堂练习总结
    人月神话读后感
    软件工程概论11-软件演化
    【HDU4366】【DFS序+分块】Successor
    【转载】【元胞自动机】生命游戏(时间简史)
    【BZOJ2741】【块状链表+可持久化trie】FOTILE模拟赛L
    【BZOJ3295】【块状链表+树状数组】动态逆序对
    【HDU4391】【块状链表】Paint The Wall
    【POJ2887】【块状链表】Big String
  • 原文地址:https://www.cnblogs.com/perfe/p/6207643.html
Copyright © 2011-2022 走看看