CSS3选择器

最新推荐文章于 2024-09-02 17:34:07 发布

liuhde2008

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量89

点赞数

文章标签：前端 ViewUI

本文链接：https://blog.csdn.net/liuhde2008/article/details/84447166

版权

写了这么长时间前端代码竟然对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标签第一个元素起作用。

。。。。。。

liuhde2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

写了这么长时间前端代码竟然对CSS3选择器还不是很清楚，呜呼哀哉！俗话说：书读百遍，其义自见，我信这句话，所有我要多看书，多作笔记，多记录学过的东西，不然学了跟没学没什么分别。【本文会根据学习会新增内容，不正确的地方请大家指正，谢谢！】一、CSS3属性选择器在CSS3中增加了三个属性选择器[att*=val]：如果元素用att表示的属性之属性值包含字符为val指定的字...
复制链接

扫一扫