图解css3:核心技术与案例实战读书笔记(第一章和第二章)
css3选择器概览
共分5大类，其中伪类选择器分6小类
一. 基本选择器
二. 层次选择器
三. 伪类选择器
3.1 动态 伪类选择器
3.2 目标
3.3 语言
3.4 UI元素状态
3.5 结构
3.6 否定
四. 伪元素
五. 属性选择器
一.基本选择器(5小类)
通配,元素(body,p,ul,h1,div等),id,class,群组选择器
注意：
1 多类选择器，以及元素和类组合的选择器是并关系
2 群组选择器
selector1,selectorN是群组选择器，表示选择匹配为selector1 和selectorN 的所有
元素；selector1 selectorN是后代选择器（后面介绍），表示选择器selectorN 所有
元素为selector1 的后代元素
/群组选择器*/
h1,p{
background:blue
}
3 举例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 基本选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}/*通配*/
/*下面这些后面再解释*/
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}
li {list-style:none outside none; float: left; height: 20px;
line-height: 20px; width: 20px;border-radius: 10px;
text-align: center; background: #f36; color: green; margin-right: 5px; }
/*上面这些后面再解释*/
/*匹配同时具有important和item类的元素*/
.important.item{
background:yellow
}
/*匹配class属性包含demo的所有ul元素*/
ul.demo{
background:blue
}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
二. 层次选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}/*后代选择器(所有后代全部选择)*/
body > div {background: green;} /*子选择器*/
.active + div {background: lime;}/*相邻兄弟选择器*/
.active ～ div {background: red;}/*通用兄弟选择器(所有兄弟全部选择)*/
</style>
</head>
<body>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
三. 伪类选择器
3.1 动态伪类
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用动态伪类选择器美化按钮</title>
<style type="text/css">
.download-info {
text-align: center;
}
/* 默认状态下的按钮效果*/
.btn{
background: red;
}
/* 悬浮状态下按钮效果*/
.btn:hover{
background: green;
}
/* 点击时按钮效果*/
.btn:active {
background: blue;
}
/* 获得焦点效果*/
.btn:focus{
color: yellow;
}
/*定义了超链接并未被访问过*/
#test:link{
background: blue;
}
/*定义了超链接并已被访问过*/
#test:visited{
color: red;
}
</style>
</head>
<body>
<p>伪类选择器语法书写时和其他的CSS 选择器写法有所区别，都以冒号（：）开头</P>
<div class="download-info">
<a href="#" class="btn">这是一个按钮</a>
</div>
<div>
<a href="#" id="test">goto my web site1</a>
</div>
</body>
</html>
3.2 target伪类
用户点击后才渲染对应设置的样式
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 垂直手风琴</title>
<style type="text/css">
.menu :target h2 a, /* 目标标题的效果*/
.menu h2 a:focus,
.menu h2 a:hover,
.menu h2 a:active {
background: red;
color:#FFF;
}
/* 这部分是显示内容的关键代码*/
.menu :target p {/* 展开对应目标内容*/
height:100px;/* 显示对应目标栏内容*/
}
</style>
</head>
<body>
<div class="menu">
<div id="t1">
<h2><a href="#t1">t1</a></h2>
<p>1...</p>
</div>
<div id="t2">
<h2><a href="#t2">t2</a></h2>
<p>2...</p>
</div id="t3">
<div>
<h2><a href="#t3">t3</a></h2>
<p>3...</p>
</div>
</div>
</body>
</html>
3.3 语言伪类选择器
一个页面有多国语言用这个来设置不同的样式
<!DOCTYPE html>
<html lang='en'>
<!--html lang='fr'-->
<head>
<meta charset="utf-8">
<title>语言伪类选择器</title>
<style>
p:lang(fr)
{
background:yellow;
}
p:lang(en)
{
background:red;
}
</style>
</head>
<body>
<p></p>
<p>法国</p>
<p>英国</p>
</body>
</html>
3.4 UI元素状态伪类选择器
:enabled 匹配所有启用的表单元素
:disabled 匹配所有禁用的表单元素
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8">
<title>ui伪类选择器</title>
<style>
input:disabled{
background:red;
}
input:enabled{
background:green;
}
</style>
</head>
<body>
<form>
<input type="text" disabled="">disabled</input>
<br>
<input type="text">enabled</input>
</form>
</body>
</html>
3.5 结构伪类选择器
伪类可以将一段并不存在的html当作独立元素来定位
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8">
<title>结构伪类选择器</title>
<style>
/*选第一个*/
ul>li:first-child{
background:red;
}
/*选第一个li类型*/
ul>li:first-of-type{
background:red;
}
/*选第3个*/
ul>li:nth-child(3){
background:red;
}
/*选所有*/
ul>li:nth-child(n){
background:blue;
}
/*选偶数行*/
ul>li:nth-child(2n){
background:yellow;
}
/*选奇数行*/
ul>li:nth-child(2n+1){
background:lime;
}
/*从第5个开始往后选*/
ul>li:nth-child(n+5){
background:green;
}
/*从第5个开始往前选*/
ul>li:nth-child(-n+5){
background:#acac1c;
}
/*隔3选1*/
ul>li:nth-child(4n+1){
background:#1cac1c;
}
/*选倒数第一个*/
ul>li:last-child{
background:red;
}
/*选倒数第一个li类型*/
ul>li:last-of-type{
background:red;
}
/*选倒数第一个*/
ul>li:nth-last-child{
background:red;
}
/*选倒数第4个*/
ul>li:nth-last-child(4){
background:red;
}
/*选第4个li类型的元素,如果前面有div或者其他类型的就不计算在内*/
ul>li:nth-of-type(4){
background:red;
}
/*倒数计数*/
ul>li:nth-last-of-type(4){
background:red;
}
/*父元素中只有一个子元素*/
ul>li:only-child{
background:red;
}
/*父元素中只有一个同类型的子元素*/
div>p:only-of-type{
background:blue;
}
/*没有任何内容的元素*/
ul>li:empty{
background:lime;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<div>
<div>only
</div>
</div>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li></li>
</ul>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
<p>p3</p>
</div>
</body>
</html>
3.6 否定伪类选择器
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8">
<title>否定伪类选择器</title>
<style>
input:not([type='text']){
background:green;
}
</style>
</head>
<body>
<form>
<input type="text"></input>
<br>
<input type="button" value="test"></input><br>
</form>
</body>
</html>
四. 伪元素选择器
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8">
<title>伪元素选择器</title>
<style>
p:first-letter
{
color:blue;
font-size:xx-large;
}
p:first-line
{
color:#ff0000;
}
h1:before
{
content:"\f0c3";
}
h1:after
{
content:" {" attr(id) "}";
}
::selection{
background:green;
color:blue;
}
</style>
</head>
<body>
<h1 id="ok">This is a heading</h1>
<div>
<p id='t'>it is a sunny day<br>
yes it is
</p><br>
</div>
</body>
</html>
五. 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/*value区分大小写*/
[title=hello]
{
color:red;
}
h1[title=hello]
{
color:blue;
}
/*属性中包含 value 是完整单词*/
p[title~=hello]
{
color:lime;
}
/*属性以 value 或者value-开头，value是完整单词*/
[lang|=en]
{
color:#903;
}
/*属性以 value 开头，value是拼接单词*/
p[title^=hello]
{
color:blue;
}
/*属性以 value 结尾，value是拼接单词*/
p[title$=hello]
{
color:red;
}
/*属性包含value是拼接单词*/
p[title*=test]
{
color:green;
}
</style>
</head>
<body>
<h1 title="hello">h1</h1><br>
<h2 title="hello">h2</h2><br>
<hr>
<p title="hello world">start with hello</p><br>
<p lang="en-us">english!</p>
<hr>
<p title="student hello">end with hello</p>
<p title="studenttest">end with ttest</p>
</body>
</html>