CSS-选择器

最新推荐文章于 2024-07-17 18:42:40 发布

寇大大

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量89

点赞数 1

分类专栏：前端基础文章标签： css css3 关系选择器

本文链接：https://blog.csdn.net/qq_43322680/article/details/116483462

版权

前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS基本选择器

标签选择器

HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>

类选择器

一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器

ID选择器

ID选择器的名称就是HTML中标签的ID名称，ID全局唯一

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级：

ID选择器>类选择器>标签选择器

不遵循“就近原则”，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS高级选择器

层次选择器

后代选择器

body p{
background: red;
}

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器

body>p{
background: pink;
}

相邻兄弟选择器

.active+p {
background: green;
}

通用兄弟选择器

.active~p{
background: yellow;
}

结构伪类选择器

<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

E[attr]

a[id] {
background: yellow;
}

E[attr=val]

a[id=first] {
background: red;
}

E[attr*=val]

a[class*=links] {
background: red;
}

E[attr^=val]

a[href^=http] {
background: red;
}

E[attr$=val]

a[href$=png] {
background: red;
}

寇大大

关注

1
点赞
踩
0

收藏

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

目录CSS基本选择器标签选择器类选择器ID选择器CSS高级选择器层次选择器结构伪类选择器属性选择器CSS基本选择器标签选择器HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>类选择器一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器ID选择器ID选择器的名称就是HTML中标签的ID名称，ID全局唯一标签选择器直接应用于HTML标签...
复制链接

扫一扫