CSS样式表-------第二章:选择器

二 、选择器

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

选择器

{

样式=值;

样式=值;

样式=值;

......

}

以下面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也存在时,才会随样式表变化,属于二次筛选。

时间: 2024-10-10 12:13:33

CSS样式表-------第二章:选择器的相关文章

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

CSS样式表------第一章:样式表的基本概念

CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标记中,只对当前元素起作用,和html联合显示,控制精确,但是可重用性差,冗余多. 例: <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text&quo

css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省网络带宽 使用独立于网页的CSS,有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签     1.1  引入方式 四种 style=""  行内样式表 <style>   内部样式表 <link rel=&

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

css样式表---样式表分类、选择器

一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> 例: 结果: 2.内嵌样式表.——放在页面的<head></head>中间.——可以对整个页面. <head> <meta http-equi

css样式表的选择器与分类

css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构:CSS 称为层叠样式表 用于给网页设置各种样式 css样式的语法由3部分组成,选择器,属性和值. css的分类:主要分: 内联,内嵌,与外联. 内联: 写在标签里, 控制精准,代码重复性差,优先级最高. 内嵌: 嵌在页面head里面,控制没有内联的精准,代码重复性好. 外联: 单独的样式文件,引入

第三章----CSS样式表综合整理

样式表注释/**/ 1.样式表分类: 1-1内联样式表      <div   style="font-size:15px;"></div> 1-2内嵌样式表       写在<head>标签里, <style type="text/css">样式表内容</style> 1-3 外部样式表    一般写样式表都会先有对全局的样式 * {} <link rel="stylesheet"

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→