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;
}<!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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
