选择器

最新推荐文章于 2022-07-28 21:13:40 发布

weixin_50272302

最新推荐文章于 2022-07-28 21:13:40 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/weixin_50272302/article/details/108262591

版权

1.1元素选择器

用标签名来作为选择器，选中所有相应的元素

<ID0CTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type-"texts">
div{
font-size: 30px;
font-family:楷体;
}
</sty1e>
</head>
<body>
<div>元素选择器</div>
<p)元素选择器</p>
<p>元素选择器</p>
<p>元素选择器</p>
</body>
</html>

1.2类选择器

根据class的属性来选择元素，样式定义为： .className{ xxxxxxx}

<htnl>
<head>
<meta charset-"utf-8">
<title></title>
<style type="text/css">
.big(
width: 200x;
height: 200px;
background-color: blue;
.small{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
cdiw class="big"></div)
<diw class"small"></div>
<diw class-"big"></div>
<div class="small"></div>
<d1w class="big "></div/
cdiv classe="small"></div>
<diw class="big"></div>
</body>
</html>

1.3 ID选择器

根据id名来选择元素，样式定义为： #idName{xxxxxxxxx}

<html>
chead>
cmeta charsete="utf-8">
<title></title>
<style type="text/css">
#big{
width: 288px;
height: 288pxi
background-color: blue;
{
#small{
width: 288px;
height: 208px;
background-color: red;
}
</style>
</head)
<body)
ediv id="big"></div>
ediv id="small")</div>
tdiv id="big")</div>
cdiv id= "small"></div>
</body>
</html>

1.4属性选择器

选择器                描述
[attribute]           用于选取带有指定属性的元素。
[attribute=value]     用于选取带有指定属性和值的元素。
[attribute~=value]    用于选取属性值中包含指定词汇的元素。
[attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^ =value]   匹配属性值以指定值开头的每个元素。
[attribute$ =value]   匹配属性值以指定值结尾的每个元素。
[attribute* =value ]  匹配属性值中包含指定值的每个元素。

例：[title*=’d’]:选择title值中包含d的元素

1.5关系选择器

E F ：选择E元素的后代元素F（所有后代，包括子类、孙类） E > F : 选择E元素的直接后代元素（也就是子类） E + F：选择E元素的第一个弟弟元素F E ~ F: 选择E元素的所有弟元素F

1.6并选择器

将相同的样式放在一起，类名直接用逗号分开

weixin_50272302

关注

0
点赞
踩
0

收藏

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

1.1元素选择器用标签名来作为选择器，选中所有相应的元素<ID0CTYPE html><html><head><meta charset="utf-8"><title></title><style type-"texts">div{font-size: 30px;font-family:楷体;}</sty1e></head><body><div>元
复制链接

扫一扫