CSS 的选择符
CSS是什么?
如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则。
CSS规则的组成

CSS的规则由 选择符 和属性,值组成。
Css选择符:选择符是规则中用于确定样式所涵盖的可应用到的目标元素的部分。
样式声明又包含两个部分:属性和值。
属性是元素中需要被修改的某个属性,如,颜色,宽度等等。
选择符的种类:
1.全体选择符,全体选择符是一个星号(*),意思是选择文档中的每一个元素,例如:
* {color: blue;}意思是把所有元素都应用为蓝色。
2.元素选择符:选择一种元素的所有实例,其具体性来自于标签名。
p {color:red;} 意思是,所有<p>标签都应用这个样式,元素选择符也叫类型选择符。
3.类选择符:类选择符的应用范围是:带有class属性,并且class名为类选择符指定的名字的标签,
类选择符以一个圆点开头(.),例如: info{color: purple;}这个规则的应用范围就是 含有class属性且class名为info的标签,class=”info”。
4.ID选择符:他的作用范围是 id属性名是指定名字的那个标签。由于标签的ID是唯一的,所以ID选择符一般只指定一个标签,ID选择符以一个”#”符号开头,例如:#introduction {color: green;} 表示ID名为introduction,
的标签。
5.为类选择符:可用的伪类选择符只有有限几个:
:link {color: blue;} 选择范围为所有超链接元素。
:visited {color: purple;}选择范围是所指向的目标已经被访问过的链接。
:active{color: red;}选择范围是那些当鼠标点击链接时,或当焦点位于链接上并按下回车键时,以及其他处于活动状态的链接。
:hover{color: green;}
CSS 的选择符的更多相关文章
- CSS 组合选择符
CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...
- css关系选择符
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS:CSS 组合选择符
ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...
- CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- CSS之选择符、链接、盒子模型、显示隐藏元素
<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...
- 1+x证书学习日志——css 基本选择符
##css选择符 1:类型选择符 直接用标签名称当作选择符 特点:选中所有同类元素 2:id名称 ...
- CSS组合选择符
组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...
- 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告
新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...
随机推荐
- 【JS】Intermediate3:AJAX
1.load new content into a page without a full reload XML HTTP Request (XHR) To retrieve new content ...
- 【HTML】Beginner1:TagsAttributesElements
HTML(Hypertext Text Mark-up Language)&(How To Make L) HTML is used for meaning and CSS is used f ...
- WordPress模版结构
一套完整的WordPress模版应至少包括如下文件: style.css : 样式表文件 index.php : 首页模板 archive.php : 文章归档/分类目录模板 404.php : 40 ...
- 【解决】Microsoft Visual Studio 2012 打开2008下编译的silverlight3项目
最近因为项目需要,老师要我搞一发流程设计器,毫无头绪呀妈蛋 .. 我考虑是用silverlight呢还是jquery .. 上网找了找 .. 有一个用silverlight3写的 貌似IDE用的是V ...
- javascript 如何判断一个对象的类型
<!DOCTYPE html> <html> <head> </head> <body> <script type="tex ...
- JVM之---Java内存分配参数(第四篇)
1.内存分配参数---大纲 Ø如何设置堆内存 Ø如何设置栈内存 Ø如何设置方法区 Ø如何设置对的分配比率 Ø设置参数打印堆栈: ØJava程序的两种模式:Server&Client 2.设置堆 ...
- 对css中的浮动属性float刨根解牛
1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...
- 微信开发第7章 通过accesstoken获取用户黑名单列表
获取黑名单列表可以查看文档 http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1471422259_pJMWA&token=& ...
- 解决Debian-7.1下Chrome浏览器字体难看的问题
首先在 Advance Setting 的 font 标签页下做如下配置: 然后在用户目录下创建 .fonts.conf 文件,内容如下: <?xml version='1.0'?> &l ...
- MySQL 统计信息
200 ? "200px" : this.width)!important;} --> 介绍 数据库维护统计信息的目的主要是为了优化器进行更好的执行优化,首先统计信息是建立在 ...