元素选择器
<style>
/* 选择所有div标签，字体变红色 */
div{
color: red;
}
/* 选择所有p标签，字体变蓝色 */
p{
color: blue;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<p>3</p>
<p>4</p>
</body>
id选择器
<style>
/* 选择所有id为div1标签，字体变红色 */
#div1{
color: red;
}
/* 选择所有id为div2标签，字体变蓝色 */
#div2{
color: blue;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
<p id="div1">3</p>
<p id="div2">4</p>
</body>
class选择器
<style>
/* 选择所有class为div1标签，字体变红色 */
.div1{
color: red;
}
/* 选择所有calss为div2标签，字体变蓝色 */
.div2{
color: blue;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<p class="div1">3</p>
<p class="div2">4</p>
</body>
并集选择器
<style>
/* 并集不能有空格 */
/* 选择元素名称为div并且class="box"的元素 */
div.box {
color: red;
}
</style>
<body>
<div class="box">1</div>
<div>2</div>
<p class="box">1</p>
<p>2</p>
</body>
群组选择器
<style>
/* 同时选择class="box",id="aa" 字体设为红色 */
.box,#aa {
color: red;
}
</style>
<body>
<div class="box">1</div>
<div>2</div>
<p id="aa">1</p>
<p>2</p>
</body>
后代选择器
<style>
/* 将第一ul里的li的字体颜色变成红色 */
.box1 li {
color: red;
}
/* 将第一ul里的li的字体颜色变成蓝色 */
.box2 li {
color: blue;
}
</style>
<body>
<ul class="box1">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<ul class="box2">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
子代选择器
<style>
/* 给class="box"的元素的儿子代元素为div的元素添加边框 */
.box>div{
border: 1px solid red;
}
/* 使用emmet语法添加子代元素 */
</style>
<body>
<div class="box">
<div>
xxxxx
<div>yyyyy</div>
</div>
<p>ppppp</p>
</div>
<!-- 添加一个ul(class为list),含五个li(class为item) -->
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
</body>
兄弟选择器
<style>
/* 给p标签的下一个为span的兄弟元素设为字体红色 */
.pp + .span {
color: red;
}
/* 没有效果，必须是相邻 */
.pp + i {
color: red;
}
/* 给所有的li元素添加上边框(第一个除外) */
li + li {
border-top: 1px solid #000;
}
.item + .item {
color: blue;
}
</style>
<body>
<div class="box">
<div class="div">div标签</div>
<p class="pp">p标签</p>
<span class="span">span标签</span>
<i>i标签</i>
</div>
<ul>
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
</ul>
</body>
伪类选择器
简单的伪类选择器
<style>
/* 第一个li字体设为红色 */
.list .item:nth-child(1){
color: red;
}
/* 第二个li字体设为蓝色 */
.list .item:nth-child(2){
color: blue;
}
/* 第三个li字体设为绿色 */
.list .item:nth-child(3){
color: green;
}
</style>
<body>
<ul class="list">
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
</ul>
</body>
奇数偶数伪类选择器
<style>
/* 将奇数li设为红色字体 */
.list .item:nth-child(odd){
color: red;
}
/* 将偶数li设为蓝色字体 */
.list .item:nth-child(even){
color: blue;
}
</style>
<body>
<ul class="list">
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
</ul>
</body>
参数有规律变化的伪类选择器
<style>
/* 将1,4,7,10...的例设置为字体红色 */
.list .item:nth-child(3n+1){
color: red;
}
/* 将3,6,9,12...设置为绿色 */
.list .item:nth-child(3n){
color: green;
}
</style>
<body>
<ul class="list">
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
</ul>
</body>
第一个或最后一个的伪类选择器
<style>
/* 将第一个设为字体红色 */
.list .item:last-child{
color: red;
}
/* 将最后一个设为字体绿色 */
.list .item:first-child{
color: green;
}
</style>
<body>
<ul class="list">
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
<li class="item">xxxx</li>
</ul>
</body>
a相关的伪类选择器
<style type="text/css">
/* 未访问的链接 */
a:link{
color: aqua;
}
/* 已访问的链接 */
a:visited{
color: red;
}
/* 鼠标移动到元素上 */
a:hover{
color: blue;
}
/* 元素被点击时的颜色设置 */
a:active{
color: green;
}
</style>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.sina.com" target="_blank">新浪</a>
<a href="http://zk.huruqing.cn" target="_blank">博客</a>
</body>
after+before伪类选择器
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
}
/* 在.box里面创建两个元素, 一个放在最前面, 一个放在最后面 */
.box::before{
content: 'xxxx';
}
.box::after{
content:'aaaa';
}
</style>
<body>
<div class="box">
<p>哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈</p>
</div>
</body>
CSS3新增的选择器
属性选择器
<style>
/*1. E[att] 选择具有att属性的E元素 */
/* 选择属性含有value属性的元素 */
*[value]{
border-color: red;
}
/* 2.E[att="val"] 选择具有att属性且属性值等于val的E元素 */
/* 只选择type=text 文本框的input 选取出来 */
input[type=text]{
color: blue;
}
/* 3.E[att^="val"] 匹配具有att属性且值以val开头的E元素 */
/* 选择首先是div 然后 具有class属性 并且属性值 必须是icon开头的这些元素 */
div[class^=icon]{
color: aqua;
}
/* 4.E[att$="val"] 匹配具有att属性且值以val结尾的E元素 */
/* 选择有class，且已data为结尾的元素 */
*[class$=data]{
color: brown;
}
/* 5.E[att*="val"] 匹配具有att属性且值中含有val的E元素 */
/* 选择所有class包含e的li元素 */
li[class*=e]{
color: green;
}
</style>
<body>
<input type="text" value="请输入查询条件" />
<input type="text" />
<input type="text" name="" id="" />
<input type="password" name="" id="" />
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是妲己</section>
<section class="icon3-ico">我是甄姬</section>
<div>
<ul>
<li class="icon1-data">1</li>
<li class="icon1-time">2</li>
<li class="icon1-week">3</li>
<li class="icon1-mnth">4</li>
</ul>
</div>
</body>
兄弟选择器
<style>
/* 选择.box元素所有的p元素兄弟 */
.box~p{
color: aqua;
}
/* 选择.box元素的兄弟标签a标签 */
.box~a{
color: red;
}
</style>
<body>
<div class="box">divvvvvvvvv</div>
<p>pppppppppppppp</p>
<a href="#">xxxxx</a>
<span>spannnnnn</span>
<p>pppppppppppppp</p>
</body>
选择被勾选的标签
<style>
/* 已被选择的输入框的下一个span元素设置为字体红色 */
input:checked+span{
color: blue;
}
</style>
<body>
<span>选项1</span><input type="checkbox" />
<span>选项2</span><input checked type="checkbox" />
<span>选项3</span><input type="checkbox" />
<span>12</span>
</body>
被选中的字体变色
<style>
/* 被选中的文字变黄色 */
p::selection{
color: yellow;
}
</style>
<body>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
</body>
