CSS Tutorial

Code examples for CSS selectors and code examples for CSS priorities

不言

Aug 09, 2018 pm 05:06 PM

css selector

This article brings you code examples about CSS selectors and CSS priority code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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 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 id="设置H-标签的字体颜色为绿色">设置H1标签的字体颜色为绿色</h1>
    <span>设置span标签的文本为14像素</span>
</body>

</html>

Wildcard selector

<!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 selector

<!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>

Class selector

<!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>

Selector comprehensive exercise

<!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>

Compound selector

<!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>

Child element selector

<!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>

Attribute selector

<!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>

Pseudo class selector

<!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>

Pseudo-element selector

<!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>

Characteristics of 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>

Priority of 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>

Related recommendations ：

How to implement custom scroll bar style in css3? (Code)

#What are the types of css selectors? A brief introduction to commonly used css selectors

The above is the detailed content of Code examples for CSS selectors and code examples for CSS priorities. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Simulating Mouse MovementApr 22, 2025 am 11:45 AM

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides

Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AM

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th

Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AM

I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a

In Defense of the Ternary StatementApr 22, 2025 am 11:25 AM

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I

Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AM

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making

Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AM

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us

Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AM

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AM

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks agoByDDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Hot Topics

Where is the login entrance for gmail email?

7638

CakePHP Tutorial

1391

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150