Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Codebeispiele für CSS-Selektoren und Codebeispiele für CSS-Prioritäten

不言
Freigeben： 2018-08-09 17:06:18
Original
1890 Leute haben es durchsucht

Dieser Artikel enthält Codebeispiele für CSS-Selektoren und CSS-Prioritätscodebeispiele. Freunde in Not können darauf verweisen. 

<!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>
Nach dem Login kopieren
/*index.css文件*/
 
p {
    /* 设置字体大小为:50像素 */
    font-size: 50px;
    /* 设置p标签的背景色为银灰色 */
    background-color: silver;
}
 
span {
    font-size: 28px;
}
Nach dem Login kopieren

css case

<!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>
Nach dem Login kopieren

Platzhalterauswahl

<!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>
Nach dem Login kopieren

CSS-Selektor

<!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>
Nach dem Login kopieren

Klassenselektor

<!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>
Nach dem Login kopieren

Selector Umfassende Übung 

<!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>
Nach dem Login kopieren

Zusammengesetzte Auswahl

<!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>
Nach dem Login kopieren

Untergeordnete Elementauswahl

<!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>
Nach dem Login kopieren

Attributselektor

<!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>
Nach dem Login kopieren

Pseudoklassenselektor

<!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>
Nach dem Login kopieren

Pseudoelementselektor 

<!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>
Nach dem Login kopieren

Eigenschaften von 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>
Nach dem Login kopieren

Priorität von 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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Wie implementiert man einen benutzerdefinierten Bildlaufleistenstil in CSS3? (Code)

Welche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in häufig verwendete CSS-Selektoren

Das obige ist der detaillierte Inhalt vonCodebeispiele für CSS-Selektoren und Codebeispiele für CSS-Prioritäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
css选择器
Quelle：php.cn
Vorheriger Artikel：So implementieren Sie die 2D-Konvertierung in CSS (Beispiel) Nächster Artikel：So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code)
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wählen Sie Woocommerce-bezogene Produkte mithilfe einer benutzerdefinierten Taxonomie mit 3-Ebenen-Hierarchie aus Ich habe einen Woocommerce-Shop mit der benutzerdefinierten Klassifizierung „Sport“. Die K...
Aus 2024-04-06 20:05:30
0
1
544
MySQL: „Wählen Sie Text aus... als <Variable hier oder Unterabfrage>' Ich habe die folgende Tabelle mit den folgenden Daten: id Textsprache 1 Deutscher Text Deu...
Aus 2024-04-06 19:25:54
0
2
529
Das Eingabeelement konnte nicht von der Website abgerufen werden Ich versuche also, ein Eingabeelement von Twitter abzurufen, aber wenn ich es ausführe, er...
Aus 2024-04-06 18:59:57
0
1
442
So aktivieren Sie mehrere Kontrollkästchen in Reactjs Ich habe eine Liste mit Optionen, in der ich mehrere Kontrollkästchen aktivieren möchte, k...
Aus 2024-04-06 18:55:21
0
1
396
Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...
Aus 2024-04-06 17:46:54
0
1
355
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage