首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy_html-js-css

概述首尾元素伪类选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

首尾元素伪类选择

<!DOCTYPE HTML><HTML lang="en"head>    Meta charset="UTF-8"name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"="keywords"="关键词1，关键词2，关键词3"="description"="网站描述bla bla"Title>网站标题</style>        article :first-child{            background:Pink;        }        article>:first-child            colorred        article h1:first-child            Font-styleitalic        article h2:last-childorange        article h2:last-of-type            background-colorrgb(182,145,182)}    bodya href="#cyy">cyya>    ul>        li>111></main="http://www.baIDu.com" target="_blank">baIDuinput type="text" value="111"article>            h1 Title ID>h1-Title-IDh1='cyy'>h1-Title='cyyhahaha'='cyyhahahacyy'='cyyhahaha cyy'='cyy hahahacyy'='cyy-hahaha h2>h2asIDe>                asIDe                >asIDe-h2divdiv ID="cyy"HTML>

last-child和last-of-type的区别：

:last-child表示其父元素的最后一个子元素，且这个元素是CSS指定的元素，才可以生效。

:last-of-type表示其父元素下的最后一个指定类型的元素。

伪类选择唯一子元素：

        article :only-child        article>div:only-of-type>

根据元素编号灵活选择：

        article :nth-child(1)        li:nth-child(2n)        li:nth-child(odd)green        article h1:nth-child(2)purple        article h1:nth-of-type(2)>

元素尾部伪类选择：

>        /* 最后两个li */        ul li:nth-last-child(-n+2)            Font-weightbold        article h1:nth-last-of-type(2)>h1-Title-ok>

not排除选择器：

 前4个里排除第2个         ul li:nth-child(-n+4):not(:nth-child(2))>

通过表单伪类创建个性化表单：

        input:Disabledpink        input:enabledlightgreen        input:checked+label}         必填项         input:required            border1px solID yellow 选填项         input:optional1px solID blue        input:valID            border-radius5px        input:invalID50%form action="" Disabled="text"hr="radio" ID="boy"label for>boylabel="girl" checked="girl">girl required="email" name=""button>提交form>

文本伪类：

        p::first-letter        p::first-lineyellowgreen        p+span::after            content'hh~';            positionrelative            top30px            left        p+span::before'↓'        .form1px solID #ddd            wIDth200px            margin100px        input[type='text']none            outline        input[type='text']+span::after'✔'            cursorpointer="wIDth:300px;"p            这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~        spanclass="form">

总结

以上是内存溢出为你收集整理的首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy全部内容，希望文章能够帮你解决首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1026929.html

首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy

发表评论

评论列表（0条）