css3选择器

  • 2018-01-17更新nth-of-type(n),以及和nth-child(n)的区别
属性选择器
a[title]{color:#ddd;}
//为存在title属性的a设置颜色

input[type="text"]{width:100px}
//为type为text文本框的input设置宽度
部分属性选择器(css2新增)
<p class = "name  text">
p[class~="name"]{color:red}
//部分属性名匹配
子串匹配属性(css3新增)
[abc^="def"]    //选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]    //选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]    //选择 abc 属性值中包含子串 "def" 的所有元素
  • 其中[abc*="def"]和[abc~="def"]的区别
<p class="class1  class2"></p>
p[class~="class1"]  //选择成功
p[class~="class1 clas"]  //选择失败
p[class*="class1 clas"]  //选择成功

总而言之还是*最强大

子元素和兄弟选择器
<div class="container">
    <p>~~~~~~~</p>
    <li>~~~~~~~~</li>
    <li>~~~~~~~~</li>
    <p>~~~~~~~~</p>
    <p>~~~~~~~~</p>
    <li>~~~~~~~~</li>
   <li>~~~~~~~~</li>
</div>
子元素选择器:> 、 nth-child(n)、nth-of-type(n)

>比较常见,用于选择当前标签的所有子元素
nth-child(n):位置优先,用于选择当前标签下的第n个子元素,若选中位置没有该标签,则选择失败

li:nth-child(2){}  
//代表在li的父元素下寻找指定位置 ,且为li的子元素
li:nth-child(2):选中第二位,且为Li的元素
//中间加一个空格,代表没有指定标签
.container  :nth-child(2){}  
//可以理解为选择container下的第二个子元素
.container :nth-child(2):选择container下的第二个子元素

nth-of-type(n):标签优先,用于选择父元素下的第n个指定标签子元素,

li:nth-of-type(2){}  //代表在li的父元素下寻找第二个li
li:nth-of-type(2):选择第2个li标签
//中间加一个空格,代表没有指定元素
.container  :nth-of-type(2){}  
//选择container父元素下每种标签的第二个子元素,即寻找所有标签的第二个
.container :nth-of-type(2):选中每种标签的第二个
兄弟选择器:+和~

+用于选择当前标签后面一个同级元素

li:nth-child(2) + li{}   //选择第二个元素之后的一个同级元素
找到第2个元素,且为li标签,选中紧邻其后的,且为li的标签

~用于选择当前标签后面的所有同级元素

li:nth-child(2) ~ li{}   //选择第二个元素之后所有的同级元素
找到第2个元素,且为li标签,选中其之后的同层级所有li标签

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 235评论 0 0
  • class 和 id 的使用场景? 每个标签只能设置一个id,此id在页面中只能出现一次。id多用于页面分块时块级...
    cross_王阅读 52评论 0 0
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 772评论 0 1
  • CSS选择器常见的有几种? 基础选择器 “*” -> 通用元素选择器,匹配页面任何元素。很少使用 “#” -> i...
    饥人谷_吴亚敏阅读 39评论 0 0
  • class 和 id 的使用场景 class:一个标签可以有多个class且同一个class可以用到不同的标签上,...
    尾巴尾巴尾巴阅读 38评论 0 0