二 、选择器

内嵌、外部样式表的一般语法：

选择器

{

样式=值；

样式=值；

样式=值；

......

}

以下面html为例，了解区分一下各种样式的选择器

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="file:///E|/网页/Untitled-2.css" rel="stylesheet" type="text/css" />

</head>

<body>

<input name="txt" id="a1" type="text" /><br/>

<span>你好</span> <br/>

<div>

<input name="txt" id="a2" type="text" /><br/>

<input name="txt" id="a3" type="text"  value="******"/><br/>

<span>

<input name="txt" id="a4" type="text" value="******"/><br/>

</span>

</div>

<p>你好</p>

</body>

1、标签选择器  ------用标签名做选择器

input{...}    div{...}    span{...}     td{...}  都可以做标签选择器，标签选择器控制的是一类，范围大。

例：

@charset "utf-8";

/* CSS Document */

input

{

border:5px;

color:#3F6;

border-bottom:3px solid red;

}

显示结果：

2、类别选择器 ------在HTML元素中使用class对元素进行分类，然后使用这个class的值作为选择器。

class选择器都是以"."开头。.class的名{...} 类别选择器相对于标签选择器来说，控制的更准确。

例：选择器 .uu

@charset "utf-8";

/* CSS Document */

.uu

{

border:5px;

color:#3F6;

border-bottom:3px solid red;

}

HTML表的调用为：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="file:///E|/网页/Untitled-2.css" rel="stylesheet" type="text/css" />

</head>

<body>

<input name="txt" type="text" id="a1" /><br/>

<span class="uu">你好</span> <br/>

<div>

<input name="txt" type="text" id="a2" class="uu" /><br/>

<input name="txt" type="text" id="a3"  value="******"/><br/>

<span>

<input name="txt" type="text" id="a4" class="uu" value="******"/><br/>

</span>

</div>

<p>你好</p>

</body>

显示结果：

3、ID选择器 ------针对HTML中相对应ID的元素起作用，以"#"开头。

#ID的名{...}

例：选择器#a3

@charset "utf-8";

/* CSS Document */

#a3

{

border:5px;

color:#3F6;

border-bottom:3px solid red;

}

显示结果：

4、复合选择器

（1）、用","隔开   -------表示并列关系，同时起作用。

input,#dd,.yellow,.uu

{

color:gray;

line-height:28px;

}

（2）、用"空格"隔开，------表示后代关系。

.uu

{

    color:gray;

line-height:28px;

}
div .uu         <!--div空格uu-->

{

background-color:blue;

}

<input name="txt" type="text" class="uu"/>

<div>                                                  <!--相当于父代-->

<input name="txt" type="text" />                 <!--子代-->

<input name="txt" type="text" class="uu" value="******"/>   <!--子代-->

<span>                                        <!--子代-->

<input name="txt" type="text" class="uu" value="******"/>   <!--孙子代-->

</span>

</div>

不管是子代，还是孙子代，都是后代，只要在div的后代中有uu的就变化。

显示结果：

（3）class二次筛选。

标签选择器后面紧跟着 .class选择器{...}

input.uu
{
border:5px double red;
}

例：

.uu

{

    color:gray;

line-height:28px;

}

div.uu

{

background-color:red;

}

<body>

<input name="txt" type="text" class="uu"/><br/>

<div>

<input name="txt" type="text" /><br/>

<input name="txt" type="text" class="uu" value="******"/><br/>

<span>

<input name="txt" type="text" class="uu" value="******"/>

</span>

</div>

</body>

显示结果：

div.uu的意思是：div存在的同时.uu也存在，属于二次筛选。

*对比：（div空格 .uu）与div.uu的不同。

div空格.uu的意思是：div的后代中（不管是子代还是孙子代中）出现.uu，出现的项就会随样式表变化。

div.uu的意思是：div存在的同时.uu也存在时，才会随样式表变化，属于二次筛选。

CSS样式表-------第二章：选择器的更多相关文章

  1. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  2. CSS样式表------第一章：样式表的基本概念

    CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标 ...

  3. css——样式表分类，选择器

    一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...

  4. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  5. CSS样式表——格式与选择器

    1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...

  6. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  7. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  8. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  9. 8.20 css样式表：样式分类，选择器。样式属性，

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

随机推荐

  1. SpringBoot+Shiro （一）

    从网上搜索SpringBoot+Shiro相关文章,大部分都需要DB和Ecache的支持.这里提供一个最简单的Spring+Shiro的配置. 前言: 1. 由于SpringBoot官方已经不再建议使 ...

  2. 51nod 1013：3的幂的和 快速幂

    1013 3的幂的和 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 求:3^0 + 3^1 +...+ 3^(N) mod 1000000007 ...

  3. XML--XML Schema Definition(四)

    参考 http://www.w3school.com.cn/schema/index.asp XSD 复合类型指示器 通过指示器,我们可以控制在文档中使用元素的方式.有七种指示器: Order 指示器 ...

  4. 【无网条件下】Linux系统、jdk、redis及集群、rabbitmq、nginx、weblogic和oracle安装及配置

    本篇文章为原创,仅供参考使用,如果需要文章中提到的所有软件安装包和依赖包(即data),请以博客园邮箱联系获取链接. 准备资料 软件 主要软件包版本 路径 系统镜像 CentOS-6.10-x86_6 ...

  5. google docker镜像下载

    https://anjia0532.github.io/2017/11/15/gcr-io-image-mirror/

  6. <强化学习>马尔可夫决策过程MDP

    一.MDP  / NFA    :马尔可夫模型和不确定型有限状态机的不同 状态自动机:https://www.cnblogs.com/AndyEvans/p/10240790.html MDP和NFA ...

  7. vue简单逻辑判断

    条件判断能否显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. IDEA常用技巧以及快捷键总结

    一.常用快捷键 快捷键 描述 Ctrl+o 复写父类方法 Alt+7 查看类所有方法实现 Ctrl+Alt+H 方法调用链

  9. UML-基于GRASP对象设计步骤

    在OO设计建模的时候,在最后考虑系统启动时需要初始化的内容. 1.从用例开始,以下是一步步设计用例实现 处理销售 2.SSD 我们选择: makeNewSale 3.编写操作契约(复杂用例场景时) 4 ...

  10. 微信支付的Demo

    是在一个子项目完成的, 依赖: <dependencies> <!-- spring-boot--> <dependency> <groupId>org ...