css选择器

于 2024-08-04 00:26:07 发布
阅读量468 收藏 19
点赞数 25
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoe_z/article/details/140895289
版权

文章目录

css选择器

注释内容

一、css规则

1. 行内样式

<div style="color:red; background:yellow;">hello</div>

2.内部样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      color: bisque;
    }
  </style>
</head>
<body>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
<p>aa</p>
<p>aa</p>
<p>aa</p>
<p>aa</p>


</body>
</html>

3. 外部样式

link链接

行内样式优先级最高
内部样式和外部样式优先级一样

4.css规则

选择器{
属性：值;
属性1:值1;
}

二、基本选择器

1.元素选择器：用元素名称做选择器

    div{
      color: bisque;
    }

给所有元素加样式：*

*{
  color: bisque;
}

2.属性选择器：标签上面加属性

div [id] {
  color: bisque;
} 

/* 有id属性的 */


div[id=aa] {
  color: rgb(159, 76, 12);
}

/* 有id属性，且id属性是aa的 */
/* div[id=aa]注意两个是紧挨着的 */

div[id*=aa] {
  color: rgb(159, 76, 12);
}
/* 表示只要id带aa的，就能被选中 */

div[id^=aa] {
  color: rgb(159, 76, 12);
}
/* 有id属性，且以aa开头的 */

div[id$=aa] {
  color: rgb(159, 76, 12);
}
/* 有id属性，且以aa结尾的 */

这个属性，是id，class，包括自己写的属性，都可以

3.id选择器：#开头

#aa{
  color: aqua;
}

4.class选择器

.zz{
  color: aqua;
}

5.结合选择器

p.zz{
//满足p标签
//满足class
//中间无空格
  color: aqua;
}

p#zz{
//满足p标签
//满足id
//中间无空格
  color: aqua;
}

6.子选择器

selector1 selector1 两个选择器中间用空格隔开
强调包含关系

div p {
color: purple;
background: greenyellow;
} 
/* div下面的p标签 */

7.包含选择器

selector1>selector2 强调父子

div>p {
color: purple;
background: greenyellow;

7.兄弟选择器 selector1~selector2


/* 只找弟弟  class叫cc下面所有class叫aa的*/

.cc ~. aa {
color: purple;
background: greenyellow;

/* class叫cc的下面所有弟弟 * */

.cc ~* {
color: purple;
background: greenyellow;

8.选择器组合 selector1,selector2,selector3 …

p,
div a,
span {
color: purple;
background: greenyellow;
}

二、伪元素选择器

1、首字母

:: first-letter 只能用于块级元素

div :: first-letter {
color: purple;
font-size: 30px;
background: greenyellow;
}

2、首行

首行 :: first-line 只能用于块级元素

div {
//单词裂开
//不然所有字母就会横向展开了
word-break: break-all;

div :: first-line {
color: purple;
font-size: 30px;
background: greenyellow;
}

3、在前边插入 :: before

div::before {
content: "aaa";
color: purple;
font-size: 30px;
background: greenyellow;
}入代码片

4、在后边插入 :: after

div::after {
  content: "aaa";
  color: purple;
  font-size: 30px;
  background: greenyellow;
}

三、伪类选择器

1、结构性伪类选择器

:nth-child()
括号里可以是数字n n从1开始
可以是英文单词 odd奇数 even偶数
括号里可以是表达式 5n+2 n从1开始
找第一个:nth-child(1)=first-child
找最后一个:last-child = nth-last-child(1)
倒着数:nth-last-child()
只认数字,如果类型刚好符合,则被选中
就是从第一个孩子往后走，不看类型

:nth-of-type()
括号里可以是数字n n从1开始
可以是英文单词 odd奇数 even偶数
括号里可以是表达式 5n+2 n从1开始
找第一个 first-of-type= nth-of-type(1)
找最后一个 last-of-type= nth-last-of-type(1)
倒着数:nth-last-of-type()
既认数字也认类型,找同类型下的第n个元素
就是从类型里面找第几个孩子

 ul li:nth-last-of-type(3n+2) {
color: purple;
background: greenyellow;

2、ui状态伪类选择器

:hover鼠标悬停状态
:focus焦点状态
:checked选中状态


input:hover {
color: purple;
background: greenyellow;
}
input:focus {
color: red;
background: greenyellow;
}
input:checked {
color: red;
background: greenyellow;
/* 加阴影 */
box-shadow: 3px 3px 3px red;
/* 左右偏移量 垂直偏移量 模糊度 */
}

3、其他伪类选择器

/* not() */
ul li:not(.java):not(.php) {
color: purple;
background: greenyellow;
}

4、选择器的优先级规则

1、选择器写的越长(越准确),优先级越高
2、优先级高低 id选择器>class选择器>元素选择器
3、同级别长度下,css代码按照顺序执行,后边的效果会把前边的覆盖
掉。
4、终极规则:以上规则适用大部分场景,特殊场景不适用自行测试

总结

css总结

aoe_z
关注
CSS 选择器
langmanboy的博客
04-08 1961
CSS 选择器 1. 什么是 CSS 选择器？ CSS 选择器用于查找（或选取）要设置样式的 HTML 元素 CSS 选择器可以分为五大类： 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 选择器 {属性: 属性值;} 2. 简单选择器 元素选择器 类选择器 id 选择器 * 通用选择器（通配符） 交集与并集选择器 2-1 元素
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
css 选择器
qq_42638586的博客
04-10 1408
css选择器
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS选择器分类大全
m0_67859656的博客
11-05 6321
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS 选择器优先级
频繁记录
06-13 2147
CSS 选择器优先级
xpath选择器和css选择器的用法
人工智能视觉分析算法学习实践和经验分享。
03-29 4029
目标：xpath选择器和css选择器的用法 前文使用scrapy爬虫框架用到selector选择器了，本文补充两种选择器的使用细节 xpath选择器语法 css选择器语法 掌握常用的xpath选择器和css选择器 知识就像是抽象出来的规则。学习在大脑中分类。 内容：xpath选择器语法 XPath 使用路径表达式来选取 XML或HTML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 选取节点：xml中的节点是以树结构（二叉树的树）来命名的，和HT
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
CSS选择器学习攻略
09-24
理解并熟练掌握CSS选择器是创建高效、可维护的样式表的关键。以下是对CSS选择器的详细说明： 1. **基本选择器**： - `*` 通用元素选择器，用于选择页面上的所有元素。 - `E` 标签选择器，如`p`选择所有的段落元素...
CSS选择器.docx
最新发布
08-02
以下是对CSS选择器的详细介绍： 一、基本选择器 通用选择器（*）： 匹配HTML或XML文档中的所有元素。 例如：* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素（标签）选择器（E）： 通过...
驯服CSS选择器
12-01
《驯服CSS选择器》是由Nicole Sullivan撰写的一份PPT，主要探讨了优化CSS选择器以提升网页性能的关键策略。CSS文件的大小和HTTP请求数是影响CSS性能的两个核心因素，远比我们通常关注的回流(reflow)和渲染时间更重要...
CSS选择器实现字段解析
01-21
但是我不想要这种标签该咋办，这时候就要使用CSS选择器中的伪类方法。如下所示。 注意的是两个冒号。使用CSS选择器真的很方便。同理我用CSS实现字段解析。代码如下 # -*- coding: utf-8 -*- import scrapy import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值