CSS3选择符
在css中除了我们知道的元素选择符,还新增了一些选择符下面就来说说这些选择符。
很多选择符不仅仅是CSS里面可以用,js中也是可以用。
关系选择符
兄弟选择符(E~F)
选择符合条件的所有兄弟元素
相邻选择符(E+F)
选择紧贴在E元素之后F元素,元素E与F必须同属一个父级,只能向后找。
属性选择器
=全等,~=约等,^=开头,$=结尾,*=含有,|=特别
伪类选择器
结构伪类:
:nth-child(n)
正数
:nth-last-child(n)
倒数
匹配属于其父元素中第n个子元素 子元素相对整洁(没有其他的标签乱入)其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)
,但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
可以写隔行换色表格效果
<html>
<head>
<style type="text/css">
.listD li:nth-child(3n+1) {
background-color: plum;
}
.listD li:nth-child(3n+2) {
background-color:lightblue;
}
.listD li:nth-child(3n+3) {
background-color: pink;
}
</style>
</head>
<body>
<ul class="listD">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
<li>列表项9</li>
<li>列表项10</li>
</ul>
</body>
</html>
:first-child
匹配属于父元素中的第一个
:last-child
匹配属于父元素中的最后一个
:first-of-type
匹配父元素下第一个类型为E的子元素
:last-of-type
匹配父元素下最后一个类型为E的子元素
:only-child
唯一子元素
:empty
选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
:target
选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。
:not
选择器称为否定选择器,可以选择除某个元素之外的所有元素。
伪元素:
::before和::after
这两个主要用来给元素的前面或后面插入内容,这两个常和”content”配合使用,使用的场景最多的就是清除浮动。
::selection
伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的。只能改变背景颜色和文本颜色
p::selection{
background-color: #DDA0DD;
color:#f00;
}
::first-line
设置对象内的第一行的样式。
::first-letter
设置对象内的第一个字符的样式。
状(静)态伪类:
input:enable
input:disable
input:checked
在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。
:disabled
选择器刚好与:enabled
选择器相反,用来选择不可用表单元素。要正常使用:disabled
选择器,需要在表单元素的HTML中设置“disabled”属性。