常用的css3选择器
时间：2023-04-05 23:53:57
HTML5
p{width:40px;边距：8px自动；行高:40px;边框：1px纯灰色；文本对齐：居中；font-weight:700;}X+YAdjacentselectorX+Y:相邻兄弟选择器选择匹配Y的元素，这个元素就是匹配的X元素后面的相邻位置。.test1+p{背景颜色：绿色；color:#fff}X>YchildselectorX>Y:childcontainmentselector选择匹配Y的元素，该元素是匹配的X元素的子元素。.wrapper>p{背景颜色：#f5524b;颜色：#fff；border:none}X~YAdjacentselectorX~Y:选择后面的所有兄弟节点.test2~p{background-color:#0eabdf;颜色：#fff；border:none}X[title]属性选择器
1111111111222222222333333333344444444455555555556666666666 a{显示：块；宽度：300px;文本对齐：居中；边距：10px自动；颜色：#000；文字修饰：无；}a[标题]{背景：绿色；颜色：#fff；}X[title=””]另一个属性选择器a[title="title"]{background:#ff9900;颜色：#fff；}属性选择器，上面的代码不仅匹配了title属性，在匹配title属性等于“title”的链接元素[]中不仅可以使用title属性，还可以使用其他属性。X[title*=""]模糊匹配属性选择器a[title*="title"]{background:#3a8aee;颜色：#fff；选择器匹配属性值以标题指定的值开头的每个元素。
item1item2item3item4item5item6item7item8ul{list-style:none;}.listli{line-height:24px}:first-child.listli:first-child{background-color:yellow;}:last-child:last-child选择器用于匹配父元素中的最后一个子元素。:nth-child()nth-child(n)选择器匹配父元素的第n个子元素。n可以是数字、关键字或公式。.listli:nth-child(2){background-color:#09ac24;}Odd和evenOdd和even是关键字，可以用来匹配下标为奇数或偶数的子元素。listli:nth-child(odd){background:#e73a3a;}.listli:nth-child(even){background:#f5a72c;}:nth-last-child(n):nth-last-of-type(n)选择器匹配相同类型的最后第n个兄弟元素。n可以是数字，关键字，公式。listli:nth-last-child(6){background-color:#15d6af;}选择前几个元素。listli:nth-child(-n+6){背景：#F05442；颜色：#fff；}从number.list中选择li:nth-child(n+4){background:#F05442;color:#fff;}限制选择在一定范围内：nth-child(-n+6):nth-child(n+3){background:#F05442;color:#fff;}:nth-of-type(n):nth-of-type(n)选择器匹配相同类型的第n个兄弟元素。.listli:nth-of-type(3){background:#635f5c;}:only-child:only-child选择器匹配父元素的唯一子元素。span:only-child{background:#f26f0f;}:not:not(selector)选择器匹配每个元素是否为指定的元素/选择器。.listli:not(:last-child){background:#0fcff2;}参考文章需要学习的十二个CSS选择器参考文章CSS选择第一个标签元素：nth-??child(n),first-最后一个孩子
