一、属性选择器

1 .E[att^=value]属性选择器

表示p标记中所有的id属性值为”one”字符串开头的元素被选中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器1 ^=</title>
<style type="text/css">
p{
text-indent:2em;
}
p[id^="one"]{
    color:pink;
    font-size:24px;
}
</style>
</head>
<body>
<p id="one">为了看日出，我时常早起，那时天还没亮，周围非常清净，船上只有机器的声音</p>
<p id="two">天空还是一篇蓝，颜色很浅，转眼间天边出现了一道红霞，慢慢的在扩大他的范围，加强他的亮光</p>
<p id="one1">果然一会二，在那个地方出现了太阳的小半边脸，红是真红，却没有亮光，这个太阳好像负着重荷是的一步步慢慢努力上升。到最后终于突破了云霄，完全跳出来海面颜色红的可爱</p>
<p id="two1">有时太阳走进了云端中，他的光线从云里射下来，直射到水面上。这时候要分辨那里是水，那里是天，到也不容易，我一眼就看到了灿烂的亮光。</p>
</body>                                                                                                            
</html>

2 .E[att$ = value]属性选择器

后缀为字符串的被选中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器2 ^=</title>
<style type="text/css">
p{
text-indent:2em;
}
p[id$="main"]{
    color:#36C;
    font-weight:bold;
}
</style>
</head>
<body>
<p id="old1">盼望着，盼望着，春天来了，春天的脚步进了</p>
<p id="old2">小草偷偷的从地理钻出来，嫩嫩的，绿绿的。院子里，田野里，瞧去，一大片一大片满是的。</p>
<p id="oldmain">桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的向下，白的香雪，花里带着甜味儿，闭了眼，书上仿佛已经满是桃儿，星儿，梨儿。</p>
<p id="newmain"。>吹面不寒杨柳风，不错的，像母亲的手抚摸着你，风力带着新番的泥土的气息，混着香草味二，还有各种花的香。</p>
</body>                                                                                                            
</html>

3.E[att*=value] 属性选择器

注意:[id=”demo”] 页面中所有元素* 含有该字符串的被选中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器2 ^=</title>
<style type="text/css">
p[id*="demo"]{
    color:#F0F;
    font-size:24px;
}
</style>
</head>
<body>
<p id="mian1">盼望着，盼望着，春天来了，春天的脚步进了</p>
<p id="newdemo">小草偷偷的从地理钻出来，嫩嫩的，绿绿的。院子里，田野里，瞧去，一大片一大片满是的。</p>
<p id="olddemo">桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的向下，白的香雪，花里带着甜味儿，闭了眼，书上仿佛已经满是桃儿，星儿，梨儿。</p>
<p id="demo1"。>吹面不寒杨柳风，不错的，像母亲的手抚摸着你，风力带着新番的泥土的气息，混着香草味二，还有各种花的香。</p>
</body>                                                                                                            
</html>

二、关系选择器

1.子代选择器

(我是爸爸的子代，是爷爷的后代。)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器2 ^=</title>
<style type="text/css">
/*p strong{
    color:pink;
}  
后代选择器  都会变成粉色
*/
p>strong{
    color:purple;
}
/* 子代选择器:  很重要变紫，  计算机工程学院 不变 */
</style>
</head>
<body>
<p>这个知识点<strong>很重要</strong></p>
<p>青岛城市学院<em><strong>计算机工程学院</strong></em></p>
</body>                                                                                                            
</html>

2.兄弟选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器=</title>
<style type="text/css">
/* 临近兄弟 */
h2+p{  /*h2的临近兄弟   只有李白乘舟将欲变红  */
    color:red;
    font-size:20px;
}
/*普通兄弟*/
h2~p{  /*全都变红*/
    color:pink;
    font-size:24px;
}
</style>
</head>
<body>
<h2>《赠汪伦》</h2>
<p>李白乘舟将欲行,</p>
<p>忽闻岸上踏歌声。</p>
<p>桃花潭水深千尺，</p>
<p>不及汪伦送我情。</p>
</body>                                                                                                            
</html>

三、结构化伪类选择器

1 :root选择器

对所有的页面元素都生效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器=</title>
<style type="text/css">
 :root{
     color:green;
 }
</style>
</head>
<body>
<h2>你站在桥上看风景</h2>
<div>看风景的人在楼上看你</div>
<p>明月装饰了你的窗子</p>
<p>你装饰了别人的梦</p>
</body>                                                                                                            
</html>

2 :not选择器

让他不使用这个元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器=</title>
<style type="text/css">
 body  :not(p){
     color:green;
 }
</style>
</head>
<body>
<h2>你站在桥上看风景</h2>
<div>看风景的人在楼上看你</div>
<p>明月装饰了你的窗子</p>
<p>你装饰了别人的梦</p>
</body>                                                                                                            
</html>

3 :only-child选择器

li的父级元素中有唯一子元素的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器=</title>
<style type="text/css">
li:only-child{
    color:red;
}
</style>
</head>
<body>
<div>
    国内电影
    <ul>
        <li>长金湖</li>
        <li>我和我的父辈</li>
        <li>我和我的祖国</li>
    </ul>
    美国电影
    <ul>
        <li>复仇者联盟</li>
    </ul>
    日本动漫
    <ul>
        <li>火影忍者</li>
        <li>航海王</li>
    </ul>
 </div>
</body>                                                                                                            
</html>

4 first-child和last-child

p标记的父级元素的第一个孩子是不是p，如果是，选中元素，如果不是拉到

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器=</title>
<style type="text/css">
p:first-child{
    color:pink;
    font-size:20px
}
p:last-child{
    color:red;
    font-weight:bold;
}
/*p标记的父级元素的第一个孩子是不是p，如果是，选中元素，如果不是拉到*/
</style>
</head>
<body>
<h3>海子</h3>
<p>《面朝大海春暖花开》</p>
<p>从明天起做个幸福人</p>
<p>喂马劈柴周游世界</p>
<p>从明天起关心粮食和蔬菜</p>
<p>我有一所房子</p>
<p>面朝大海春暖花开</p>
</body>                                                                                                            
</html>

5 nth-child和nth-last-child选择器

last就是从后往前数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> nth-child{}和nth-last-child{}选择器</title>
<style type="text/css">
p:nth-child(2){
    color:pink;
    font-size:20px;
}
/*P标记父级元素的第二个孩子被选中*/
/*如果是p则被选中，不是不选*/
</style>
</head>
<body>
<h3>《面朝大海春暖花开》</h3>
<p>海子</p>
<p>从明天起做个幸福人</p>
<p>喂马劈柴周游世界</p>
<p>从明天起关心粮食和蔬菜</p>
<p>我有一所房子</p>
<p>面朝大海春暖花开</p>
</body>                                                                                                            
</html>

6 nth-last-of-type(n)选择器

父类元素对应的子类元素相同类型第二个被选中，倒着数

7 target选择器

target会突出显示当前活动的锚
(点击那个就显示那个活动的锚)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 3.11 nth-last-of-type(n)选择器{</title>
<style type="text/css">
:target{
    background-color:pink;
}
</style>
</head>
<body>
<p><a href="#one">跳转到内容1</a></p>
<p><a href="#two">跳转到内容2</a></p>
<p>点击上面链接，:target会突出显示当前活动的锚</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="one">内容1</p>
<p id="two">内容2</p>
</body>                                                                                                            
</html>

8 :before选择器，after选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 3.11 nth-last-of-type(n)选择器{</title>
<style type="text/css">
p:before{
    content:"刘建辉";
    color:yellow;
    font-size:24ox;
    font-family:"楷体";
    font-weight:bold;
    }
    /*:before,:after的作用是在不更改html结构的前提下插入内容(可以是文本,url,块级元素，行内元素等等。) */
</style>
</head>
<body>
<p>专注于网页制作，js网页特效，h5移动开发讲解</p>
</body>                                                                                                            
</html>

四、链接伪类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类</title>
<style type="text/css">
a:link,a:visited{
    color:pink;
    text-decoration:none;
}
/*鼠标悬停效果
*/
a:hover{
    color:blue;
    text-decoration:underline;
}
/*鼠标单击不动时状态*/
a:active{
    color:purple;   /*就是单击不动时显示紫色，没展示 */
}
</style>
</head>
<body>
<a href="#">学习首页</a>
<a href="#">学校介绍</a>
<a href="#">系部设置</a>
<a href="#">联系我们</a>
</body>                                                                                                            
</html>

Java 学习笔记

CSS选择器