1215—css有三种引入到html文档中的方式、选择器的用法 - 每日作业

首页 > 博客列表 > 1215—css有三种引入到html文档中的方式、选择器的用法

博主信息

博文 64

粉丝 2

访问量 58964

专题推荐

更多>

1.实例演示css规则的三种引入到html文档中的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入规则</title>
    <style>
        h2{
            background-color: lightblue;
        }
    </style>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <h2>css引入规则</h2>
    <div style="background-color: lightgreen;">
    <p>1.内部样式：仅对当前文档的元素有效，使用style标签  </p>
    <p> 2.外部样式：适用于所有引入的css样式表的html文档，使用link标签</p>  
    <p>3.行内样式：使用于当前元素中的指定元素，使用style属性</p> 
    </div>  
</body>
</html>

2.实例演示标签选择器，class选择器,id选择器,上下文选择器，结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        li{
            background-color: lightgreen;
        }
        .cc{
            background-color: lightgrey;
        }
        #bb{
            background-color: lightsalmon;
        }
        ol li{
            background-color: lightgray;
        }
        body>ol>li{
            color:blue;
        }
        .start+li{
            background-color: chocolate;
        }
        .all~li{
            color:red;
        }
    </style>
</head>
<body>
    <ul>简单选择器
        <li>标签选择器：返回一组</li>
        <li class="cc">类选择器：返回一组</li>
        <li id="bb">id选择器：返回一个</li>
    </ul>
    <ol>上下文选择器
        <li>后代选择器</li>
        <li class="start">子元素选择器：仅父子层级</li>
        <li class="all">同级相邻选择器：仅选中与之相邻的第一个兄弟元素</li>
        <li>1.空格：所有层级</li>
        <li>2.>：父子级</li>
        <li>3.+：相邻的兄弟</li>
        <li>3.~：相邻的所有兄弟</li>
    </ol>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
</head>
    <style>
        /* 选择第几个选择 */
        ul li:nth-of-type(2){
            background-color: lightgrey;
        }
        /* 选择所有元素 */
        ul li:nth-of-type(1n){
            background-color: lightseagreen;
        }
        /* 选择第四个以后所有元素 */
        ul li:nth-of-type(n+4){
            background-color: lightpink;
        }
        /* 反向选择，选择后两个 */
        ul li:nth-last-of-type(-n+2){
            background-color: lightgreen
        }
        /* 选择所有为偶数的元素 */
        ul li:nth-of-type(2n){
            background-color: lightcoral
        }
        /* 选择所有为奇数的元素 */
        ul li:nth-of-type(2n+1){
            background-color:white
        }
        /* 选择第一个的元素 */
        ul li:first-of-type{
            background-color:lightsalmon
        }
        /* 选择所最后一个的元素 */
        ul li:last-of-type{
            background-color:lightsalmon
        }
        ul li:only-of-type{
            background-color:lightskyblue
        }
    </style>
<body>
    <ul>
        <li>1.匹配任意位置的元素：nth-of-type（an+b）(an是起点，b是偏移量，n=（0.1.2.3……）)</li>
        <li>2.反向选择任意元素：nth-last-of-type(an+b)</li>
        <li>3.选择所有为偶数的元素：nth-of-type(2n)(也可以用nth-of-type(even))，选择所有为奇数的元素：nth-of-type(2n+1)(也可以用nth-of-type(odd)</li>
        <li>4.选择第一个元素：first-of-type</li>
        <li>5.选择最后一个元素：last-of-type</li>
        <li>6.如果只想匹配元素中的唯一子元素，用：only-of-type</li>
    </ul>
    <ul>
        <li>
            only-of-type
        </li>
    </ul>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1208软件的安装和标签的使用

2020-12-10 11:12:03

1.实例演示css规则的三种引入到html文档中的方式

2.实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器

伪类选择器

2.实例演示标签选择器，class选择器,id选择器,上下文选择器，结构伪类选择器