首尾元素伪类选择
<!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">
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
