css3选择器

最新推荐文章于 2024-05-19 13:58:51 发布

xuekatie

最新推荐文章于 2024-05-19 13:58:51 发布

阅读量286

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/xuekatie/article/details/122478235

版权

1.标签选择器

1.标签选择器也成元素选择器，类型选择器，它直接使用元素的标签名当做选择器,将选择页面上所有的该种标签

span{color:red;}
p{color:red;}

2.标签选择器的常见作用
标签选择器“覆盖面”非常大，所以通常用于标签的初始化

ul{
   /*去掉无序列表的小圆点*/
	list-style:none;
}
a{
   /*去掉超链接的下划线*/
	text-decoration:none;
}

2.id属性

1.标签可以有id属性，是这个标签的唯一标识

<p id="para1">我是一个段落</p>

2.id的名称只能由字母，数字，下划线，短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
3.同一页面上不能有相同id的标签

3.id选择器

css选择器可以使用井号#前缀，选择指定id的标签

#para1{color:red;}

class选择器

1.class属性表示类名

<p class="warning">段落</p>

2.类名的命名规范和id的命名规范相同
3.使用点**.**前缀选择指定class的标签

.warning{color:red;}

4.多个标签可以使用相同类名

4.复合选择器

后代选择器，如 .box .spec	选择类名为box的标签内部类名为spec的标签
交集选择器如 li.spec	选择即是li标签，也属于spec类的标签
并集选择器如 ul, ol	选择所有ul和ol标签

1.后代选择器可以有很多空格，隔开好几代

.box ul li .spec em{color:red;}

伪类选择器

1.伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有四个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
–	–
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

冒号：就是伪类

元素关系选择器

名称	意义
子选择器 div>p	div的子标签p
相邻兄弟选择器 img+p	图片后面紧跟着的段落将被选中

通用兄弟选择器 p~span	p元素之后的所有同层级span元素

1.子选择器
a.当时用 > 符号分隔两个元素时,它只会匹配作为第一个元素的直接后代元素，即两个标签为父子关系.box>p{}

b.后代选择器不一定限制是子元素.box p{}

2.相邻兄弟选择器
a.相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

b.说白了，a+b就是选择“紧跟在a后面的一个b"

<style>
	img+span{
		color:red;
	}
</style>

<body>
	<p>
		<img src="">
		将被选择<span>这是北京故宫</span>
		<span>这是北京故宫</span>
	</p>
	<p>
		<img src="">
		将被选择<span>这是北京鸟巢</span>
	</p>
	<span>你好</span>
	<span>你好</span>
</body>

3.通用兄弟选择器
a.通用兄弟选择器（~），a ~ b选择a元素之后的所有同层级b元素

属性选择器

img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择alt属性是故宫的img标签
img[alt^=“北京”]	选择alt属性以北京开头的img标签
–	–
img[alt$=“夜景” ]	选择alt属性以夜景结尾的img标签
img[alt*=“北” ]	选择有alt属性中含有北字的img标签
–	–
img[alt~=“北”]	选择alt属性中有空格隔开的北字样的img标签
img[alt、=“北” ]	选择alt属性以北开头-的img标签
–	–

css3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前正被选中的表单元素
–	–
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
–	–
:checked	选择当前已经勾选的单选按钮或复选按钮
:root	选择根元素，相当与选择的是html标签

伪元素

1.css3新增了“伪元素”特性，表示虚拟动态创建的元素
2.伪元素用双冒号表示，IE8可以兼容单冒号
a.::before和::after
b1 ::before 创建一个伪元素，其将成为匹配选中的元素的，第一个子元素，必须设置 content 属性表示其中内容

a::before {
	content:">"
}
展示结果是：>我是超链接>我是超链接

展示结果是>我是超链接>我是超链接
b2 ::after 创建一个伪元素，其将成为匹配选中的元素的，最后一个子元素，必须设置 content 属性表示其中内容

a::after {
	content:"《"
}
展示结果是：我是超链接《我是超链接《

c. ::selection css伪元素应用于用户使用鼠标选中的部分（随着用户对文字或其他部分的选中，颜色会发生改变）
d. ::first-letter和::first-line
d1 ::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
d2 ::first-line会选中某元素中（必须是块级元素）第一行全部文字

xuekatie

关注

1
点赞
踩
0

收藏

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

1.标签选择器1.标签选择器也成元素选择器，类型选择器，它直接使用元素的标签名当做选择器,将选择页面上所有的该种标签span{color:red;}p{color:red;}2.标签选择器的常见作用标签选择器“覆盖面”非常大，所以通常用于标签的初始化ul{ /*去掉无序列表的小圆点*/ list-style:none;}a{ /*去掉超链接的下划线*/ text-decoration:none;}2.id属性1.标签可以有id属性，是这个标签的唯一标识&l.
复制链接

扫一扫