伪类选择器是CSS中已经定义好了的选择器,不能谁便取名,常用的味蕾选择器是使用在a元素上的几种,如a:link a:visited a:hover a:active
伪元素选择器斌不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种伪元素选择器(first-line, first-letter, berfore ,after)
CSS四种伪元素选择器
<1>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
p:first-line { /*伪元素: 本来p元素的第一行是一句文字,并不是一个元素,但是这里将p元素的第一行伪装成一个元素了,然后给它设置样式; */
font-size: 30px;
font-family: Arial;
color: red;
}
p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素,然后给他设置样式*/
font-size: 3cm;
}
</style>
</head>
<body>
<p>
Aaaaaaaaaaa<br />
bbbbbbbbbbb<br />
ccccccccccc<br />
</p>
</body>
</html>
<2>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p:before { /*在p元素前面追加一个“你好”文字*/
content:"你好!";
}
p:after { /*在p元素后面追加一个“大家好”文字*/
content:"大家好!"
}
</style>
</head>
<body>
<p>
Aaaaaaaaaaa
</p>
</body>
</html>
CSS四个最基本的结构性伪类选择器
1> :root
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
:root { /*将样式绑定到页面的根元素中,所有根元素是指位于文档中最顶层结构的元素,即<html> 即将HTML的背景设置为黄色*/
background-color: yellow;
}
</style>
</head>
<body>
<p>
Aaaaaaaaaaa
</p>
</body>
</html>
2>:not
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:not(.two) { /*排除某个元素; 这里不同于Jquery的伪选择器; 这里括号里是一个“选择器”*/
color:red;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaa</li>
<li class="two">aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
</ul>
</body>
</html>
3>:empty
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:empty { /*将空的li元素隐藏掉*/
display:none;
}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaa</li>
<li></li>
<li>aaaaaaaaaaa</li>
</ul>
</body>
</html>
4>:target
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
:target { /*将目标元素设置一个样式 ;当点击“去到one锚点”后将one锚点的背景颜色设为绿色,当点击“去到tow锚点”的时候将two锚点的背景颜色设为绿色 */
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去到one锚点</a><br>
<a href="#two">去到tow锚点</a><br><br><br>
<a name="one">
中国人中国人中国人中国人中国人<br>
中国人中国人中国人中国人中国人<br>
中国人中国人中国人中国人中国人<br>
中国人中国人中国人中国人中国人<br> <br> <br> <br>
</a>
<a name="two">
美国人美国人美国人美国人美国人<br>
美国人美国人美国人美国人美国人<br>
美国人美国人美国人美国人美国人<br>
美国人美国人美国人美国人美国人<br>
</a>
</body>
</html>
其他的伪类选择器
强调一下:找元素的时候不是找它的外层,而是直接z直接用里层的li,所以我们这里都是直接用找到li元素;
:first-child 找每组第一行; :last-child 找每组最后一行 (每个ul下的li为一组)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
li:first-child { /*找出相同一级中的li元素,然后再找出它们各自的第一个元素,给它设置样式; 比如:url1与url2下面都有li元素,url1下的li元素为一组,url2下面的li为一组,url1下的这一组li元素,与url2下的那一组li元素是同一个级别的。 然后将url1下的那一组li元素的第一个li元素 和url2下的那一组li元素的第一个li元素的背景设置为红色*/
background-color: red;
}
li:last-child { /*找出相同一级中的li元素,然后再找出它们各自最后的那个元素,给它设置样式 (例子:如上)*/
background-color: green;
}
li:nth-child(3) { /*找出相同一级中的li元素,然后再找出它们指定下标的那个元素,给它设置样式 , (例子:如上),注意:下标从1开始的*/
background-color: yellow;
}
</style>
</head>
<body>
<ul id="url1">
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
</ul>
<ul id="url2">
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
</ul>
</body>
</html>
奇偶伪类选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
li:nth-child(even) { /*找出相同一级中的li元素,然后将每组中的偶数设置为红色 (不知为什么和jquery不一样,实验得知:下标从1开始的,所以第一行而奇数,所以第一行是蓝色的,第二行是偶数,所以第二行才是红色的)*/
background-color:red;
}
li:nth-child(odd) { /*找出相同一级中的li元素,然后将每组中的奇数设置为蓝色(不知为什么和jquery不一样,实验得知:下标从1开始的)*/
background-color: blue;
}
</style>
</head>
<body>
<ul id="url1">
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
</ul>
<ul id="url2">
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
</ul>
</body>
</html>
CSS中的奇偶选择器,对比jquery中的奇偶选择器有什么不同
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<ul id="url1">
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
<li>今天天气不错,挺风和日丽的</li>
</ul>
<ul id="url2">
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
<li>人生能有几回搏,今天不博何日博</li>
</ul>
</body>
</html>
<script type="text/javascript">
$(function () {
$("li:even").css("background-color", "red"); //jquer这个奇偶选择器的下标从开始的,0是偶数,所以第一行为红色,而且它是获取页面所有的li,将所有的li视为一组,然后查找奇偶,它与CSS的li:nth-child(odd), 或li:nth-child(even) 不一样。(css是将每个ul下面的li都各自视为一组 而且每组元素的下标都是从1开始的)
$("li:odd").css("background-color", "blue");
})
</script>
自定义隔N行进行变色
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
p:nth-child(3n+4) { /*我们用:nth-child(even) 或者:nth-child(odd) 可以找出奇偶元素,但是假如我想每隔3个元素就变色呢?*/
/*3n表示每隔3个元素,4表示从第四个元素开始,每隔三个元素就将他们的颜色设为红色*/
background-color:red
}
</style>
</head>
<body>
<div>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
</div>
</body>
</html>
找同一类型的元素::nth-of-type(n) | :nth-last-of-type(n)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*最外层的div里有4个p元素,2个div元素*/
p:nth-child(4) {
background-color:red; /*我们想将第四个p元素的背景颜色设为红色,可是发现大的div里面的第四个元素是一个div元素,并不是一个p元素,所以我们这样根本就没有取到第四个p元*/
}
p:nth-of-type(4) { /*找出大的div里的同一类型的元素,排除其他类型的元素;(注意:下标从1开始)*/
background-color:blue; /*这样我们就找到了大的div里的第四个p元素,然后将它的背景颜色设为蓝色*/
}
p:nth-last-of-type(3) { /*找出大的div里的同一类型的元素,排除其他类型的元素 然后 从后往前数,找到第3个p元素 (注意:下标从1开始)*/
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<p>今天天气还可以</p>
<div>是啊,还不错,要出去走走</div>
<div>是啊,还不错,要出去走走</div>
<p>今天天气还可以</p>
</div>
</body>
</html>