写了这么长时间前端代码竟然对CSS3选择器还不是很清楚,呜呼哀哉!
俗话说:书读百遍,其义自见,我信这句话,所有我要多看书,多作笔记,多记录学过的东西,不然学了跟没学没什么分别。【本文会根据学习会新增内容,不正确的地方请大家指正,谢谢!】
一、CSS3属性选择器
在CSS3中增加了三个属性选择器
- [att*=val]:如果元素用att表示的属性之属性值包含字符为val指定的字符串的话,则该元素使用该样式。
- [att^=val]:如果元素用att表示的属性之属性值的开头字符为val指定的字符串的话,则该元素使用该样式。
- [att$=val]:如果元素用att表示的属性之属性值的结尾字符为val指定的字符串的话,则该元素使用该样式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3选择器</title>
<style type="text/css">
._divYellow{ background:yellow}
[id^=section]{
background:red
}
[id$=\-1]{
background:yellow
}
</style>
</head>
<body>
<div id="section1" class="divYellow">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
</body>
</html>
看上面代码:
[id^=section]表示id以section开头,[id$=\-1]表示id以-1结束那样式就会满足该条件的所有标签器作用。
二、结构性伪类选择器
1、伪类选择器及伪元素选择器
所谓伪类选择器就是相同元素,定义不同的类选择器,且选择器名已定义好,如a(锚)元素的几种选择器。
所谓伪元素选择器:并不是针对真正的元素使用选择器,而是针对CSS中一定义好的伪元素使用的选择器。
在CSS中有如下四种为元素选择器:
- first-line:元素的第一行
- first-letter:元素的中文第一个汉字或英文的第一个字母
- before:元素前面插入内容
- after:元素后面插入内容
接上面例子:
......
p:first-line{
color:#0000ff
}
......
<p>
段落中的第一行。<br>段落中的第二行。
</p>
......
运行代码样式对p标签第一个元素起作用。
。。。。。。