本文详细介绍了CSS选择器的各类用法，包括简单选择器（标签选择器、类选择器、ID选择器）、复杂选择器（群组选择器、属性选择器、后代选择器、子元素选择器、兄弟选择器、交集选择器）以及伪类和伪元素选择器。此外，还讲解了选择器的优先级规则和元素的显示与隐藏技巧，如`display:none`实现元素隐藏。最后，通过实例展示了菜单栏的动态效果和折纸效果的CSS实现。
什么叫选择器？
能够选中的要设置css样式的元素的某些符号，就是选择器。
一、简单选择器
-
标签选择器： 可以使用HTML标签名作为选择器，那么会将页面中所有该标签的元素选中。
-
类选择器：根据元素所属的类别来选中元素。所有属于该类的元素都被选中。
（1）如何设置元素的类？
在元素的开始标签里面定义class属性，来为标签定义所属的类。
<div class="red c1">hello</div> <div>你好</div> <p class="red"> 你好</p>（2）类选择器该怎么写？
英文的点加类名 如 .class
.red{color:crimson;} .c1{background-color: cyan;}某一个标签可以同时属于多个类，并且所有类的样式都会生效。类名之间使用空格分割。
-
id选择器：
根据元素的id属性值来查找元素。
（1）如何设置元素的id值？
在开始标签中定义标签的id属性。理论上说，元素的id属性值是唯一的。属性值一般不以数字开头。
<div id="d1">你好</div> （2）id选择器如何写？
#id值<style> #d1{border:darkorchid 2px solid;} </style>
二、复杂选择器
1.群组选择器：
（1）将多个选择器组成一组，那么css样式就可以针对该组进行设置。
（2）写法：选择器之间使用逗号分隔就可以形成选择器组。
- 例：
<style>
.c1,#p2,h2{ text-align:center; }
</style>
2.属性选择器分类：
根据该元素是否包含指定的属性或者是所包含的属性必须等于指定的值
- 例
<style>
.c1[type="button"]{color:red;}
</style>
</head>
<body>
<input class="c1" type="text" name="" id="">
<input class="c1" type="button" name="" id="" value="点击我">
<div class="c1">hello</div>
</body>
3.后代选择器
（1）选中某个元素内部包含的所有元素。包括直接包含和间接包含。
（2）写法：选择器1 选择器2 两者之间用空格分隔
<style>
div p{
color: red;
}
</style>
<body>
<div>
<p>p1</p>
<h2>
<p>p2</p>
</h2>
</div>
<p>p3</p>
</body>
4.子元素选择器
子元素选择器：一个元素的直接后代
格式：父元素选择器>子元素选择器
表示选中被父元素直接包含的那些元素。
<head>
<style>
h2>p{
color:red
}
</style>
</head>
<body>
<div>
<h2>
<p> 这是最里边的段落p标签</p>
</h2>
</div>
</body>
5.兄弟选择器
格式：当前元素的选择器-该元素的兄弟选择器
功能：选中当前元素的后面的紧挨着兄弟选择器选中的那些元素。
p~.red
选择p标签后面的类名为red的元素
6.紧邻兄弟选择器
功能：选中当前元素的后面的紧挨着兄弟选择器选中的那些元素。
格式：当前元素的选择器+紧邻兄弟选择器
p~.red
选择直接跟在p标签后面的类名为red的元素
7.交集选择器
选择器1和选择器2之间没有任何的空格或符号
p.red
要求：选择器1必须是标签选择器，选择器2必须是类选择器或id选择器
三、伪类选择器
常用的伪类
| 伪类名 | 描述 |
|---|---|
| :link 1 | 鼠标没放上之前链接的样式 |
| :visited 4 | 访问过的超链接状态 |
| :focus | 用于元素成为焦点的时候，常用于表单元素 |
| :hover 2 | 用于鼠标在元素上，而尚未触发或点击它的时候，例如鼠标指针可能停留在一个超链接上， :hover 就会指示这个超链接 |
| :active 3 | 按住鼠标左键不松开的样式，这个状态特殊短暂。 |
- 案例1
<style>
a:link{color:red;} /*鼠标没放上之前链接的样式*/
a:visited{color:black;} /*访问过的超链接状态*/
a:hover{color:green;} /*鼠标停留的状态*/
a:active{color:yellow;} /*按住鼠标不松开的样式*/
.c1:link,.c1:visited,.c1:hover,.c1:active{ /*网易e状态*/
color:black;
text-decoration: none;
}
</style>
<body>
<a href="http://www.sina.com">新浪</a>
<a class="c1" href="http://www.163.com">网易</a>
</body>
- 案例2
<style>
input[type="text"]:focus{border-color: blue;}
input:hover{background-color: yellow;}
div:hover{background-color: red;}
</style>
<body>
<input type="text">
<input type="button" value="点击我" name="" id="">
<div>这是div</div>
</body>
常用的伪元素
伪元素选择器的使用方法如下：
选择器:伪元素{属性名 ：属性值；属性名 ：属性值；…}
其中，选择器可以是标签选择器、id选择器、类选择器、复杂选择器都可以。
常用的伪元素如下表所示：
| 伪元素名 | 描述 |
|---|---|
| ::first-letter | 向文本的第一个字母添加特殊样式，与块级元素关联 |
| first-line | 向文本的首行添加特殊样式 |
| ::before | 在元素之前添加内容，默认地，这个伪元素是行内元素 |
| ::affter | 在元素之后添加内容 |
content: 在before和after中要新增的内容。
! important 最高优先级
四、选择器的优先级
CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2："直接样式"比"祖先样式"优先级高。
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：
CSS 优先规则4：及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
元素的显示与隐藏
元素的显示方式都有哪些？
- 不显示
- 块级显示
- 行内显示
- 行内块显示
元素的隐藏
display:none
<style>
#d1{display: none;}
</style>
</head>
<body>
<div id="d1">hello</div>
</body>
使用display属性为none，定义二级菜单的隐藏效果。
display:block 块级显示
display:inline 行内显示
display:inline-block 行内块显示
例题：纵横菜单条的制作
- 纵向菜单条
<style>
ul{list-style: none; padding: 0px; width: 100px;text-align:center;}
.one ul {display: none; background-color: #cccccc;}
.one:hover ul{display: block; cursor:pointer;}
.one:hover{cursor: pointer;}
.one{background-color: gray;}
</style>
- 横向菜单条
<style>
#outer{list-style: none; padding:0px; width: 300px; text-align:center;}
.one ul {display:none; background-color: #cccccc; list-style: none;
padding: 0px;}
.one:hover ul{display: block; cursor: pointer;}
.one{background-color: gray; display:inline-block; vertical-align:top ;}
</style>
- body部分
<body>
<ul>
<li class="one">
一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="one">
一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="one">
一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
案例2 ：折纸效果
<style type="text/css">
div{
background-color:sandybrown;
height: 80px;
width: 100px;
}
span{
border: 20px solid;
border-color:white sienna sienna white;
display:inline-block;
}
div:hover span{
border-color:sandybrown;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
tips ：div嵌套span边框border是一个〼 ； ╳形状
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
