css学习第二天
复合选择器(四种)
交集选择器:多个选择器的公共部分
- 通配符不与其他选择器相交，因为通配符选择器所有的元素。
- id选择器不与其他选择器相交，因为id是唯一的。
- 标签不与标签相交
- 一般都是标签与类名相交，或者类名与类名相交。
<style>
aside.list{
co1or:☐#ff0000;
}
style>
<body>
<header class="list">我是网页的第一个侧导航aside>
<aside class="list">我是网页的第二个侧导航aside>
body>
并集选择器:多个选择器的所有部分
格式：
选择器1，
选择器2，
选择器3 {
}
<styel>
.content,
#navBox,
footer {
text-align: center;
color: orange;
letter-spacing: 10px;
font-style: oblique;
}
style>
<body>
<section>
<article class="content">我是文章内容标签article>
<nav id="navBox">我是导航标签nav>
section>
<footer>我是底部区域footer>
body>
子代选择器：选中亲儿子（直接子元素）
格式： 父元素 > 子元素
<styel>
div > h2{
font-family: '黑体';
color: blue;
}
style>
<body>
<div class="box">
<h2>我是box中的h2h2>
div>
body>
后代选择器：选中所有的子元素（包括后代孙子元素…）
格式：祖先元素 后代元素
<style>
ul li {
text-decoration: underline;
text-align: center;
}
style>
<body>
<ul>
<li>我是ul的第一行li>
<div>
<p>我是ul中的li中标的pp>
<ol>
<li>我是ul中的第二个li中的ol的第一行li>
ol>
div>
<li>我是ul的第三行li>
ul>
body>
总结 ：子代肯定是后代，后代不一定是子代
伪类选择器：链接标签a的伪类，
格式 a：伪类名
:link 链接前
:over 鼠标移入时
:acttive 鼠标单击时
:visited 鼠标访问后
总结：非标签 :hover， :active都是可以使用的,但是 :link， :active都不可以
<style>
a:link {
color: black;
}
a:hover {
color: #ff0000;
font-style: italic;
}
a:active {
color: green;
font-weight: bold;
}
a:visited {
color: brown;
}
style>
<body>
<a href="https://www.baidu.com" class="linkBox">百度一下a>
body>
小提示：清除浏览器快捷键 ：Ctrl + shift +del
<style>
a {
text-decoration: none;
}
style>
<body>
<a href="https://www.baidu.com" class="linkBox">百度一下a>
body>
- 去除列表 标签默认的数字和小点
list-style:none
<style>
ul,
ol {
list-style: none;
}
style>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
<ol>
<li>第1li>
<li>第2li>
<li>第3li>
<li>第4li>
ol>
body>
标签的显示模式
块状元素
``
``````
``
``
``````
``