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

    属性选择器

    语法:

    1 元素[attr^="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val开头的任意字符串 */
    2 元素[attr$="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val结尾的任意字符串 */
    3 元素[attr*="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值任意位置包含了val */

    html代码:

    1 <a href="" class="Ais">这是一个带class的a</a>
    2 <a href="123.jpg">这是一个指向图片的a</a>
    3 <a href="" title="这个a可不一般">这是一个有title的a</a>

    css代码:

    1 a[class^="A"]{
    2     background:red;
    3 }
    4 a[href$=".jpg"]{
    5     background:green;
    6 }
    7 a[title*="a"]{
    8     background:blue;
    9 }

    效果:

    结构性伪类选择器—root

    “:root”选择器等同于<html>元素。

    1 /* 两者相等 */
    2 :root{background:orange}
    3 html {background:orange;}

    结构性伪类选择器—not

    :not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,css代码可以写成:

     1 form {
     2   width: 200px;
     3   margin: 20px auto;
     4 }
     5 div {
     6   margin-bottom: 20px;
     7 }
     8 input:not([type="submit"]){
     9   border:1px solid red;
    10 }

    html代码:

     1 <form action="#">
     2   <div>
     3     <label for="name">Text Input:</label>
     4     <input type="text" name="name" id="name" placeholder="John Smith" />
     5   </div>
     6   <div>
     7     <label for="name">Password Input:</label>
     8     <input type="text" name="name" id="name" placeholder="John Smith" />
     9   </div>
    10   <div>
    11     <input type="submit" value="Submit" />
    12   </div>
    13 </form> 

    效果:

  • 相关阅读:
    数据结构总结(UPDATING......)
    课件例题4.11,4.12
    Luogu P1525 关押罪犯
    Luogu P1540 机器翻译
    Luogu P1313 计算系数
    Luogu P1311 选择客栈
    Luogu P1519 穿越栅栏 Overfencing
    Luogu P2863 [USACO06JAN]牛的舞会The Cow Prom
    Tarjan学习笔记
    Luogu P3393 逃离僵尸岛
  • 原文地址:https://www.cnblogs.com/imguo/p/5778268.html
Copyright © 2011-2022 走看看