二 、选择器

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

选择器

{

样式=值；

样式=值；

样式=值；

......

}

以下面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. VUE常见的语法

    模版渲染{{msg}} v-html="" v-text="" v-bind:id=""  类似 attr 三元判断 {{ok?'yes': ...

  2. Arduino学习——u8glib提供的字体样式

    Fonts, Capital A Height4 Pixel Height  U8glib Font FontStruct5 Pixel Height  04 Font 04 Font 04 Font ...

  3. maven常用配置setting.xml详解

    参考文章: https://www.cnblogs.com/hwaggLee/p/4579418.html 1.<localRepository/> 该值maven本地仓库的路径 < ...

  4. JavaScript—面向对象贪吃蛇_1

    前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...

  5. vue安装openlayers,jquery,bootstrap,阿里iconfont，

    安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...

  6. python 爬虫 多线程 多进程

    一.程序.进程和线程的理解  程序:就相当于一个应用(app),例如电脑上打开的一个程序. 进程:程序运行资源(内存资源)分配的最小单位,一个程序可以有多个进程. 线程:cpu最小的调度单位,必须依赖 ...

  7. shiro的小白学习

    1. shiro是啥就不用说了吧 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理 SecurityManager 是shiro的核心.它不同于java. ...

  8. strpos用法

    语法 strpos(string,find,start) 参数 描述 string 必需.规定要搜索的字符串. find 必需.规定要查找的字符串. start 可选.规定在何处开始搜索.   技术细 ...

  9. 前端Json 增加,删除,修改元素（包含json数组处理）

    一:基础JSON对象  二:JSON数组数据 以下为增删修改方法: <!DOCTYPE html> <html lang="en"> <head> ...

  10. TF分布式问题

    碰到一个没解决的问题. 用tensorflow 分布式异步更新模式训练模型, 模型中带正则项, 每个batch的损失函数为 \[\lambda \|W\|_1 + \frac 1 {N_j} \sum ...