[CSS3] 学习笔记-CSS选择器
CSS3中，选择器的分类很多，有元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。
1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器，例如，h1{},a{}
2、选择器分组：h1,h2{}、*{}
3、类选择器允许以一种独立于文档元素的方式来指定样式：.class{}；
可以结合元素选择器：a.class{}；
多类选择器：.class.class{}
4、ID选择器与类选择器相似，不过也有一些重要差别，例如：#id{}
ID选择器与类选择器的区别：ID只能在文档中使用一次，而类可以使用多次；ID选择器不能结合使用；当使用Js时，需要使用Id:GetElementById()
5、属性选择器：[title]{} ，title是属性的名称
也可以根据具体的属性值进行选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，例如：a[href="www.baidu.com"]{};
也可以指定属性和属性值完全匹配；
也可以根据部分属性值选择。
6、后代选择器：后代选择器
7、子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,即只支持一层关系，不支持多层关系：h1>strong{}
8、相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素，例如：h1+p{},h1和p有相同父类
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="1.css" type="text/css" rel="stylesheet">
<style>
/*简单属性选择*/
[title]{
font-size: 100px;
}
[href] {
font-size: 20px;
}
/*属性和属性值完全匹配*/
[href="http://www.jikexueyuan.com"]{
font-size: 40px;
}
/*部分属性选择器*/
[title~="title"]{
font-size: 100px;
}
</style>
</head>
<body>
<p>Hello World !</p>
<h1>标题1</h1>
<h2>标题2</h2>
<div class="div">Hello Css</div>
<a class="div">hello a class</a>
<p class="p1">this is p class p1</p>
<p class="p2">this is p class p2</p>
<!--class=p1 p2 的这个元素，包含了类p1 p2的属性，同时还可以自己再定义属性-->
<p class="p1 p2">this is p class p3</p>
<div id="mydiv">Hello Selector1</div>
<!--以下操作允许，class可以重复-->
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<!--以下操作不允许，id不能重复-->
<!--<div id="div1"></div>-->
<!--<div id="div1"></div>-->
<!--<div id="div1"></div>-->
<p title="">Hello 属性选择器</p>
<a href="">极客学院</a>
<a href="http://www.jikexueyuan.com">极客学院</a>
<p title="title hello">hello部分属性选择器</p>
<p>这是<strong>父<i>级</i></strong></p>
<div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ol>
<li>item11</li>
<li>item12</li>
<li>item13</li>
</ol>
</div>
</body>
</html>
对应的CSS文件：
/*选择器分组-通配符*/
*{
font-size: 50px;
margin: 0px;
padding: 0px;
}
/*元素选择器*/
p{
color: coral;
}
/*选择器分组*/
h1,h2{
color: red;
}
/*类选择器*/
.div{
color: aqua;
}
/*类选择器结合元素选择器*/
a.div{
color:darkgoldenrod;
}
.p1{
color: darkgoldenrod;
}
.p2{
font-size: 30px;
}
/*多类选择器*/
.p1.p2{
font-style:italic;
}
/*id 选择器*/
#mydiv{
color: chocolate;
}
/*后代选择器*/
/*p strong{*/
/*color: aquamarine;*/
/*}*/
/*p strong i{*/
/*font-style: italic;*/
/*}*/
/*子元素选择器只能一层*/
p>strong{
color: fuchsia;
font-size: 30px;
}
/*相邻兄弟选择器*/
li+li{
font-size: 50px;
color:blanchedalmond;
}
[CSS3] 学习笔记-CSS选择器的更多相关文章
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- HTML 学习笔记 CSS(选择器3)
CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...
- HTML 学习笔记 CSS(选择器)
CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...
- HTML 学习笔记 CSS(选择器4)
CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...
- HTML 学习笔记 CSS(选择器2)
CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- [CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...
随机推荐
- Python正则表达式，统计分析nginx访问日志
目标: 1.正则表达式 2.oop编程,统计nginx访问日志中不同IP地址出现的次数并排序 1.正则表达式 #!/usr/bin/env python # -*- coding: utf-8 -*- ...
- RPC（Remote Procedure Call Protocol）——远程过程调用协议
RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存在 ...
- Java中的Runtime类
Runtime类描述了虚拟机一些信息.该类采用了单例设计模式,可以通过静态方法 getRuntime()获取Runtime类实例.下面演示了获取虚拟机的内存信息: package Main; publ ...
- bzoj-4318 OSU! 【数学期望】
Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...
- 无锁同步-C++11之Atomic和CAS
1.概要 本文是无锁同步系列文章的第一篇,主要探讨C++11中的Atomic. 我们知道在C++11中引入了mutex和方便优雅的lock_guard.但是有时候我们想要的是性能更高的无锁实现,下面我 ...
- 安卓selector
定义styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> < ...
- Python3基础 set() 删除一个列表中的重复项
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- UVa 10602 - Editor Nottoobad
题目大意:有一个编辑器,它有两种命令,“重复上一个单词” 和 “删除前一个字母”,给出一系列字符串,求最少的敲击键盘的次数. 题目中强调第一个敲的单词必须是给的第一个单词,于是就考虑按照单词与第一个单 ...
- js bool true false 比较
.想到一个好玩的,运行如下 javascript : if ('0') alert("'0' is true"); if ('0' == false) alert(" ...
- Visual Studio 2015的安装与基本使用
为什么要使用Visual Studio 2015? 它是中文的.界面友好.自动补全.实时语法错误提示(上图中波浪线部分).单步调试……最重要的社区版是免费的!所以你不必再使用破解的.老旧的的不兼容现代 ...