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 ...
随机推荐
- Python访问PostGIS(建表、空间索引、分区表)
#encoding: utf-8 __author__ = 'Administrator' import psycopg2 import ppygis import datetime import s ...
- redis常用命令记录
cd App/opt/redis/bin/ ./redis-cli 1.查看所有key值 keys 前缀* 2.删除指定key值 删除一条 del key全名 删除多条 exit ./redis-cl ...
- C#.NET常见问题(FAQ)-VS如何整个项目中查找字符串
Ctrl+F打开查找对话框,然后输入查找字符串,电机右边的小三角,选择整个解决方案,就可以遍历所有文件查找指定字符了 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http:// ...
- VS编程常见的编译和链接错误
常见错误1: Error 2 error LNK1120: 1 unresolved externals Error 1 error LNK2019: unresolved external symb ...
- 使用Iperf工具测试android系统网络wifi的吞吐量wifithrougput
http://blog.csdn.net/bingxuebage/article/details/7534655 服务端:./iperf3 -s &客户端:./iperf3 -c 10.15. ...
- mac 终端 使用 gnu coreutils 工具 ls 颜色显示
mac 终端默认 ls 命令无颜色显示: 1: 使用 ls -G 可以显示基本颜色 2:使用 gnu coreutils 工具 mac 终端 使用 gnu coreutils 工具 ls 颜色显示 以 ...
- jQuery停止动画finish和stop函数区别
stop()函数直接停止动画,finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值. 示例代码: <html> <head> <meta char ...
- OA项目实战学习（7）——初始化数据&权限配置显示
详细有哪些功能: 初始化数据 权限数据. 超级管理员. Installer.java package cn.xbmu.oa.install; import javax.annotation.Resou ...
- google kaptcha 验证码组件使用简介
kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.K ...
- 【laravel5.4】vue分页删除
1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js