搜尋
首頁web前端css教學CSS選擇器的程式碼實例以及css優先權的程式碼實例

CSS選擇器的程式碼實例以及css優先權的程式碼實例

不言
不言
Aug 09, 2018 pm 05:06 PM
css選擇器

這篇文章帶給大家的內容是關於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 id="设置H-标签的字体颜色为绿色">设置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 id="标题">标题</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 id="标题">标题</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 id="标题">标题</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 id="标题">标题</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優先權的程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
丟失的CSS技巧cohost.org丟失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在這篇文章中，布萊克·莫里（Blackle Mori）向您展示了一些駭客，同時試圖推動同位HTML支持的極限。如果您敢於使用這些，以免您也被標記為CSS罪犯。

光標的下一個CSS樣式光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

具有CSS的自定義光標很棒，但是我們可以將JavaScript提升到一個新的水平。使用JavaScript，我們可以在光標狀態之間過渡，將動態文本放置在光標中，應用複雜的動畫並應用過濾器。

世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球，但CSS的靈活性和力量的增加，可以懷疑Lee＆Aver Lee有一天會成為一種

使用CSS背景過濾器進行UI效果使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器，並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

微笑嗎？微笑嗎？Apr 23, 2025 am 09:57 AM

好吧，事實證明，SVG的內置動畫功能從未按計劃進行棄用。當然，CSS和JavaScript具有承載負載的能力，但是很高興知道Smil並沒有像以前那樣死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，讓＃039;跳上文字包裝：Safari Technology Preview In Pretty Landing！但是請注意，它與在鉻瀏覽器中的工作方式不同。

CSS-tricks編年史XLIIICSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重點介紹了年鑑，最近的播客出現，新的CSS計數器指南以及增加了幾位新作者，這些新作者貢獻了有價值的內容。

tailwind的@Apply功能比聽起來更好tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

在大多數情況下，人們展示了@Apply的@Apply功能，其中包括Tailwind的單個property實用程序之一（會改變單個CSS聲明）。當以這種方式展示時，@Apply聽起來似乎很有希望。如此明顯

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
4 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
4 週前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前ByDDD
Inzoi：如何申請學校和大學
3 週前ByDDD
顯示更多

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小，語法高亮，不支援程式碼提示功能

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7746
15
Java教學
1643
14
CakePHP 教程
1397
52
Laravel 教程
1291
25
PHP教程
1234
29
顯示更多