属性选择器
[att=val]
att代表属性, val代表属性值
//获取id为section1的元素,并设置颜色为黄色
[id=section1]{
color : yellow;
}
[att*=val]
含义:如果元素用att表示的属性的属性值中包含用val指定的字符,则匹配该元素
//获取id内有box字符的元素,比如box,boxx,oboxsa
[id*=box]{
color : yellow
}
[att^=val]
含义:如果元素用att表示的属性的属性值的开头字符为用val指定的字符,则匹配该元素
//获取id内以start开头的元素,比如start1,start2
[id^=start]{
color : yellow
}
[att$=val]
含义:如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,则匹配该元素
//获取id以end结尾的元素,比如1end,2end
[id$=end]{
color : yellow
}
伪类选择器
选择器:伪元素{属性 : 值}
first-line伪元素选择器
用于为某个元素中的第一行文字使用样式
//为该元素第一行文字设置颜色
p:first-line{
color : #0000ff;
}
first-letter伪元素选择器
用于为某个元素中的文字的首字母或第一个字使用样式
//为该元素第一个字符设置颜色
p:first-letter{
color : #0000ff;
before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容
//为每一个匹配的li元素之前加一个点
li:before{
content : *
}
after伪元素选择器
after伪元素选择器用于在某些元素之后插入一些内容
//为所匹配的li元素后加内容
li:after{
content : "链接",
font-size:12px;
color:red;
}
结构性伪类选择器
root, not, empty, target
root选择器
root选择器将样式绑定到页面的根元素中,即<html>
not选择器
对某个结构元素使用样式,但又排除某个子结构元素,可使用not选择器
//排除h1元素
body *:not(h1){
color : yellow;
}
empty选择器
使用empty选择器来指定当前元素为空白时使用
:empty{
background-color:yellow;
}
target
使用target选择器来对页面中某个target元素(该元素的id被当作页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用.
//锚链接,被选中的元素改变颜色
<a href="#text1">示例文字1</a>
<a href="#text2">示例文字2</a>
<a href="#text3">示例文字3</a>
<div id="text1">示例文字1</div>
<div id="text2">示例文字2</div>
<div id="text3">示例文字3</div>
div:target{
color : yellow;
}
first-child
匹配第一个子元素
li:first-child{
background-color : yellow;
}
last-child
匹配最后一个子元素
li:last-child{
background-color : yellow;
}
nth-child
匹配指定序列号子元素
//匹配第二个子元素
li:nth-child(2){
color : red
}
nth-last-child
匹配指定序列号子元素(倒数)
//匹配倒数第二个子元素
li:nth-last-child(2){
color : yellow;
}
nth-child(odd)
对所有奇数序列子元素匹配
nth-child(even)
对所有偶数序列子元素匹配
nth-of-type
匹配指定序列号元素(同类元素)
//匹配第二个h2元素
h2:nth-of-type(2){
color : yellow;
}
nth-last-of-type
同上,不过倒着数
循环使用样式
将n改为an+b即可, a表示每次循环包括几种样式, b表示指定的样式在循环中的位置
li:nth-child(4n+1){
color ; yellow;
}
li:nth-child(4n+2){
color : red;
}
li:nth-child(4n+3){
color : pink;
}
li:nth-child(4n+4){
color : green;
}
only-child选择器
匹配属于父元素中唯一子元素的p元素
//匹配li唯一子元素
li:only-child{
color : red;
}
only-of-type选择器
同理
UI元素状态伪类选择器
:hover
用来指定当鼠标指针移动到元素上面时元素所使用的样式
input[type="text"]:hover{
//指定的样式
}
:focus
选择器用来指定元素获得光标焦点时所使用的样式,主要是在文本框控件获得焦点并进行文字输入的时候使用
input[type="text"]:focus{
color : blue;
}
