Acticle 19:css3选择器的汇总

最新推荐文章于 2024-04-21 14:30:45 发布

颜洁

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量415

点赞数

分类专栏： css3选择器

本文链接：https://blog.csdn.net/amytun_yu/article/details/53189689

版权

css3选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3选择器分为基本选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。
今天主要讲了，基本、层次、属性、伪类选择器

一、基本选择器

 *  通配选择器   选择文档中所有的html元素
 ’*‘    任意字符

E   元素选择器   选择指定的类型的html元素   

例如：p div  h3   ----元素选择器也叫标签选择器

#id ID选择器   选择指定ID属性值为“id”的任意类型的元素

.class  类选择器    选择指定的class属性值为“class”的任意类型的任意多个元素

selector1，selector2 群组选择器   将每一个选择器匹配的元素集合并
----群组选择器也叫并列选择器

二、层次选择器

E    F  后代选择器   选择匹配的F元素，且F元素被包含在匹配的E元素内
----即为找到E元素后面的所有子代元素F（找后代）

  E > F 子选择器    选择匹配的F元素，且F元素是E元素的子元素
    ----找到E元素后面的第一层子元素 F

E + F   相邻兄弟选择器 选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素
    ----找到E元素后面的第一个相邻兄弟元素F

E ~ F  通用选择器   选择匹配的F元素，且F元素是E元素后面的所有兄弟元素
    ----找到E元素后面的所有兄弟元素F

三、属性选择器

E[attr] 选中具有attr属性的E元素

以下是关于具有attr属性的小例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat]{background:red;}//找到含有cat属性的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="leo">leo</p>
    <p cat="dp">杜鹏</p>
    <p cat="zM">子鼠</p>
    <p cat="xm">小美</p>
</body>
</html>

E[attr=val]      选中具有attr属性，并且属性值为val的E元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat=leo]{background:red;}//找到含有cat属性值为‘leo’的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="leo">leo</p>
    <p cat="dp">杜鹏</p>
    <p cat="zM">子鼠</p>
    <p cat="xm">小美</p>
</body>
</html>

E[attr|=val]    选中具有attr属性，并且属性值为val或以val-开头

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat|=b]{background:#C3C;}//找到含有cat属性中以‘b’或‘b-’开头的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="b-leo">leo</p>
    <p cat="bleo">杜鹏</p>
    <p cat="b-leo">子鼠</p>
    <p cat="g-xm">小美</p>
    <p cat="b">无名氏</p>
</body>
</html>

E[attr~=val]   选中具有attr属性，并且属性值包含val的E元素，该属性值必须以空格隔开

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat~=old]{background:red;}//找到含有cat属性值里面含有'old'字符的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="leo old">leo</p>
    <p cat="dp">杜鹏</p>
    <p cat="zM">子鼠</p>
    <p cat="xm">小美</p>
</body>
</html>

E[attr*=val]通配符   选中具有attr属性，并且属性值包含val的E元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat*=d]{background:#C3C;}//找到含有cat属性中所有‘d’字符的标记（cat属性为自定义属性）*（为任意字符）
</style>
</head>
<body>
    <p cat="bleo old">leo</p>
    <p cat="bdp">杜鹏</p>
    <p cat="bzM">子鼠</p>
    <p cat="gxm">小美</p>
</body>
</html>

E[attr^=val]起始符     选中具有attr属性，并且属性值以val开始的E元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat^=g]{background:pink;}//找到含有cat属性里面以‘g’开头的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="bleo old">leo</p>
    <p cat="bdp">杜鹏</p>
    <p cat="bzM">子鼠</p>
    <p cat="gxm">小美</p>
</body>
</html>

E[attr$=val]结束符    选中具有attr属性，并且属性值以val结束的E元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat$=M]{background:#CC0;}//找到含有cat属性里以‘M’结尾的标记（cat属性为自定义属性）
</style>
</head>
<body>
    <p cat="bleo old">leo</p>
    <p cat="bdp">杜鹏</p>
    <p cat="bzM">子鼠</p>
    <p cat="gXM">小美</p>
</body>
</html>

四、伪类选择器

E ： first-child  作为父元素的第一个子元素的E元素

E ： last-child   作为父元素的最后一个子元素的E元素

E  F：nth-child（n）  选中的F元素是E元素的第n个子元素

E  F： nth-last-child（n）   选中的F元素是E元素的倒数第n个子元素

E ： nth-of-type（n）选择父元素内具有指定类型的第n个E元素

E ： nth-last-of--type（n）    选择父元素内具有指定类型的倒数第n个E元素

   E ： first-of-type     选择父元素内具有指定类型的第1个E元素

  E ： last-of-type   选择父元素内具有指定类型的倒数第1个E元素

    E ： only-child    选择父元素内只包含一个子元素,且该元素是E元素

    E ： only-of-type   选择父元素内只包含一个类型的子元素，且该元素是E元素

    E ： empty   选择没有子元素的元素

五、文本类新增伪类选择器

    E ：： first-letter   选择文本块的第一个字母

    E ：： first-line      选择文本快的第一行

    E ：： before    和E ：： after       主要用于清除浮动

    E ：： selection      选中的E元素

颜洁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Acticle 19:css3选择器的汇总

css3选择器分为基本选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。今天主要讲了，基本、层次、属性、伪类选择器一、基本选择器 * 通配选择器选择文档中所有的html元素 ’*‘ 任意字符E 元素选择器选择指定的类型的html元素例如：p div h3 ----元素选择器也叫标签选择器#id ID选择器选择指定ID属性值为“id”的任意类
复制链接

扫一扫