二 、选择器

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

选择器

{

样式=值；

样式=值；

样式=值；

......

}

以下面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. linux-文件系统和目录

    linux目录说明 /:系统根目录 /usr:用户的程序 /home:默认创建用户在此目录下创建用户主目录 /etc:存放系统配置文件.服务脚本,一些程序配置文件 /bin:常用命令 /sbin:常用 ...

  2. Neo4j安装配置(mac)

    Neo4j安装配置(mac) 1.下载APP 注意:无需配置变量 下载地址:https://neo4j.com/download/ 2.安装程序并启动 3.创建数据库(local) 选择版本 4.启动 ...

  3. 2020/1/29 PHP代码审计之进一步学习XSS【持续更新】

    0x00 上午学习了XSS漏洞,中午吃饭想了想,还是思考的太浅层了,这种老生常谈的东西对于现在的我意义不大.现在我需要的是思考.于是就有了这个随笔.在本文中,我会持续更新一些XSS的深入思考,payl ...

  4. [极客大挑战 2019]Havefun

    打开题目右键查看源代码 <!--$cat=$_GET['cat']; echo $cat; if($cat=='dog') {echo 'Syc{cat_cat_cat_cat}';}--> ...

  5. D11 列表 list 元祖 字典dict

    取值 name = "alexdfg" print(name[3:5]) 取出 ex name = "alexdfg" print(name[3]) 取出e 列 ...

  6. Java 面向对象 异常处理：RunTimeexception，try-catch，异常声明throws，自定义异常，throw和throws的区别，多异常处理（9）

    Java 面向对象 异常处理:RunTimeexception,try-catch,异常声明throws,自定义异常,throw和throws的区别,多异常处理(9)

  7. LeetCode——324. 摆动排序 II

    给定一个无序的数组 nums,将它重新排列成 nums[0] < nums[1] > nums[2] < nums[3]... 的顺序. 示例 1: 输入: nums = [1, 5 ...

  8. Chladni Figure CodeForces - 1162D （暴力，真香啊~）

    Chladni Figure CodeForces - 1162D Inaka has a disc, the circumference of which is nn units. The circ ...

  9. Linux系统的限制

    1.总结系统限制有:    /proc/sys/kernel/pid_max #查系统支持的最大线程数,一般会很大,相当于理论值    /proc/sys/kernel/thread-max    m ...

  10. Popular generalized linear models|GLMM| Zero-truncated Models|Zero-Inflated Models|matched case–control studies|多重logistics回归|ordered logistics regression

    ============================================================== Popular generalized linear models 将不同 ...