• 当前标签:属性选择器

程序开发 H5学习之筛选器、空标签选择器、属性选择器

*                                         所有标签 标签名称 所有同名的标签 #id                                    指定此id的标签 .className                      含有此className的元素 A B 后代选择器 A>B 子代选择器 :nth-child(n)                   第n个标签 支持 2n+1 3n+2 等公式  支持负值? :nth-of-type(n)               第n个同类标签 冒号前需加上标签名 :nth-last-child(n) :nth-last-of-type(n) :first-letter                       首字选择器 :last-child                        最后一个子标签 :only-child                       只有一个子标签 :only-of-type                    类型只有一个 ~                                        后面所有的同级标签 +                                        相邻选择器 后面一个 ,                                         同时定义多个样式 选择某个标签前面的技巧 :not(selector)                  选择器匹配非指定元素/选择器的每个元素 :nth-of-type(-n+4) :nth-child(-n+3) 筛选器: html: <body> <header> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> <section>9</section> 页头 <!--<h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>--> </header> <p>ppp</p> <p>cccc</p> <section>section</section> </body> css: body{ background-color: #333; color: white; } /* *页面上的所有元素*/ /*header>*:nth-child(2n+1){ color: yellow; }*/ /*section:nth-child(2n+1){ color: red; } section:last-child{ color: yellow; }*/ header~p{ color: blue; } /*header>section:nth-child(-n+2){ color: salmon; }*/ section:not(:nth-last-of-type(3)){ color: rebeccapurple; } 空标签选择器: html: <body> <span>古人云</span> <span></span> <span>gurenyun</span> <div></div> <div>古人云</div> </body> css: :empty:before{ content: '可以放上任意文字' ',在加一些文字'; } span>:empty:before{ content: '完了'; } span>:empty:after{

2017-04-27 22:57:06 175 0 0
阅读详情
  • 1
前往