二 、选择器

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

选择器

{

样式=值；

样式=值；

样式=值；

......

}

以下面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. caffe中运行mnist

    mnist样本字库嘚图片转换:# coding=utf-8import numpy as npimport struct import matplotlib.pyplot as plt from PI ...

  2. CountUp.js 数字跳转效果小插件

    CountUp.js  实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...

  3. 关于 sublime 使用技巧

    实行多位置编写  按住 alt 键 用鼠标点击想要编写的位置 实行正方形任意拉选操作  按住 alt 键  用鼠标拖动来进行勾选 继续转发别人的帖子 模块与包的导入 https://blog.csdn ...

  4. 大数据高可用集群环境安装与配置（02）——配置ntp服务

    NTP服务概述 NTP服务器[Network Time Protocol(NTP)]是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可以提供高精 ...

  5. Python笔记_第五篇_Python数据分析基础教程_相关安装和版本查看

    1. IDE说明: 所有的案例用Anacoda中的Jupiter工具进行交互式讲解. 2. 版本和安装: NumPy从如下网站安装:http://sourceforge.net/projects/nu ...

  6. MySQL的DDL和DML

    SQL语句:结构化查询语句,使用SQL与数据库“沟通”,完成相应的数据库操作. 语句分类 DDL(Data Definition Languages)语句:即数据库定义语句,用来创建数据库中的表.索引 ...

  7. 直击JDD | 陈生强：京东数科的底层是数字化操作系统

    11月19日,由京东集团主办的JDD-2019京东全球科技探索者大会在京开幕,京东数字科技集团CEO陈生强作了题为"以科技为美,为价值而生"的主旨发言,再论"数字科技&q ...

  8. F5双机冗余配置

    转自:https://blog.51cto.com/dynamic/769888本文作者:CTO_LiuJinFeng 1. 配置管理接口-IP 前面文章中没提到如何配置IP,现在开始来配置. 登录- ...

  9. Linux相关笔记

    vim下 r /etc/hosts  会把这个文件读进来 r! df -Th  会把执行的内容读取进来 查找 /  ? 替换:s/old/new/g 2到9行替换2,9s/old/new/g 全部替换 ...

  10. tensorflow常用函数库

    归一化函数: def norm_boxes(boxes, shape): """Converts boxes from pixel coordinates to norm ...