2 CSS基本选择器
2 基本选择器
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式为：
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
该语法中，id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于HTML中某一个具体的元素。
id选择器不支持像类选择器那样定义多个值，类似"id="bold font24""的写法是错误的。
class选择器
class选择器使用“.”进行标识，后面紧跟class名，其基本语法格式为：
.class名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签名选择器
通过元素的属性名或属性值来匹配元素。例如，[type="text"]选择器匹配所有type属性为"text"的元素。
input[type="text"]{
boeder: 1px solid blue;
}
通配选择器
语法：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
说明：通配符的写法是“*”，其含义就是所有元素。
*{margin:0;padding:0;}代表清楚所有元素的默认边距值和填充值。
作用是：有些标签他默认是带有边距和间隔的，这个通配选择器就是选择所有的标签删除所有的边距的。
/*
#id # id选择符
element # 元素选择符
.class # claw43ss选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符
$("#id")
$(".class")
$("element")
$(".class,p,div")
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
color: red;
}
.c1{
color: red;
}
.c2{
font-size: 32px;
}
</style>
</head>
<body>
<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>
<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>
</body>
</html>
2 CSS基本选择器的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器（div.class中间不带空格）
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
随机推荐
- 【Android 逆向】看雪题目：找出flag 如果输入正确则屏幕上的 hello会变成success
1. apk 安装到手机,只有一个输入框,随便输入点什么,提示error 2. apk拖入到jadx中 public class MainActivity extends AppCompatActiv ...
- 非常好用的VS Code插件
Auto-Collapse Explorer 如果希望在VS Code编辑器中打开文件的时候自动展开对应的目录结构,需要开启"Auto Reveal". 具体设置步骤: 1.打开设 ...
- del,str,repr,call,bool,add,len等魔术方法以及与类相关的魔术属性---day23
1.__del__ # ### __del__魔术方法(析构方法) ''' 触发时机:当对象被内存回收的时候自动触发(1.页面执行完毕回收所有变量2.所有对象被del的时候) 功能:对象使用完毕后资源 ...
- 【Azure APIM】解决APIM Self-hosted Gateway在AKS上，最开始访问时候遇见的404问题
问题描述 根据APIM官方文档,创建Self-hosted 网关在AKS中( 使用 YAML 将自承载网关部署到 Kubernetes :https://docs.azure.cn/zh-cn/api ...
- mvc-mvp-mvvm架构调研及实现--分布式课程思考题--zzb
目录 I. 引言 2 研究背景和动机 2 问题陈述和研究目标 2 II. 相关工作 3 研究现状和相关技术 3 MVC模式的研究现状和相关技术: 3 MVP模式的研究现状和相关技术: 4 MVVM ...
- C++ //排序案列 //描述：将person自定义数据类型进行排序，Person中有属性 姓名，年龄，身高 //排序规则： 按照年龄进行的升序，如果年龄相同按照身高进行降序
1 //排序案列 2 //描述:将person自定义数据类型进行排序,Person中有属性 姓名,年龄,身高 3 //排序规则: 按照年龄进行的升序,如果年龄相同按照身高进行降序 4 5 #inclu ...
- minio通过docker方式部署
MinIO 是在 GNU Affero 通用公共许可证 v3.0 下发布的高性能对象存储. 它是与 Amazon S3 云存储服务兼容的 API 官方文档http://docs.minio.org.c ...
- python AI 应用开发编程实战 大模型实战基础（一）
自从 由美国主导openAi公司开发的gpt大模型问世以来,人工智能技术一直在推动整个科技行业发展,所以当下全球大公司都在布局Ai产品应用,这是这二年出了好几千个Ai产品应用,全球大大小小甚至超出近上 ...
- Markdown表情参考
emoji-github 文章内容来源 https://github.com/hoangdqvn/emoji-github/blob/master/README.md ️ Emoji-GIT Peop ...
- 教你一招,解决Github图片不显示问题(2021.1.20测试可用)
本文提供的是windows系统解决方法,linux系统和mac系统可以参考原理,修改DNS的ip地址为阿里云或者是修改hosts文件 问题 可能有些朋友和我遇到同样的问题,逛Github的时候会发现, ...