一篇文章教你了解CSS选择器

置顶 已于 2024-04-05 17:45:46 修改
阅读量477 收藏 2
点赞数 14
文章标签： css 前端
于 2024-03-27 15:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jilit_jilit/article/details/137069992
版权

        index.html

        index.css

css选择器 分类

一、基本选择器 

1、元素选择器

2、属性选择器

3、ID选择器 

4、Class选择器 

5、包含选择器  

6、子选择器

7、兄弟选择器  

8、选择器组合  

二、伪选择器

1、伪元素选择器

2、伪类选择器 

3、第二类UI状态伪类选择器

三、第三类选择器

排除选择器

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">   
</head>
<body>
</body>
</html>

index.css

css选择器 分类


一、基本选择器 


1、元素选择器

E{} element

/* selector{property:value;property2:value2;....} */
/* 选择器{属性：值；属性：值；}


/* p {
    background: red;
} */


/* div {
    background: red;
} */


/* 特例：*{}代表所有 */


/* * {
    background: red;
} */

2、属性选择器

E[attr]{}  是元素选择器的强化  attr 所有的属性都可以（自己造的也可以）

/* div[id] {   有id属性的div
    background: red;
} */


/* div[id=xx] {  = 有id属性，并且id 属性等于xx的div
    background: red;
} */

div[id*=xx] {
    /**=有id属性，并且id 属性值包含xx的div*/
    background: red;
}


/* div[id ^=xx] {  ^= 有id属性，并且id 属性值以xx开头的div
    background: red;
} */


/* div[id $=xx] {$= 有id属性，并且id 属性值以xx结尾的div
    background: red;
} */


/* 可以用有没有该属性做限制，用属性值做限制，也可以用属性的位置做限制 */

3、ID选择器 

/* #xx {  id是xx的元素
    background: red;
} */


/* 特例：结合选择器  注：中间没有空格*/


/* p#xx {
    background: red;
} */


/* 看成在不同维度上给元素加别名
id:唯一标识符 
class:类 */

4、Class选择器 

/* 
.xx {
    background: red;
} */


/* 
p.xx {
    background: red;
} */

5、包含选择器  

selector1 selector2....{}  不一定是父子关系 祖孙关系  弱的包含关系*/

/* div p {
    background: red;
} */


/* .qcby li a {
    background: red;
} */

6、子选择器

selector1>selector2>.... 必须是父子*/

/* .qcby>li>a {
    background: red;
} */

7、兄弟选择器  

selector1~ selector2

兄弟：具有共同父元素的元素们叫兄弟[亲兄弟]

匹配selector1对应的元素后边能匹配 selector2的兄弟节点  【弟】
 

/* 
#php~.java {
    background: red;
} */


/* 找哥哥：整体 - 弟弟 */


/* .java {
    background: red;
}

#php~.java {
    background: white;
} */

8、选择器组合  

selector1,selector2,selector3....{}

/* p {
    background: red;
}

span {
    background: red;
}

div {
    background: red;
} */


/* 选择器组合：有限的，能够枚举出来的元素 ，样式相同的*/


/* p,
span,
div {
    background: red;
} */


/* *代表所有，加表面看不出来的样式，通用的样式 */

二、伪选择器

1、伪元素选择器

/* ::first-letter(第一个字母)，::first-line(第一行)，使用时依赖的元素必须是块级元素 */


/*
div::first-letter {
    color: red;
    font-size: 40px;
    font-weight: 600;
}
*/


/*  ::after  ::before  */


/*
div::after {
    content: url("../images/1.jpg");
    background: red;
    color: white;
    font-size: 40px;
}
*/


/*
div::before {
    content: "555";
    background: green;
    color: white;
    font-size: 40px;
}
*/

2、伪类选择器 

/* :nth-child() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始 
   :nth-last-child() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始 
:nth-child(1) 等价于 :first-child  
   :nth-last-child(1) 等价于 :last-child     

.zy li:nth-last-child(1) {
    color: red
}
.zy li:nth-last-child(2) {
    color: blue
}
.zy li:nth-last-child(even) {
    color: red
}
.zy li:nth-last-child(-n+4) {
    color: red
}
*/


/*  :nth-of-type重在于类型(是p、h、ul等)  :nth-child()重在于位置（在第几行）   */


/*
    :nth-of-type() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始 
    :nth-last-of-type() 括号中可以使用数字，代表第几，从1开始；预定义词 odd(奇数) even(偶数) 表达式:例如2n+1,n从0开始 
    :nth-of-type(1) 等价于 ：first-of-type
    :nth-last-of-type(1) 等价于 ：last-of-type

.zy li:nth-of-type(1) {
    color: red
}
*/

3、第二类UI状态伪类选择器

/* 悬停状态 */


/*
.zy li {
    background: blue;
}

.zy li:hover {
    background: red;
}

table tr td {
    background: green;
}

table td:hover {
    background: red;
}
*/


/*  文本框  */

input {
    background: green;
}

input:hover {
    background: red;
}


/* 焦点状态 */

input:focus {
    background: yellow;
}


/* 选中状态 */

input:checked {
    box-shadow: 10px 20px 3px red;
}

三、第三类选择器

排除选择器

.zy li:not(.java):not(#php) {
    color: red
}

一般路过糸.
关注
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器
余光的博客
09-06 3718
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器 简介直观的 css 选择器，可以美化我们的代码，提高可读性，甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏，借助下面的例子相信你一定能掌握 css 选择器的妙用，加油～ 全篇文章共22个例子，分别使用了 标签选择器 class id 伪元素 伪类 属性 篇幅较长，建议收藏 阅读指南 先贴出选择器字典，帮助大家回忆基本的选择器含义 阅读示例 阅读代码，并完成题目（仅思考选择器部
一篇文章，带你详细了解CSS基础知识
PICACHU+++的博客
10-25 3651
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
标梵教你使用 CSS 选择器定位网页元素
标梵互动
03-04 1432
css选择器在 web 领域应用非常普遍，不管是前端工程师还是 ui 自动化测试，使用 css 选择器都能精准快速定位到自己想要的元素。css 选择器的内容不是很多，稍微花一点时间就可以直接上手，在应用中就能逐渐掌握，当遇到一个表达式不是很熟练的时候，可以再回来查一下这篇文章。 先来看一下怎么使用 css 选择器。写一个简单的登录界面 HTML ： <div class="container"> <h2 class="title">登录</h2> <form i
学CSS选择器，看这篇文章就够了（近2万字详解）
微风洋洋的博客
02-06 3201
今天这篇文章就是来和大家详细聊聊CSS选择器，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨 <b>点赞、收藏、关注</b>支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍CSS元素样式，到时不见不散~~~
css的nth选择器,CSS选择器之nth
热门推荐
weixin_39973410的博客
08-04 1万+
语法：E:nth-child(n){}说明：nth-child() 是CSS3的一个伪类选择器，匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。效果实例：一、数字序号写法 E:nth-child(5){} //数值123456789E表示标签，div, li, span等，下同。注意：数字的序号是从1开始的哦，不像很多编程语言中索引是0开始的，参数是必须大于0的整数。123456...
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
“Allen Su”的博客
11-25 7012
后代选择器，用来选择元素或元素组的所有后代元素。
【CSS 教程系列第 11 篇】什么是 CSS 中的交集选择器
“Allen Su”的博客
11-27 1万+
什么是交集选择器 ？ 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。
零基础CSS入门教程(9)–class选择器
程序员大阳
10-17 4596
更多相关博文请查看【JavaWeb学习之路】 本文目录1. 前言2. 场景3. 使用方法4. 整体解析5. class选择器的优点6. 小结 1. 前言 前2片分别介绍了元素选择器、id选择器，其实这两种选择器还不是最常用的选择器。 最常用、使用频率最高、最受前端程序员欢迎的选择器，毫无疑问是class选择器。 为啥呢?因为元素选择器选择元素过于宽松，而id选择器过于严谨，class选择器面向某一类元素进行选择，实现了灵活度和广泛性的良好结合。 说的有点高深了，本篇就带大家伙了解下class选择器。 2.
CSS常见选择器
qq_63218110的博客
12-04 2864
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
CSS 选择器（超级详细，欢迎补充）
冷兮雪的博客
11-25 3755
css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。今天我们重点来介绍css中的选择器。
CSS选择器的使用技巧
12-12
前面一篇文章介绍了CSS页面布局中HTML结构化，本节讲解如何使用巧妙的使用CSS选择器。 　id用于标识页面唯一元素，id的名称是控制某一内容块的手段，通过将某内容块置入div并赋予唯一的id，就可以用CSS选择器来精确...
渲染CSS选择器
12-11
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
CSS画出三角形的做法
mingangel的博客
10-01 369
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 372
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
【CSS】position
最新发布
小秀的博客
10-02 308
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 230
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS中的font-variation-settings：探索字体的可变性
艾恩小灰灰的博客
09-30 446
可变字体允许字体文件包含一系列的设计轴（Design Axes），如宽度（Width）、倾斜度（Slant）、粗细（Weight）等。通过调整这些轴的值，可以实现从一种样式到另一种样式的平滑过渡，而无需加载多个独立的字体文件。为设计师提供了前所未有的灵活性，在保持页面加载性能的同时，能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及，这一功能将在未来成为Web设计中的重要工具之一。
css的背景background属性
Citrus的博客
09-28 1175
background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。background属性还可以设置不同的子属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值