CSS选择器、层叠相关的基础知识
CSS是Cascading Style Sheets的英文缩写，即层叠样式表。CSS2.1是W3C于2007年发布，现在推荐使用的。CSS3现在还处于开发中，有部分浏览器的新版本支持。
1. CSS 概述
- 解决内容与表现分离的问题。
- 实现网页风格的统一，并且容易修改。
- 外部样式表可以极大提高工作效率。
- 使用CSS可以减少网页的代码量，因为它可以缓存到本地。
- CSS是大小写不敏感的，在CSS语法中推荐使用小写。
- 多个样式定义可层叠为一。
2. 关于层叠
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中4拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于<head>标签内部）
- 内联样式（在HTML元素内部）
关于外部样式表、内部样式表、内联样式的差别，请参考：CSS的引用方式（引用外部样式表、内部样式表、内联样式表）
3. 关于选择器
3.1 标签选择器
比如p标签选择器（代表所有的段落都使用这个CSS样式）：
td {
font-size:14px;
width:120px;
}
3.2 id选择器
id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。id属性只能在每个 HTML 文档中出现一次。
#note {
font-size:14px;
width:120px;
}
3.3 类选择器
就是在名字前增加了一个“.”,class选择符在一个页面中可以出现多次。
div.note {
font-size:14px;
}
.dream {
font-size:14px;
}
3.4 群组选择器
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
3.5 后代选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
3.6 属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title] { color:red; }
3.7 属性和值选择器
下面的例子为 title="HelloWorld" 的所有元素设置样式：
[title=HelloWorld] { border:5px solid blue; }
4. 示范
<p>CSS基本知识之标签选择器</p>
<p id="sampleid">CSS基本知识之id选择器</p>
<p class="sampleclass">CSS基本知识之类选择器</p>
<p class="sampleclass sampleclass2">CSS基本知识之类选择符，出现两个类选择器。它们的效果是重叠的。</p>
CSS选择器、层叠相关的基础知识的更多相关文章
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- CSS学习笔记1：基础知识
CSS规则由两部分组成,选择器和声明 选择器:标签,告诉浏览器哪些标签需要用到这个样式 声明:样式的内容,由一或多对属性:值以:隔开组成,由{}包围,需要多个选择器时以逗号隔开 ...
- 关于CSS你应该知道的基础知识 - 样式应用篇
上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...
- HTTP笔记01-http相关的基础知识
这个系列文章是阅读<图解HTTP>后写下的笔记 当我们在浏览器输入url,点击回车后,浏览器显示我们需要的web页面,那么,这个界面是如何产生的? 根据浏览器地址中输入的url,浏览器从相 ...
- 关于CSS你应该知道的基础知识 - 盒模型篇
浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...
- XML的相关基础知识分享(二)
前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义 ...
- Java基础知识学习（三）
面向对象部分 首先要了解面向对象的思想,与C#一致,都是面向对象的语言 访问修饰符 public 共有的,对所有类可见. protected 受保护的,对同一包内的类和所有子类可见. private ...
- TCP/IP基础知识
TCP/IP基础知识 网络 TCP/IP 引言 本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容 TCP/IP ...
- 【JavaScript你需要知道的基础知识~】
最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...
随机推荐
- 重装上了Fedora8自带的MySQL5.0.45，再试,告捷！！
MySql服务器IP是192.168.0.104,测试连接的笔记本IP为192.168.0.100. 以下命令说明两台机器的网络连接是通畅的: [root@bogon bin]# ping 192.1 ...
- 触发器二(DML触发器)(学习笔记)
DML触发器(语句触发器) 由DML语句进行触发,当用户执行了INSERT,UPDATE,DELETE操作时就会触发操作 示例一.只有在每个月的10日才允许办理,新员工入职与离职,其他时间不允许增加和 ...
- jquery.datepicker、jquery.validate、jquery.uploadify冲突解决
Jquery 1.11.2 Jquery.validate 1.13.1 Jquery.Uploadify 3.2(flash版) Jquery.DatePicker 用的是Jquery-ui 1.1 ...
- netsh学习
show allowedprogram –显示被允许的程序配置 show config - 显示防火墙的配置 show currentprofile -显示 Windows 防火墙的当前配置文件. s ...
- jquery动态修改div高度
<!DOCTYPE html> <html> <head> <script src="jquery-1.4.2.min.js">&l ...
- Ubuntu系统安装VMware Tools的简单方法
不少网友反映在VMWare虚拟机下安装Ubuntu系统后无法安装VMware Tools,这里给出一个简单方法,只需要几步即可解决. 第一步:进入系统后,点击虚拟机上的安装vmware tools,回 ...
- 光驱在资源管理器显示黄色感叹号的解决方法BIOS内有 系统下没有
1. 点开“开始”-运行regedit.exe,进入注册表编辑器,到左边的项目栏里找到HKEY_LOCAL_MACHINE\SYSTEM \CurrentControlSet\Control\Clas ...
- dyld: Library not loaded: @rpath/XCTest.framework/XCTest Referenced from: /private/var/mobile/Conta
dyld: Library not loaded: @rpath/XCTest.framework/XCTest Referenced from: /private/var/mobile/Cont ...
- plsql 存储过程 测试
plsql 存储过程 测试 CreationTime--2018年8月14日09点54分 Author:Marydon 1.找到要运行的存储过程-->选中-->右键-->测试 2 ...
- 去除DataTable重复数据的三种方法（转）
转自:https://www.cnblogs.com/sunxi/p/4767577.html 业务需求 最近做一个把源数据库的数据批次导出到目标数据库.源数据库是采集程序采集而来的原始数据库,所以需 ...