Web Front-end
CSS Tutorial
Code examples for CSS selectors and code examples for CSS priorities
Code examples for CSS selectors and code examples for CSS priorities
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>设置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>标题</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>标题</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>标题</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>标题</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!
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
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to resize HTML textbox
Feb 20, 2024 am 10:03 AM
Setting the size of HTML text boxes is a very common operation in front-end development. This article explains how to set the size of a text box and provides specific code examples. In HTML, you can use CSS to set the size of a text box. The specific code is as follows: input[type="text"
How to adjust a WordPress theme to avoid misaligned display
Mar 05, 2024 pm 02:03 PM
How to adjust WordPress themes to avoid misaligned display requires specific code examples. As a powerful CMS system, WordPress is loved by many website developers and webmasters. However, when using WordPress to create a website, you often encounter the problem of theme misalignment, which affects the user experience and page beauty. Therefore, it is very important to properly adjust your WordPress theme to avoid misaligned display. This article will introduce how to adjust the theme through specific code examples.
What exactly does H5 page production mean?
Apr 06, 2025 am 07:18 AM
H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.
What are the elements in the excluded section of css selector
Apr 06, 2024 am 02:42 AM
The :not() selector can be used to exclude elements under certain conditions, and its syntax is :not(selector) {style rule}. Examples: :not(p) excludes all non-paragraph elements, li:not(.active) excludes inactive list items, :not(table) excludes non-table elements, div:not([data-role="primary"]) Exclude div elements with non-primary roles.
What is css selector priority
Apr 25, 2024 pm 05:30 PM
CSS selector priority is determined in the following order: Specificity (ID > Class > Type > Wildcard) Source order (Inline > Internal style sheet > External style sheet > User agent style sheet) Declaration order (latest declarations take precedence) Importance (!important forces the priority to increase)
css selectors which are advanced selectors
Oct 07, 2023 pm 02:59 PM
Advanced selectors in CSS selectors include descendant selectors, child element selectors, adjacent sibling selectors, universal sibling selectors, attribute selectors, class selectors, ID selectors, pseudo-class selectors and pseudo-element selectors wait. Detailed introduction: 1. The descendant selector uses a space-separated selector to select the descendant elements of an element; 2. The child element selector uses a selector separated by a greater than sign to select the direct child elements of an element; 3. Adjacent sibling selectors use selectors separated by a plus sign to select the first sibling element immediately following an element, and so on.
Get a deep understanding of the weight and precedence of CSS selector wildcards
Dec 26, 2023 pm 01:36 PM
In-depth understanding of the weight and priority of CSS selector wildcards In CSS style sheets, selectors are an important tool for specifying which HTML elements the style applies to. The selector's priority and weight determine which style is applied when multiple rules apply to an HTML element at the same time. Wildcard selectors are a common selector in CSS. It is represented by the "*" symbol, which means it matches all HTML elements. Wildcard selectors are simple but can be very useful in certain situations. However, the weight and precedence of wildcard selectors also
Learn the basic syntax of using CSS selectors
Jan 13, 2024 am 11:44 AM
To master basic CSS selector syntax, specific code examples are required. CSS selectors are a very important part of front-end development. They can be used to select and modify various elements of HTML documents. Mastering basic CSS selector syntax is crucial to writing efficient stylesheets. This article will introduce some common CSS selectors and corresponding code examples. Element selector The element selector is the most basic selector, which can select the corresponding element by its tag name. For example, to select all paragraphs (p elements), you can use
