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基本选择器的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  5. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  6. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  7. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  8. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  9. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  10. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

随机推荐

  1. win32 - Screen to bmp file(BYTE)

    void WINAPI CaptureScreenIntoFile() { BITMAPFILEHEADER bfHeader; BITMAPINFOHEADER biHeader; HGDIOBJ ...

  2. click模块解析命令行参数

    click模块解析命令行参数 安装 pip install click 操作步骤 1)使用@click.command()装饰一个函数,使之成为命令行接口 2)使用@click.option()等装饰 ...

  3. 【Azure 存储服务】如何查看Storage Account的删除记录，有没有接口可以下载近1天删除的Blob文件信息呢？

    问题描述 如何查看Storage Account的删除记录,有没有接口可以下载近1天删除的Blob文件信息呢?因为有时候出现误操作删除了某些Blob文件,想通过查看删除日志来定位被删除的文件信息. 问 ...

  4. Go语言的100个错误使用场景（55-60）｜并发基础

    目录 前言 8. 并发基础 8.1 混淆并发与并行的概念(#55) 8.2 认为并发总是更快(#56) 8.3 分不清何时使用互斥锁或 channel(#57) 8.4 不理解竞态问题(#58) 8. ...

  5. 内部UI自动化测试培训之python基础

    这个文档的由来是公司内部UI自动化测试培训的资料.部门为了减少测试工作量,准备做UI自动化测试.我写python,其他同事都是java,所以python基础和UI自动化测试selenium的培训就由我 ...

  6. Python实现企业微信自动打卡程序二：跳过节假日，随机打卡时间，定时任务，失败通知

    一.介绍 在上节 Python实现企业微信上下班自动打卡程序内容之后,我们继续优化自动打卡程序.接下来增加如下内容: 实现打卡时间随机范围 处理节假日不打卡的情况 实现定时调度打卡 打卡成功或失败通知 ...

  7. iview Button按钮 全局click事件vue拦截 节流 - 防抖 Throttle debounce

    这里是按钮的节流,就没用防抖 const setVueClickGlobalThrottle = Vue => { // 节流 const on = Vue.prototype.$on Vue. ...

  8. .vscode/extensions.json 是项目用到的 插件 推荐列表，项目应该将此配置 写入用到的插件

    .vscode/extensions.json 是项目用到的 插件 推荐列表,项目应该将此配置 写入用到的插件 .vscode/extensions.json { "recommendati ...

  9. IDEA无限试用插件

    原文地址 之前一直在找激活方法,忽然想到IDEA不是可以试用吗?一直试用不就可以变相地达到了激活的效果? 本篇作废,本篇作废,本篇作废,由于IDEA插件的问题,导致并不能成功的进行重置试用 新整了个J ...

  10. day12-面向对象03

    面向对象03 10.抽象类 abstract修饰符可以用来修饰方法也可以修饰类,如果修饰方法,那么该方法就是抽象方法:如果修饰类,那么该类就是抽象类 抽象类中可以没有抽象方法,但是有抽象方法的类一定要 ...