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. Redis搭建Sentinel实验环境

    环境准备 在物理机上启动3台虚拟机,IP地址分别为:192.168.56.4,192.168.56.5,192.168.56.6. 1.确保3台虚拟机的网络是相互联通的. 2.确保已经在3台虚拟机上安 ...

  2. OSG开发笔记（二十九）：OSG加载模型文件、加载3DMax三维型文件Demo

    前言   Osg深入之后需要打开模型文件,这些模型文件是已有的模型文件,加载入osg之后可以在常见中展示模型文件,该节点可以操作,多个逼真的模型的节点就实现了基本的场景构建.   Demo      ...

  3. 红胖子(红模仿)的博文大全：开发技术集合大版本更新v4.0.0

    <红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术.树莓派.三维.OpenCV.OpenGL.ffmpeg.OSG.单片机.软硬结合等等)持续更新中...>大版本更新,更新后版本 ...

  4. 字符串，format格式化及列表的相关进阶操作---day07

    1.字符串相关操作 (1)字符串的拼接 (2)字符串的重复 (3)字符串跨行拼接 (4)字符串的索引 (5)字符串的切片:[开始索引:结束索引:步长] 2.字符串的格式化format (1)顺序传参 ...

  5. django中如何处理事务

    生成订单时,一次性生成多条数据记录或者一次性操作多个模型,都有可能产生中途报错的情况,所以需要在生成订单时保证多个数据操作的原子性. 事务 在完成一个整体功能时,操作到了多个表数据,或者同一个表的多条 ...

  6. 【图论#02】岛屿系列题（数量、周长、最大面积），flood fill算法的代码实现与优化

    岛屿数量 给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网 ...

  7. 【LeetCode二叉树#15】二叉搜索树中的众数（递归中序遍历）

    二叉搜索树中的众数 力扣题目链接(opens new window) 给定一个有相同值的二叉搜索树(BST),找出 BST 中的所有众数(出现频率最高的元素). 假定 BST 有如下定义: 结点左子树 ...

  8. X86模拟龙芯与编译 .NET CoreCLR

    目录 .NET 收到一台龙芯机器 编译 CoreCLR 环境要求 部署虚拟机与环境 Linux 安装 KVM 下载需要的文件 启动模拟器 下载 CoreCLR 尝试编译 CoreCLR 前段时间得知龙 ...

  9. C# 一些类名的后缀及其意义

    C# 中有常见的以以下名称为后缀的类型,笔者总结了一下大概用途. 目录 Extensions Helper 或 Helpers Scheme Builder Context Factory Provi ...

  10. TCP的链接和断开_wireShark实践

    目录 准备 TCP连接的三次握手 WireShark验证 TCP的四次挥手 WireShark验证 状态解释 其他的 # 概述 终于到了学习总结时间了 准备 TCP连接的三次握手 转自https:/ ...