css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器

祖先元素后代元素{ }

子元素选择器（直接子元素选择器）

父元素>子元素{ }

兄弟选择器

元素+兄弟元素（紧邻该元素之后的下一个兄弟元素）

所有兄弟元素选择器

元素~兄弟元素（该元素之后的所有兄弟元素）

<!DOCTYPE html>
<html lang="en" manifest="index.manifest"headmeta charset="UTF-8"title>Document</style>
    div+article{color:red;}
body>
    div>这是divarticle>这是articlehtml>


    div~article>

属性选择器

元素[属性]

选择所有带指定属性的元素

元素[属性=值]

选择所有带指定属性，并且指定属性值的元素

元素[属性~=值]

选择所有带指定属性，并且属性所包含的某个单词为指定属性值的元素

元素[属性*=值]

选择所有带指定属性，并且属性所包含的某个单词或者字母为指定属性值的元素

元素[属性^=值]

选择所有带指定属性，并且属性以指定值开头的元素，开头可以是一个完整的单词，也可以是单个字母

元素[属性$=值]

选择所有带指定属性，并且属性以指定值结尾的元素，结尾可以是一个完整的单词，也可以是单个字母

元素[属性|=值]

选择所有带指定属性，并且属性值为指定值，或者属性值以指定值-开头（在js中常常使用到）


    a[class]font-weightbold}
    a[class="one"]
    a[class~="two"]text-decoration underline
    a[class^="one"]font-styleitalic
    a[class$="two"]border-top1px solid red
    a[class*="two"]border-bottom
    a[class|="four"]border-left1px solid purplea class="one">链接a="one two"="three one two"="one~"="threetwo"="four"="four-oo">

动态伪类

:link :visited :hover :active :focus


    a:link
    a:visitedblue
    a:hoverorange
    a:activegreen}

　　 input:hover{background-color: orange;}
    input:focusbackground-color #abcdefhref="#"brinput type="text">

UI元素状态伪类

:enabled :disabled :checked


    input:enabled red
    input:disabled orange
    input:checkedwidth100pxheight><="text" enabled disabled="checkbox" name="number" value="1">1 &nbsp;
    ="2">2 ="3">3 &nbsp;
>

结构选择器

ele:first-child

满足某一个父元素的第一个子元素是指定元素

如section的第一个子元素，并且是div元素


    section>div:first-childsection>
        >1>2>3p>a>b>c>

:last-child :nth-child(n)同理

:nth-child(数字) 某个位置

:nth-child(n) 所有

:nth-child(odd) 奇数

:nth-child(even) 偶数

:nth-child(计算式) 指定计算式（n的取值从0开始）


    li:nth-child(1)list-style none
    li:nth-child(n)
    li:nth-child(odd)pink
    li:nth-child(even)#abcdef
    li:nth-child(3n+1)ulli>4>5>6>7>8>9>

nth-last-child() 同理

nth-of-type() 计数时会跳过非指定元素


    li:nth-child(4)} /*li的父元素的第4个子元素，且为li*/
    li:nth-of-type(4) li的父元素的li子元素中的第4个*/
>

nth-last-of-type() 同理

first-of-type() last-of-type()

:only-child 作为唯一子元素

:only-of-type 指定类型的唯一子元素，可以有其他类型


    p:only-child
    p:only-of-type>

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

相关文章