08-HTML样式属性关系选择器-5

样式选择器

内嵌样式

  • 内嵌存在问题
    • 满屏都是样式，不方便阅读
    • 结构与样式混淆，不方便修改样式
    • 重复性书写

内联样式

基本CSS选择器

  • 选择器类型：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

 

  •  作业习题

 

  • 代码演示

 

 

属性选择器[]

 

 

  •  配置属性选择器前
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="http://www.baidu.com" title="搜索 - 百度">百度搜索</a>
        <hr>
        <a href="http://www.google.com" title="搜索 - 谷歌">谷歌搜索</a>
        <hr>
        <a href="http://www.python-XP.com" title="搜索 - python-XP">Python-XP手册</a>
        <hr>
        <input type="email" name="" id="" value="" />
        <hr>
        <input type="checkbox" name="likely" id="" value="" />
        <input type="checkbox" name="likely" id="" value="" />
        <hr>
        <input type="checkbox" name="city" id="" value="" />
        <input type="checkbox" name="city" id="" value="" />

    </body>
</html>
  • 配置属性选择器后
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            [href^="http"] {
                color:red;
                font-size:24px;
            }
            [href*="baidu.com"] {
                font-size:14px;
            }
            [href*="google.com"] {
                text-decoration: none;
            }
            [title="搜索"] {
                border: 1px solid #008000;
            }
            [type="email"] {
                background: #F0ED50;
                width: 300px;
                height: 50px;
                border-block-color: red;
            }
            [type="checkbox"] {
                width: 40px;
                height: 40px;
            }
            [name="likely"] {
                box-shadow: 1px 1px 3px 3px solid #008000;
            }
        </style>
        
    </head>
    <body>
        <a href="http://www.baidu.com" title="搜索 - 百度">百度搜索</a>
        <hr>
        <a href="http://www.google.com" title="搜索 - 谷歌">谷歌搜索</a>
        <hr>
        <a href="http://www.python-XP.com" title="搜索 - python-XP">Python-XP手册</a>
        <hr>
        <input type="email" name="" id="" value="" />
        <hr>
        <input type="checkbox" name="likely" id="" value="" />
        <input type="checkbox" name="likely" id="" value="" />
        <hr>
        <input type="checkbox" name="city" id="" value="" />
        <input type="checkbox" name="city" id="" value="" />

    </body>
</html>
  • 作业习题

 

  • 代码演示

 

 

关系选择器

  • html层级关系

    • 后代选择器(以空格     分隔)
    • 子元素选择器(以大于 > 号分隔）
    • 相邻兄弟选择器（以加号 + 分隔）
    • 普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器

  • body—>div id=nav—>ul—>li
  • body—>div id=main—>ul—>li
  • 代码演示1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        body li {
            font-weight: bold;
        }
        #nav li {
            float: left;
            list-style: none;
            width: 100px;
        }
        #nav ul {
            overflow: hidden;
        }
        #main li {
            color: red;
        }
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a href="./">首页</a></li>
                <li><a href="./">新闻</a></li>
                <li><a href="./">关于我们</a></li>
                <li><a href="./">在线留言</a></li>
            </ul>
        </div>
        <div id="main">
            <ul>
                <li>新闻第一条</li>
                <li>新闻第二条</li>
                <li>新闻第三条</li>
                <li>新闻第四条</li>
            </ul>
        </div>
    </body>
</html>

子代选择器

  • body—>div id=main
    • div id=main—>ul
      • ul—>li
  • body—>div id=nav
    • div id=nav—>ul
      • ul—>li

  • 代码演示2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        body li {
            font-weight: bold;
        }
        #nav>ul {
            overflow: hidden;
        }
        #nav>ul>li {
            float: left;
            list-style: none;
            width: 100px;
        }
        #nav>ul>li>ul {
            margin-left: 0;
            padding-left: 0;
            width: 100px;
        }
        #nav>ul>li>ul>li {
            padding-left: 0;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            list-style: none;
        }
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a href="./">首页</a></li>
                <li><a href="./">新闻</a>
                <!--子菜单部分-->
                    <ul>
                        <li>最新新闻</li>
                        <li>公司活动</li>
                    </ul>
                </li>
                <li><a href="./">关于我们</a></li>
                <li><a href="./">在线留言</a></li>
            </ul>
        </div>
        <div id="main">
            <ul>
                <li>新闻第一条</li>
                <li>新闻第二条</li>
                <li>新闻第三条</li>
                <li>新闻第四条</li>
            </ul>
        </div>
    </body>
</html>

兄弟选择器

  • body<——>body
    • div id=nav<——>div id=mian
    • ul<——>ul【原因是父代不一样】
    • ul
      • li<——>li
    • ul
      • li<——>li
  • 代码演示1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* ~，first(新闻第一条)后面所有的li兄弟 */
        #first~li {
            text-decoration: underline;
        }
        /* +，后面紧邻的li兄弟 */
        #first+li {
            color: red;
        }
        #second-li {
            border: 1px solid #0000FF;
        }
        #news+div {
            color: red;
        }
        #news+ol {
            color: blue;
        }
        #steps+div {
            color: orange;
        }
        #steps+ul {
            color: red;
        }
    </style>
    <body>
        <div id="main">
            <ul id="news">
                <li id="first">新闻第一条</li>
                <li id="second">新闻第二条</li>
                <li>新闻第三条</li>
            </ul>
            <ol id="steps">
                <li>第一步</li>
                <li>第二步</li>
                <li>第三步</li>
            </ol>
            <div>
                Python全栈课程迅速提升你的Python开发能力
            </div>
        </div>
    </body>
</html>
  • 后代选择器作业习题

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        body dl {
            font-weight: bold;
        }
        nav a {
            float: left;
        }
        #main dt {
            color: dodgerblue;
        }
    </style>
    <body>
        <div id="nav">
                <a href="./">首页</a>
                <a href="./">新闻</a>
                <a href="./">关于我们</a>
                <a href="./">在线留言</a>
        </div>
        <div id="main">
            <dl>
                <dt>Python的数字类型</dt>
                    <dd>数字类型的值为整数、浮点数</dd>
                <dt>Python的字符串类型</dt>
                    <dd>字符串类型字符组成，在ascii码中规定了128个字符</dd>
                <dt>Python的字典类型</dt>
                    <dd>字典类型由key、value键值对组成</dd>
                <dt>Python的集合</dt>
                    <dd>集合使用set表示</dd>
            </dl>
        </div>
    </body>
</html>
  • 子代选择器作业习题

  • 代码演示

     

 

 

伪类选择器

A标签伪类选择器—提高用户使用体验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        a{
            font-size: 18px;
            color: red;
        }
        /* 初始链接状态 */
        #nav2>a:link{
            color: #008800;
        }
        /* 已浏览过链接状态 */
        #nav2>a:visited{
            color: #0088ff;
        }
        /* 鼠标浮动上去状态 */
        #nav2>a:hover{
            color: #ff8800;
        }
        /* 鼠标点按状态 */
        #nav2>a:active{
            color: #666;
        }
        /* 其他元素也可以使用hover */
        #main{
            margin: 50px;
            border: 1px solid #FF8800;
            width: 300px;
            height: 300px;
        }
        #main:hover{
            border-radius: 50%;
        }
    </style>
    <body>
        <!--a标签伪类-->
        <h3>无伪类样式定义</h3>
        <div id="nav1">
            <a href="#1">link_1</a>
            <a href="#2">link_2</a>
            <a href="#3">link_3</a>
            <a href="#4">link_4</a>
        </div>
        <h3>进行了伪类样式定义</h3>
        <div id="nav2">
            <a href="#1">link_1</a>
            <a href="#2">link_2</a>
            <a href="#3">link_3</a>
            <a href="#4">link_4</a>
        </div>
        <div id="main">
            鼠标移上后可以变为圆
        </div>
    </body>
</html>
    

child伪类选择器—任意选择其中一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* 表示news选择器的li第一条 */
        #news>li:first-child{
            color: red;
        }
        /* 表示包含blue的第一条 */
        .blue:first-child{
            font-weight: bold;
        }
        /* steps下li下的任意一条,(N)中为第N条 */
        #steps>li:nth-child(2){
            color: orange;
        }
        /* 表示steps选择器下li的最后一条 */
        #steps>li:last-child{
            color: red;
        }
    </style>
    <body>
        <div id="main">
        <ul id="news">
            <li class="first blue">新闻第一条</li>
            <li class="second blue">新闻第二条</li>
            <li>新闻第三条</li>
        </ul>
        <ol id="steps">
            <li>第一步</li>
            <li>第二步</li>
            <li>第三步</li>
        </ol>
    </body>
</html>

伪对象选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #news>li:before{
            content: "->";
        }
        #news>li:after{
            content: "-|";
        }
        #steps>li:before{
            content: "-|";
            font-weight: bolder;
            color: red;
        }
        #steps>li:after{
            content: "/";
            color: red;
        }
        /* 表示news选择器的li第一条 */
        #news>li:first-child{
            color: red;
        }
        /* 表示包含blue的第一条 */
        .blue:first-child{
            font-weight: bold;
        }
        /* steps下li下的任意一条,(N)中为第N条 */
        #steps>li:nth-child(2){
            color: orange;
        }
        /* 表示steps选择器下li的最后一条 */
        #steps>li:last-child{
            color: red;
        }
    </style>
    <body>
        <div id="main">
        <ul id="news">
            <li class="first blue">新闻第一条</li>
            <li class="second blue">新闻第二条</li>
            <li>新闻第三条</li>
        </ul>
        <ol id="steps">
            <li>第一步</li>
            <li>第二步</li>
            <li>第三步</li>
        </ol>
    </body>
</html>

状态选择器

  • 代码演示

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* 选中状态 */
        input:focus{
            border: 3px solid #008800;
            background-color: #0088FF;
        }
        [type="checkbox"]::after{
            content: "*";
        }
        [type="checkbox"]:checked:after{
            background-color: #f00;
            content: "/";
        }
    </style>
    
    <body>
        <h1>欢迎注册有缘相见网</h1>
        <table border="" cellspacing="" cellpadding="">
            <tr>
                <th>姓名</th>
                <td><input type="" name="" id="" value="" /></td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    <label>男</label>
                    <input type="radio" name="radio" checked >
                    <label>女</label>
                    <input type="radio" name="radio" checked >
                </td>
            </tr>
            <tr>
                <th>爱好</th>
                <td>
                    唱歌
                    <input type="checkbox" name="" id="" value="" />
                    睡觉
                    <input type="checkbox" name="" id="" value="" />
                </td>
            </tr>
        </table>
    </body>
</html>
  • 作业习题

  •  代码演示

 

posted @ 2021-03-03 20:16  西瓜的春天  阅读(81)  评论(0)    收藏  举报