zoukankan      html  css  js  c++  java
  • CSS选择符

    1、element element 

    例子,div p

    选择<div>元素内部的所有<p>元素

    2、element > element

    例子,div > p

    选择父元素为<div>元素的所有<p>元素

    3、element + element

    例子,div + p

    选择紧接在<div>元素的所有<p>元素

    4、[attribute]

    例子,[target]

    选择带有target 属性的所有元素

    5、[attribute=value]

    例子,[target=_blank]

    选择target="_blank"的所有元素

    6、[attribute~=value]

    例子,[title~=flower]

    选择title属性包含单词“flower”的所有元素

    7、[attribute|=value]

    例子,[lang|=en]

    选择lang属性值以“en”开头的所有元素

    8、:link

    例子,a:link

    选择所有未被访问的链接

    9、:visited

    例子,a:visited

    选择所有已被访问的链接

    10、:active

    例子,a:active

    选择活动链接

    11、:first-letter

    例子,p:first-letter

    选择每个<p>元素的首字母

    12、:first-line

    例子,p:first-line

    选择每个<p>元素的首行

    13、:first-child

    例子,p:first-child

    选择属于父元素的第一个子元素的每个<p>元素

    14、element1~element2

    例子,p~ul

    选择前面有<p>元素的每个<ul>元素

    15、[attribute^=value]

    例子,a[src^="https"]

    选择其sec属性值以“https”开头的每个<a>元素

    16、[attribute$=value]

    例子,a[src$=".pdf"]

    选择其src属性值以“.pdf”结尾的所有<a>元素

    17、[attribute*=value]

    例子,a[src*="abc"]

    选择其src属性中包含“abc”子串的每个<a>元素

    18、:first-of-type

    例子,p:first-of-type

    选择属于其父元素的首个<p>元素

    19、:last-of-type

    例子,p:last-of-type

    选择属于其父元素的最后<p>元素

    20、only-of-type

    例子,p:only-of-type

    选择属于其父元素唯一的<p>元素

    21、:only-child

    例子,p:only-child

    选择属于其父元素的唯一子元素的<p>元素

    22、:nth-child(n)

    例子,p:nth-child(2)

    选择属于其父元素的第二个子元素的<p>元素

    23、:nth-last-child(n)

    例子,p:nth-last-child(2)

    同上,从最后一个子元素开始计数

    24、:nth-of-type(n)

    例子,p:nth-of-type(2)

    选择属于其父元素第二个<p>元素

    25、:nth-last-of-type(n)

    例子,p:nth-last-of-type(2)

    同上,但是从最后一个子元素开始计数

    26、:last-child

    例子,p:last-child

    选择属于其父元素最后一个子元素<p>元素

    27、:root

    选择文档的根元素

    28、:empty

    例子,p:empty

    选择没有子元素的每个<p>元素(包括文本节点)

    29、:target

    例子,#new:target

    选择当前活动的#news元素

    30、:enabled

    例子,input:enabled

    选择每个启用的<input>元素

    31、:disable

    例子,input:disable

    选择每个禁用的<input>元素

    32、:dhecked

    例子,input:checked

    选择每个被选中的<input>元素

    33、:not(selector)

    例子,:not(p)

    选择所有非<p>元素

    34、::selection

    选择被用户选取的元素部分

    实例:

    1、选择div下偶数span的子元素

    div:nth-child(2n)

    选择div下奇数span的子元素

    div:nth-child(2n+1)

  • 相关阅读:
    [ERR] Node 10.211.55.8:7001 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    PAT A1137 Final Grading (25 分)——排序
    PAT A1136 A Delayed Palindrome (20 分)——回文,大整数
    PAT A1134 Vertex Cover (25 分)——图遍历
    PAT A1133 Splitting A Linked List (25 分)——链表
    PAT A1132 Cut Integer (20 分)——数学题
    PAT A1130 Infix Expression (25 分)——中序遍历
    PAT A1142 Maximal Clique (25 分)——图
    PAT A1141 PAT Ranking of Institutions (25 分)——排序,结构体初始化
    PAT A1140 Look-and-say Sequence (20 分)——数学题
  • 原文地址:https://www.cnblogs.com/haishen/p/9626583.html
Copyright © 2011-2022 走看看