美文网首页
选择器(2)

选择器(2)

作者: 戴西西的染坊 | 来源:发表于2017-12-26 11:52 被阅读0次

    选择器 --> 选择元素进行样式实现.

    属性选择器

    可快速选取指定元素进行样式应用.

    1. 只选取属性名

    E[attr]
    
    a[href] { background: red; } 表示选择了使用了href属性的a标签进行此样式实现.
    
    

    2. 选取属性名并且有确定值value.

    E[attr="value"] 
    
    a [href="#1"] { background:blue; }
    
    指定选取元素有特定属性值value应用样式的情况.
    

    属性值必须确定和value一致才行不可多不可少.


    3. 选取属性名并且值有value即可.

    E[attr~="value"]
    
    <a href="#1" title="in the way" target="_blank">1</a>
    
    a[title~="the"] { color:red; } 表示选取的元素值中是the或者词表中含有the 即可.
    

    注意和第二个区分开,这个就是在属性值(可以是单个词或者词句)中搜寻到一个词匹配value即可选定.


    4. 指定属性名,选中属性值为value开头的元素.

    E[attr^"value"]
    
    <a href="#1" title="begin hahaha" target="_blank">1</a>
    <a href="#2" title="end hahaha" target="_blank">2</a>
    
    a [title^="end"] {background : blue; } 表示选取title 值开头为 end 的a元素进行样式应用.
    

    注意不要丢了^ 符号.


    5. 指定属性名,属性值以value结尾的元素.

    E[attr$="value"]
    
    <a href="#1" title="This is a great beginning" target="_blank">1</a>
    <a href="#2" title="This is a great end" target="_blank">2</a>
    
    a[title$="beginning"]{ background:orange; }
    选取值为beginning的元素进行样式应用.
    

    6. 指定属性名,在属性名中指定值含有指定value即选定.

    E[atte*="value"]
    
    <a href="#1" title="Youth means limitless possilities." target="_blank">1</a>
    
    a [title$="limit"] { background=gray;}  选中value含有limit 字符的元素进行样式应用.
    

    注意和 ``` E[attr~="value"] 第三个进行区分,第三个选取的是值中某个词是value,而这个是词中只要含有value 即可.

    7. 指定属性名,属性值是value或者value-开头的值.

    E[attr|="value"]
    
    <a href="#1" title="tangsen-one hahaha" target="_blank">1</a>
    <a href="#2" title="tangsen hahaha" target="_blank">2</a>
    
    a [title|="tangsen"] { color:yellow; }选中以上两种情况.
    

    注意 | 是enter键上面那个英文状态下按shift出现的.

    相关文章

      网友评论

          本文标题:选择器(2)

          本文链接:https://www.haomeiwen.com/subject/zqvhgxtx.html