CSS中常用的选择器

2020-03-05 21:06:51 阅读：286 来源： 互联网

属性选择器

E[att] {} : 选择具有att属性的E元素。 
E[att="val"] {} : 选择具有att属性且属性值等于val的E元素。 
E[att~="val"] {}:用于选取属性值中包含指定单词的元素，不是词汇但是有此字符串的也不行。
E[att|="val"] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

E[att*="val"] {}:选择具有att属性且属性值为包含val的字符串的E元素。
E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

伪类选择器

p:root{}            将样式绑定到页面的根元素中
p:not(.p1){}          排除p标签中类名为p1的选择器样式
p:empty{}           使用该选择器来制定当元素内容为空白时使用的样式
p:first-child {}    单独指定第一个子元素的样式
p:last-child {}     单独指定最后一个子元素的样式

p:nth-child(odd)与nth-child(even)
/*不足之处：nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有子元素一起计算的（默认匹配他们得是相同的子元素*/
p:nth-of-type(odd)奇数和
nth-of-type(even)偶数和

循环使用样式

p:nth-child(n){}选取每一行
/*n:所有的行
	2n:每2行选择一行
	3n:每3行选择一行
	n+2:除第1行外所有的行
	2n+4:从第4行开始隔1行选择1行*/
p:nth-last-child(n){} 从后向前选择,n为参数
	/*--n:所有行
	2:倒数第2行
	-n+3:最后3行*/
p:only-child{}只有一个元素时使用。用于当用户删除信息，当仅剩一个时会出现警告，背景变成红色等等。

目标伪类选择器

p:target{使该选择器来对页面中的某个target元素（锚记链接）指定样式，当跳转到某个锚点时，此锚点会出现指定的样式改变。}

UI元素状态伪类选择器

E:enabled     匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled     匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked     匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection  匹配E元素中被用户选中或处于高亮状态的部分,相当于复制粘贴时，要选择某些文本，背景颜色会处于高亮部分。

动态伪类选择器

E:link{}  选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。
E:visited{}选择匹配的E元素，而且匹配元素被定义超链接并已被访问过。
E:active{} 选择匹配的E元素，且匹配元素被激活。(常用于描点和按钮)
E:hover{}  选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus{}  选择匹配的E元素，对获取焦点所匹配的E元素进行样式的修改。

伪类和伪元素区别

/*css伪类：状态伪类基于元素当前状态进行选择的。结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
css伪元素：对元素中的特定内容进行操作，而不是描述状态
css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号*/
伪类一般包括：
:active       将样式添加到被激活的元素
:link{}       将特殊的样式添加到未被访问的链接。
:visited{}    将特殊的样式添加到已被访问的链接。
:hover{}      当鼠标悬浮在元素上方时，向元素添加样式。
:focus{}      将样式添加到被选中的元素。
:first-child  将特殊的样式添加到元素的第一个子元素。
:lang         允许创作者来定义指定的元素中使用的语言。

伪元素一般包括：
:first-letter	将特殊的样式添加到文本的首字母。
:first-line		将特殊的样式添加到文本的首行。
:before			在某元素之前插入某些内容。
:after			在某元素之后插入某些内容。

层级选择器

相邻兄弟选择器：li+li :后边紧相邻的选择器会被选中，第一个li不会被选中，注意不是相邻的子类，而是同级关系。

通用兄弟选择器：li~li ：后面的所有li元素都会被选中

子选择器：ul>li :ul后面直接的li元素会被选中

标签：常用,val,伪类,样式,元素,att,选择器,CSS
来源： https://blog.csdn.net/wxd_97/article/details/104683837

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9