zoukankan      html  css  js  c++  java
  • 6个强大的CSS选择器

    1. div >a
    这个选择器将使我们能够选择所有父元素是div标签的元素。

    <!-- This one will be selected --> 
    <div>
    <a></a>
    </div>
    
    
    <!-- This one won't be selected -->
    <p>
    <a></a>
    </p>

    2. div +a
    选择紧接在div元素之后的每个标签。如果我们在div和a标签之间有一个元素,则不会选择该元素。

    <!-- This one will be selected -->
    <div></div>
    <a></a>
    <!-- This one won't be selected -->
    <div></div>
    <p></p>
    <a></a>
    </main>

    3. div ~a
    a标签将选择每个标签,然后在同一级别上添加div标签。换句话说,如果a标签不是紧跟在div标签之后,而是具有div标签作为同级元素,则将选择该标签。

    <main>
    <!-- This one will be selected -->
    <div></div>
    <a></a>
    <!-- This one will be selected -->
    <div></div>
    <p></p>
    <a></a>
    <section>
    <!-- This one will be selected -->
    <div></div>
    <p></p>
    <a></a>
    </section>
    
    
    <footer>
    <!-- This one won't be selected -->
    <p></p>
    <a></a>
    </footer>
    </main>

    4. [属性^=值]
    例如:[class ^ =“ list-”]此选择器将选择每个包含class属性且其值以list-开头的元素。

    <main>
    <!-- This one will be selected -->
    <div class="list-element"></div>
    <!-- This one will be selected -->
    <div class="list-container"></div>
    <!-- This one will be selected -->
    <div class="list-item"></div>
    <!-- This one won't be selected -->
    <div class="list__footer"></div>
    </main>

    5. [属性$=值]
    例如:[src $ =“.png”]这将选择每个值以.png结尾的src属性。

    <div>
    <!-- This one will be selected -->
    <img src="image1.png">
    <!-- This one will be not selected -->
    <img src="image2.jpg">
    <!-- This one will be selected -->
    <img src="image3.png">
    <!-- This one won't be selected -->
    <img src="image4.svg">
    </div>

    6. [属性*=值]
    例如:[class * =“-list”]此选择器将选择其class属性包含-list的每个元素。 不管-list是在类值的开头,中间还是结尾都没有关系。最重要的是该值必须包含-list。

    <main>
    <!-- This one will be selected -->
    <div class="main-list-container"></div>
    <!-- This one will be selected -->
    <div class="primary-list"></div>
    <!-- This one will be selected -->
    <div class="primary-list-item"></div>
    <!-- This one won't be selected -->
    <div class="list-footer"></div>
    </main>

    结论
    有时候,很难找到所需样式的元素,这是因为我们对CSS选择器不够熟悉,而导致被滥用。在实际应用中,这些选择器可能是非常有用。

  • 相关阅读:
    vue 路由嵌套 (子路由跳转报错或者失效解决方法)
    vue-cli3主题色系统
    vue项目哀悼日
    el-upload 文件上传显示进度
    课表
    uni-app 开发钉钉小程序
    Linux/Centos/Ubuntu crontab备份数据库
    【转】鲁迅为厦大题写校名,为啥4个字错了3个?专家:鲁迅故意写错的。
    计数单位资料汇总(个十百千兆京...,分厘毫丝忽微纤沙尘埃...)
    【转】如意算盘:中国的第五大发明
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/13060103.html
Copyright © 2011-2022 走看看