二 、选择器

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

选择器

{

样式=值；

样式=值；

样式=值；

......

}

以下面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. 10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景

    一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragmen ...

  2. 改变UILable里面文字的大小和颜色

    UILabel *lb = [[UILabel alloc]init]; NSMutableAttributedString *attriStr = [[NSMutableAttributedStri ...

  3. 干货 | 基于Go SDK操作京东云对象存储OSS的入门指南

    前言 本文介绍如何使用Go语言对京东云对象存储OSS进行基本的操作,帮助客户快速通过Go SDK接入京东云对象存储,提高应用开发的效率. 在实际操作之前,我们先看一下京东云OSS的API接口支持范围和 ...

  4. 201709-1 打酱油 Java

    思路: 先看能不能买5瓶,因为送的最多,然后看能不能买3瓶,最后一瓶一瓶地买 import java.util.Scanner; public class Main { public static v ...

  5. MySQL视图和事务

    视图的操作                                                                                                ...

  6. UML-状态机图和建模

    1.目标:如何画状态机图 2.定义:描述某个对象的状态.感兴趣的事件.以及对象响应该事件的行为. 转换:用箭头表示 状态:用圆角矩形表示 事件:指的是一件值得注意的事情的发生.如:拿起电话. 当事件“ ...

  7. MySQL学习笔记——〇六SQLAlchemy框架

    我们在前面所用的方法都是在可视化的视图软件或者terminal里直接写SQL语句来对数据库进行访问,这里我们大概讲一下一个新的框架——SQLAlchemy. OEM框架 OEM的概念 对象-关系映射( ...

  8. springboot整合redis简单示例

    一.项目架构 二.项目内容 1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  9. Linux-线程同步之互斥锁

    1.互斥锁又叫互斥量(mutex) 2.相关函数:pthread_mutex_init  pthread_mutex_destroy   pthread_mutex_lock pthread_mute ...

  10. Python笔记_第一篇_面向过程_第一部分_4.格式化输入和输出

    开始Python编程首先要学习两类最常用(经常出现和使用)输入和输出.学习编程最重要的状态就是“人机交互”,所以这两类函数显得尤其重要. 第一部分 格式化输入 1.1   函:input 语:inpu ...