CSS选择器的代码实例以及css优先级的代码实例

css教程评论1K views阅读模式

本篇文章给大家带来的内容是关于CSS选择器的代码实例以及css优先级的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>CSS入门第一节</title>
 
    <!-- 嵌入样式  页内样式-->
    <style>
        p {
            color: yellowgreen;
        }
    </style>
</head>
 
<body>
    <!-- 内敛样式 -->
    <div style="color: red; font-size: 24px; border: 1px solid black;">
        我是DIV
    </div>
    <p>
        我是段落标签
    </p>
 
    <h1>
        我是大标题
    </h1>
</body>
 
</html>
/*index.css文件*/
 
p {
    /* 设置字体大小为:50像素 */
    font-size: 50px;
    /* 设置p标签的背景色为银灰色 */
    background-color: silver;
}
 
span {
    font-size: 28px;
}

css案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css练习</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<style>
    h1 {
        color: green;
    }
</style>

<body>
    <p style="background-color: red;">设置p标签的背景色为红色</p>
    <h1>设置H1标签的字体颜色为绿色</h1>
    <span>设置span标签的文本为14像素</span>
</body>

</html>

通配符选择器

<!DOCTYPE html>
<!-- 通配符选择器 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS选择器</title>
</head>
<style>
    * {
        color: #3cd;
    }
    /* 通配符选择器：统统都被匹配上，可以选择到所有的标签 */
</style>

<body>
    <h1>标题</h1>
    <p>
        内容
    </p>

    <ul>
        <li>北京</li>
        <li>南京</li>
        <li>山东</li>
    </ul>
    <strong>这是strong标签</strong><br/>
    <span>demo</span>
</body>

</html>

css选择器

<!DOCTYPE html>
<!-- 标签选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS选择器</title>
</head>
<style>
    /* 标签选择器 */

    p {
        color: red;
    }

    li {
        background-color: gold;
    }

    span {
        font-size: 50px;
    }

    /* id选择器 */

    /* id命名规范:必须以字母开头(不限制大小写),然后可以包含数字/字母/下划线/连接符- */

    #li-beijing {
        background-color: silver;
    }

    #li-shanghai {
        background-color: aquamarine;
    }
</style>

<body>
    <h1>标题</h1>
    <p> 内容</p>
    <ul>
        <li id="li-beijing">北京</li>
        <li id="li-shanghai">南京</li>
        <li>山东</li>
    </ul>
    <strong>这是strong标签</strong>
    <br/>
    <span>demo</span>
</body>

</html>

类选择器

<!DOCTYPE html>
<!-- 类选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的类选择器</title>
</head>
<style>
    .lf-p {
        color: green;
    }
    .fl{
        background-color: #cdf;
    }
</style>

<body>
    <h1>标题</h1>
    <p class="p_1"> 段落一</p>
    <p class="lf-p fl"> 段落二</p>
    <p class="lf-p"> 段落三</p>

</body>

</html>

选择器综合练习

<!DOCTYPE html>
<!-- 标签选择器 类选择器 id选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器综合练习</title>
</head>
<style>
    h1 {
        color: red;
        font-size: 30px;
    }

    span {
        font-size: 18px;
    }

    #comt {
        color: yellow;
        /* font-size: 18px; */
    }

    .date {
        color: purple;
        /* font-size: 18px; */
    }

    .articleP{
        font-size: 18px;
        color: blue;
    }
</style>

<body>
    <h1>标题</h1>
    <p>
        <span id="comt">段落</span>
        <span class="date">时间</span>
    </p>
    <p class="articleP">正文</p>
</body>

</html>

复合选择器

<!DOCTYPE html>
<!-- 复合选择器:标签指定式选择器,后代选择器,并集选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        /*
            1.请把li中的class等于current的标签的背景设置为高亮(颜色为蓝色)
            2.请把class为news的ul标签下面的所有的li标签中的文字设置为黑色(#333)
            3.请把体育新闻和财经新闻的文字设置为银灰色
        */

        /* 标签指定式选择器 */

        li.current {
            background-color: lightblue;
        }

        li#home {
            font-weight: bold;
            /*字体加粗*/
        }

        /* 后代选择器 */

        .news a {
            /* color:#333; */
            color: green;
        }

        /* 并集选择器 */

        .f-news a,
        .s-news a {
            color: silver;
        }

        /* 如果两个优先级一致的话,后面的则优先生效 */

        .othernews a {
            color: red;
        }

        /* 并集选择器 */
        html,
        body,
        p,
        dt,
        dl,
        dd,
        ul,
        p {
            padding: 0;
            /* 内边距 */
            margin: 0;
            /* 外边距 */
        }
    </style>
</head>

<body>
    <ul>
        <li id="home"><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li class="current"><a href="#">新闻</a></li>
        <li><a href="#">售后</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <ul class="news">
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
    </ul>

    <dl class="f-news othernews">
        <dt><a href="#">财经新闻</a></dt>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
    </dl>

    <dl class="s-news othernews">
        <dt><a href="#">体育新闻</a></dt>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
    </dl>
</body>

</html>

子元素选择器

<!DOCTYPE html>
<!-- 子选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素选择器</title>
    <style>
        /* 子选择器 */
        p > strong {
            color: red;
        }
    </style>
</head>

<body>
    <p>
        <p>
            <span>段落1</span>
            <span>
                <strong>段落2</strong>
            </span>
            <span>段落3</span>
            <strong>强调标签</strong>
        </p>
    </p>
</body>

</html>

属性选择器

<!DOCTYPE html>
<!-- 属性选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
        span[class] {
            color: green;
        }

        /* 拥有id属性的标签都被选择出来 */
        [id] {
            font-size: 50px;
        }

        span[id="4"] {
            color: yellow;
        }
        
        /* 属性包含选择器 */
        span[class~="demo"] {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <p>
        <span class="cur demo">1</span>
        <span>2</span>
        <span id="3">3</span>
        <span id="4">4</span>
        <span>5</span>
    </p>
</body>

</html>

伪类选择器

<!DOCTYPE html>
<!-- 伪类选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
        a:link {
            color: red;
        }
        
        /* 当链接被访问过了之后,就会添加伪类visited */
        a:visited {
            color: lawngreen;
        }
        
        /* 当鼠标悬停于元素上面的时候,会自动添加伪类:hover */
        a:hover {
            color: #fff;
            background-color: aquamarine
        }
        
        /* 当链接被点击,但是鼠标不要放开的时候, 会自动给连接添加active伪类*/
        a:active {
            color: gold;
        }
        
        /* 遵循LoVe HAte 原则,否则可能无法正常显示*/

        /* 获取到焦点的时候,默认给标签添加focus效果 */
        input:focus{
            color: red;
        }

    </style>
</head>

<body>
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">新闻</a>
    <a href="/">娱乐</a>

    <input type="text" name="" id="">
</body>

</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器</title>
    <style>
        /* 第一个必须是span标签,第二:是第一个孩子 */
        span:first-child {
            color: red;
            font-size: 50px;
        }

        /* 段落的首个字符 */
        p:first-letter {
            font-size: 50px;
            color: green;
        }
        /* 设置一行 */
        p::first-line {
            color: gold;
        }
        
        /* 在标签前面追加内容 */
        #temp::before {
            content:"================";
        }
        
        /* 在标签后面追加内容 */
        #temp:after {
            content:"xxxxxxxxxxxxxxx";
        }
    </style>
</head>

<body>
    <p id="temp">
        <span>一</span>
        <span>二</span>
        <span>三</span>
    </p>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

    <p>张宜成</p>
</body>

</html>

css的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的特性:层叠性和继承性</title>
    <style>
        p {
            color: red;
            font-size: 40px;
        }

        p{
            color: green;
        }

        a{
            color:inherit; /*继承父标签的属性*/
        }
        /* 继承性:父容器设置的样式,子容器也可以享受同等待遇 */
        /* 
            所有字相关的都可以继承,比如:color,text-系列/font-系列/line-系列/cursor
            并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:边框,外边距,内边距,背景,定位,元素宽高属性.
            a标签不继承父标签的字体颜色
        */
    </style>
</head>
<body>
    <p>
        层叠性和继承性
        <span>我是Span标签</span>
        <a href="#">我是a标签,我特立独行</a>
    </p>
    <span>我是Span标签2</span>

</body>
</html>

css的优先级

<!DOCTYPE html>
<!-- 第一原则: CSS优先级从高到低: 内联样式 嵌入样式 外部引入样式 继承样式 默认样式 -->
<!-- 第二原则: ID选择器 > 类(伪类) > 标签 > 继承 > 默认-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 外部引入样式优先级大于继承样式 --><!-- 优先级别可能与嵌入样式互换,如果将link放到style下面,
        则外部引入样式优先于嵌入样式 -->
    <link rel="stylesheet" href="./css/t.css">
    <title>优先级</title>
    <style>
        /* 继承样式大于默认样式 */
        body{
            color: blueviolet;
        }
        /* 嵌入样式大于外部引入 */
        p {
            color: green;
            font-size: 50px;
            background-color: sienna;
        }

        .fs{
            font-style: 400px;
        }

        #tp #atc{
            font-size: 20px;
            /* !important是重要的意思,优先级最高高于内敛样式 */
            color:lightsalmon !important;
        }
    </style>
</head>
<body id="tp">
    <!-- 内联样式优先级大于嵌入样式 -->
    <p id="atc" class="fs" style="color: blue;">
        我是段落
    </p>
</body>
<!-- 综述: -->
<!-- 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式 -->
<!-- important > 内联 > ID > 伪类/类/属性选择 > 标签 > 伪对象 > 通配符 > 继承 -->
</html>

相关推荐：

css3如何实现自定义滚动条样式？（代码）

css选择器有哪些类型？css常用选择器的简单介绍

以上就是CSS选择器的代码实例以及css优先级的代码实例的详细内容，更多请关注css教程其它相关文章！

企鹅博客
  • 本文由 发表于 2019年9月15日 01:54:06
  • 转载请务必保留本文链接：https://www.qieseo.com/362952.html

发表评论