选择器和二级下拉菜单
文章目录
基本选择器
案列演示代码：
<div class="header">
<div class="center">头部</div>
</div>
<div class="header">
<div class="center">头部</div>
</div>
<div class="footer">底部</div>
<div id="one">id选择器</div>
<div class="one">oen</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
<h1>标题一</h1>
这是没有加任何css修饰的样子：
1.通配选择器
通配选择器 符号*
/* 通配选择器 */
* {
margin: 0;
padding: 0;
list-style: none;
color:red;
}
这里就将所有标签的内容的文字设置为红色字体了
2. id选择器
id选择器 #
/* id选择器：唯一值 规范*/
#one {
background-color: rosybrown;
}
这里是就是根据标签id进行选择，只对id为“one”的标签进行css渲染，背景颜色设置为rosybrown的颜色，其他的标签还是保持原来的样式
3. 类名选择器
类名选择器 .
/* 类名选择器 ：选中文件中所有具有该类名的元素 */
.center {
color: #000;;
/* 水平自适应居中 */
margin: 0 auto;
width: 500px;
background-color: red;
}
只对标签类名为“center”的标签进行css渲染，字体颜色设置为#000的颜色，标签设置为水平自适应居中，宽度为500像素，背景颜色为红色，
4. 逗号/并且选择器
逗号/并且选择器 ，
/* 逗号选择器：同时选中多个元素 */
body,ul,li,h1 {
margin: 0;
list-style: none;
padding: 0;
}
逗号/并且选择器，顾名思义就是可以进行多选，例如这个同时选择了ul，li和h1三类标签，将字体颜色设置为蓝色
5. 标签选择器
标签选择器 标签名
/* 标签选择器 ：选择文件中该标签所对应所有的元素 */
div {
font-size: 30px;
}
根据标签来进行渲染，选择所有的div标签，将字体大小设置为30像素
6. 组合选择器
组合选择器
/* 组合选择器 先选中第一个选择器选择的元素，再选中第二个选择器中的元素 */
div.one{
background-color: royalblue;
}
组合选择器，就是可以将多个选择器进行组合使用，例如div .one 根据从左到右的解读顺序为，选择div标签下的类名为one的标签，把背景颜色设置为粉色
层次选择器
案列代码：
<ul class="outer">
<li>卫衣</li>
<ul>
<li>格子衫</li>
<li>牛仔裤</li>
</ul>
<li class="inner">帽子</li>
<li>连衣裙</li>
<li>衬衫</li>
</ul>
这是没有添加任何css样式的样子
1.子代选择器
子代选择器 .one > .two(选中类名为one下面的第一代类名为two的)
/* 子代选择器，先选中第一个选择器对应的元素，然后选中该元素下面第一代选择器选中的元素 */
.outer > li {
color: saddlebrown;
}
这里就只是选择类名为outer下面的第一代的li，而第一个li下面的ul里面还有的li并不是outer的子代，只能说是后代，
2.后代选择器
后代选择器 .one .two
/* 后代选择器 先选中第一个选择器所对应的元素，然后选中该元素下面所有的第二个选择器选中的元素 */
.outer li {
background-color: red;
}
这里就是将类名为outer下面的所有li标签都进行设置，不管是子代，还是子代的子代等等，都是它的后代。
3.通用兄弟选择器
通用兄弟选择器 p~c
/* p ~ c：通用兄弟选择器 先选中第一个选择器选中的元素，然后选中该元素后面的所有元素 */
.inner ~ li {
color:pink;
}
选中类名为inner的元素，以及后面的所有li元素，字体设置为粉色
4.相邻兄弟选择器
相邻兄弟选择器 p+c
/* p + c:相邻兄弟选择器 先选中第一个选择器选中的元素，然后选中该元素后面的第一个元素*/
.inner + li {
font-size: 40px;
}
这里就是首先选中inner的元素，然后选中与他相邻的第一个li元素，后面的li元素不会选中，字体大小设置为40像素。
二级下拉菜单
有时候我们看到一些网页当你鼠标放上去的时候会出现弹出另外一个菜单，而鼠标移走后又没有了这是怎么回事，这其实就是css里面样式解决的伪元素选择器，下一章就会讲解到，这里先讲解个案例开开胃
案例样式代码：
<body>
<!-- 一级菜单 -->
<ul class="outer">
<li>
<span>第一阶段</span>
<!-- 二级菜单 -->
<ul class="inner">
<li>html</li>
<li>css</li>
</ul>
</li>
</ul>
</body>
这是不添加任何样式的样子：
添加样式：
<style>
.inner {
/* 隐藏元素 */
display: none;
}
/* :hover 光标悬浮*/
.outer span:hover + .inner{
/* 显示元素 */
display: block;
}
</style>
鼠标没有放上去是的显示是这样的：
鼠标放上去之后显示是：
:hover是伪元素选择器，表示光标悬浮在指定标签才进行css渲染，与其同为伪元素的还有:link :active :visited等等，下一章会详细的进行讲解
扫一扫
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
