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

    前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的。

    1、相邻选择器

    E+F { sRules }

    相邻选择符只会命中符合条件的相邻的兄弟元素。

    2、兄弟选择器

    E~F { sRules }

    兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

    <style>
    
    /* 相邻选择符(E+F) */
    
    h3 + p { color: #f00; }
    
    /* 兄弟选择符(E~F) */
    
    h3 ~ p { color: #f00; }
    
    </style>
    
    <h3>这是一个标题</h3>
    
    <p>p1</p>
    
    <p>p2</p>
    
    <p>p3</p>

    这个例子中,如果是相邻选择符,那么只有 p1 会变成红色;如果是兄弟选择符,那么 p1/p2/p3 都会变成红色;

    3、属性选择器

     属性选择器一共有7种选择形式。

    E[att] { sRules }

    选择具有att属性的E元素。

    <style>
    
    img[alt] {
    
    margin: 10px;
    
    }
    
    </style>
    
    <img src="图片url" alt="" />
    
    <img src="图片url" />

    此例,将会命中第一张图片,因为匹配到了alt属性

    E[att="val"] { sRules }

    选择具有att属性且属性值等于valE元素。

    <style>
    
    input[type="text"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
    <input type="text" />
    
    <input type="submit" />

    此例,将会命中第一张input,因为匹配到了type属性,并且属性值为text

    E[att~="val"] { sRules }

    选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于valE元素(包含只有一个值且该值等于val的情况)。

    <style>
    
    div[class~="a"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
    <div class="a">1</div>
    
    <div class="b">2</div>
    
    <div class="a b">3</div>

    此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值中有一个值为a

    E[att^="val"] { sRules }

    选择具有att属性且属性值为以val开头的字符串的E元素。

    <style>
    
    div[class^="a"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
    <div class="abc">1</div>
    
    <div class="acb">2</div>
    
    <div class="bac">3</div>

    此例,将会命中1, 2两个div,因为匹配到了class属性,且属性值以a开头

    E[att$="val"] { sRules }

    选择具有att属性且属性值为以val结尾的字符串的E元素。

    <style>
    
    div[class$="c"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
    <div class="abc">1</div>
    
    <div class="acb">2</div>
    
    <div class="bac">3</div>

    此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值以c结尾

    E[att*="val"] { sRules }

    选择具有att属性且属性值为包含val的字符串的E元素。

    <style>
    
    div[class*="b"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
     
    
    <div class="abc">1</div>
    
    <div class="acb">2</div>
    
    <div class="bac">3</div>

    此例,将会命中所有div,因为匹配到了class属性,且属性值中都包含了b

    E[att|="val"] { sRules }

    选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。

    这样理解会更简单:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。

    <style>
    
    div[class|="a"] {
    
    border: 2px solid #000;
    
    }
    
    </style>
    
     
    
    <div class="a">0</div>
    
    <div class="a-test">1</div>
    
    <div class="b-test">2</div>
    
    <div class="c-test">3</div>

    在这个例子中,前2div将会被命中:

    1div,拥有class属性,并且值为a,所以被命中;

    2div,拥有class属性,值是a开头并紧跟着连接符“-”,所以被命中;

     

    4、伪类选择器

     伪类选择器的种类比较多,一共有二十多种。

    E:link { sRules }

    设置超链接a在未被访问前的样式。

    如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现

    超链接的4种状态,需要有特定的书写顺序才能生效。

    超链接状态顺序:

    a:link {}

    a:visited {}

    a:hover {}

    a:active {}

    注意,a:hover 必须位于 a:link a:visited 之后,a:active 必须位于 a:hover 之后
    可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

    E:visited { sRules }

    设置超链接a在其链接地址已被访问过时的样式。

    E:hover { sRules }

    设置元素在其鼠标悬停时的样式。

    E:active { sRules }

    设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

    E:focus { sRules }

    设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

    webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

    E:lang(fr) { sRules }

    匹配使用特殊语言的E元素。

    <style>

    p:lang(zh-cmn-Hans) {

    color: #f00;

    }

    p:lang(en) {

    color: #090;

    }

    </style>

    </head>

    <body>

    <p lang="zh-cmn-Hans">大段测试文字</p>

    <p lang="en">english</p>

    E:not(s) { sRules }

    匹配不含有s选择符的元素E

    有了这个选择符,那么你将可以很好的处理类似这样的场景:假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

    .demo li:not(:last-child) {

    border-bottom: 1px solid #ddd;

    }

    上述代码的意思是:给该列表中除最后一项外的所有列表项加一条底边线

    E:first-child { sRules }

    匹配父元素的第一个子元素E

    要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

    <ul>

    <li>列表项一</li>

    <li>列表项二</li>

    <li>列表项三</li>

    <li>列表项四</li>

    </ul>

    在上述代码中,如果我们要设置第一个li的样式,那么代码应该写成li:first-child{sRules},而不是ul:first-child{sRules}

    示例代码:

    p:first-child{color:#f00;}

     

    <div>

    <h2>我是一个标题</h2>

    <p>我是一个p</p>

    </div>

    只是在p前面加了一个h2标签,你会发现选择器失效了,没有命中pwhy?

    E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。

    E:last-child { sRules }

    匹配父元素的最后一个子元素E

     

    E:nth-child(n) { sRules }

    匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

    要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

    该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

    使用E:nth-child(n)实现奇偶:

    示例代码:

    <style>

    li:nth-child(2n){color:#f00;} /* 偶数 */

    li:nth-child(2n+1){color:#000;} /* 奇数 */

    </style>

     

    <ul>

    <li>列表项一</li>

    <li>列表项二</li>

    <li>列表项三</li>

    <li>列表项四</li>

    </ul>

    因为(n)代表一个乘法因子,可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数,而(2n+1)换算出来会是奇数

    有一点需要注意的是:

    HTML示例代码:

    <div>

    <p>第1个p</p>

    <p>第2个p</p>

    <span>第1个span</span>

    <p>第3个p</p>

    <span>第2个span</span>

    <p>第4个p</p>

    <p>第5个p</p>

    </div>

    CSS Case 1

    p:nth-child(2){color:#f00;}

    很明显第2p会被命中然后变成红色

    CSS Case 2

    p:nth-child(3){color:#f00;}

    这是会命中第3p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。

    CSS Case 3

    p:nth-child(4){color:#f00;}

    这时你以为会命中第4p,但其实命中的却是第3p,因为它是第4个子元素

    E:nth-child(n)会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增。

    E:nth-last-child(n) { sRules }

    匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。

    E:first-of-type { sRules }

    匹配同类型中的第一个同级兄弟元素E

    要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

    该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

    E:last-of-type { sRules }

    匹配同类型中的最后一个同级兄弟元素E

     

    E:nth-of-type(n) { sRules }

    匹配同类型中的第n个同级兄弟元素E

    有一点需要注意的是:

    HTML示例代码:

    <div>

    <p>第1个p</p>

    <p>第2个p</p>

    <span>第1个span</span>

    <p>第3个p</p>

    <span>第2个span</span>

    </div>

    如上HTML,假设要命中第一个span

    span:nth-of-type(1){color:#f00;}

    如果使用E:nth-child(n)

    span:nth-child(3){color:#f00;}

    E:nth-last-of-type(n) { sRules }

    匹配同类型中的倒数第n个同级兄弟元素E

    E:checked { sRules }

    匹配用户界面上处于选中状态的元素E(用于input typeradiocheckbox)

    <style>
    
    input:checked + span {
    
    background: #f00;
    
    }
    
    input:checked + span:after {
    
    content: " 我被选中了";
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <form method="post" action="#">
    
    <fieldset>
    
    <legend>选中下面的项试试</legend>
    
    <ul>
    
    <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
    
    <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
    
    <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
    
    </ul>
    
    </fieldset>
    
    <fieldset>
    
    <legend>选中下面的项试试</legend>
    
    <ul>
    
    <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
    
    <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
    
    <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
    
    </ul>
    
    </fieldset>
    
    </form>
    
    </body>

    E:target { sRules }

    匹配相关URL指向的E元素。

    解释:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element):target选择器用于选取当前活动的目标元素。

    示例代码:

    #demo:target{color:#f00;}

     

    <div id="demo">

    <p>E:target伪类使用方法</p>

    </div>

    假设上述代码在页面 a.html 中,那么当访问 a.html#demo 时,这个div元素将会被:target命中

    5、伪元素选择器

    E:first-letter/E::first-letter { sRules }

    设置对象内的第一个字符的样式。

    此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

    该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

    CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

    E:first-letter可转化为E::first-letter

     

    E:first-line/E::first-line { sRules }

    设置对象内的第一行的样式。

    此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

    E:before/E::before { sRules }

    设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

    E:after/E::after { sRules }

    设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

    E::placeholder { sRules }

    设置对象文字占位符的样式。

    • ::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
    • 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
    • 需要注意的是,除了Firefox::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder
    <input type="text" placeholder="占位符" />
    
     
    
    input::-webkit-input-placeholder {
    
    color: #999;
    
    }
    
    input:-ms-input-placeholder { // IE10+
    
    color: #999;
    
    }
    
    input:-moz-placeholder { // Firefox4-18
    
    color: #999;
    
    }
    
    input::-moz-placeholder { // Firefox19+
    
    color: #999;
    
    }

    E::selection { sRules }

    设置对象被选择时的样式。

    需要注意的是,::selection只能定义被选择时的background-colorcolortext-shadow(IE11尚不支持定义该属性)

     

  • 相关阅读:
    21.Merge Two Sorted Lists 、23. Merge k Sorted Lists
    34. Find First and Last Position of Element in Sorted Array
    leetcode 20. Valid Parentheses 、32. Longest Valid Parentheses 、301. Remove Invalid Parentheses
    31. Next Permutation
    17. Letter Combinations of a Phone Number
    android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事项
    oc 异常处理
    oc 类型判断
    oc Delegate
    oc 协议
  • 原文地址:https://www.cnblogs.com/thinkguo/p/8079045.html
Copyright © 2011-2022 走看看