标签：10 26 元素 class 2021 div li 选择器 属性
CSS3复习之选择器
CSS3选择器
CSS3增加了属性选择器、结构伪类选择器和伪元素选择器
属性选择器
属性选择器可以看作css中的“正则表达式”，按照规则选出元素。
例如html中有很多div盒子，其中有两个类分别为box1和box2的盒子，为了把这两个盒子选出来可以用属性选择器
- div[class^=“box”] 选择具有class属性并以"box"开头的的div元素
- div[class=“box”]选择class属性并等于"box"的div元素
- div[class$=“box”]选择class属性以"box"结尾的div元素
- div[class*=“val”]选择class属性中含有"box"值的div元素
- div[class]选择有class属性的div元素(如果所有div都分配了一个类名，那么都选中)
结构伪类选择器
结构伪类常用来找某个元素符合条件的子元素。
注意的是n-child和nth-of-type的区别，如果ul中只有li子元素，那么二者无差别，但如果像下面一样，含有别的元素。那么注意
nth-child是按照子级来算的，子级可能不是一种类型，有p有li等
nth-of-type是先指定子级
因此如果想把偶数个li的背景颜色改变，要使用nth-of-type(2n)
<style>
li:nth-child(3) {
background-color: red;
/*不起作用，因为li所在父级的第三个子元素不是li而是p*/
}
p:nth-child(3) {
background-color: red;
/*起作用！！先匹配p所在父元素的第三个子元素，*/
}
li:nth-of-type(6) {
background-color: green;
/*先匹配li，找到li中的第6个，并把它的颜色改成绿色*/
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<p>哈哈哈哈</p>
<li>3</li>
<li>4</li>
<li>5</li>
<p>呵呵呵呵</p>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
伪元素选择器
伪元素选择符只有::after, ::before，分别表示在元素内部的后面、前面插入内容。之所以叫伪元素，是因为在dom里找不到该元素，而且这个元素属于行内元素。而且伪元素必须有content属性，伪元素常常用来插入字体图标，配合iconmoon或者阿里图库使用。
CSS选择器优先级
如果加上以上三个新选择器，css中选择器优先级顺序如下：
!important > 行内样式 > id选择器 > 类选择器 = 属性选择器 = 结构伪类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器自定义
标签：10,26,元素,class,2021,div,li,选择器,属性 来源： https://blog.csdn.net/jiang981124/article/details/120966715
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。