css选择器

css选择器

1. 基本选择器

   * ??????????通配符选择器div ????????元素选择器.box ???????类选择器.box.red ???复合选择器#id ????????id选择器:pseudo ????伪类选择器::pseudo ???伪元素选择器:lang(en) ??语言选择器 ???div:lang(en){ ???????color: red; ???}div > p ????子类选择器 ??div p ??????子集选择器div ~ p ????兄弟选择器（所有后面的元素）div + p ????兄弟选择器（后面的临近的元素）

2. 属性选择器

   <div myvalue="val1 value2"></div>[myvalue]{ ???width: 100px; ???height: 100px; ???background: red;}[myvalue] ??????????????????????包含这个属性名div[myvalue] ???????????????????div包含这个属性名[myvalue=‘val1 value2‘] ????????指定属性值[myvalue=‘val1 value2‘i] ???????指定属性值，忽略大小写[myvalue~=‘value2‘] ????????????以逗号分隔的属性值列表中包含指定值[myvalue^=‘val‘] ???????????????属性值以指定值开头[myvalue$=‘ue2‘] ???????????????属性值以指定值结尾[myvalue*=‘al‘] ????????????????属性值包含指定值[myvalue|=‘va‘] ????????????????属性值必须以va开头并且后面跟着-

3. 伪类选择器

   <div> ???<P>1</P> ???<P>2</P> ???<P>3</P> ???<P>4</P></div><div>文本</div>div:first-child{ ???background: red;}div:first-child ????????????????第一个divdiv:last-child ?????????????????最后一个divdiv:last-of-type ???????????????最后一个divdiv:nth-child(2) ???????????????第二个divp:nth-last-child(2) ????????????倒数第二个pp:nth-child(n+2) ???????????????第二个p开始的所有pp:nth-child(-n+2) ??????????????倒数第三个p开始的所有pp:nth-child(2n) ????????????????偶数pp:nth-child(odd) ???????????????偶数pp:nth-child(even) ??????????????奇数p

css选择器

原文地址：https://www.cnblogs.com/ye-hcj/p/10356545.html