CSS选择器的代码实例以及css优先级的代码实例
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>设置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>标题</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>标题</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>标题</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>标题</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>登录后复制
相关推荐：
以上是CSS选择器的代码实例以及css优先级的代码实例的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何调整HTML文本框的大小
Feb 20, 2024 am 10:03 AM
HTML文本框大小的设定在前端开发中是非常常见的操作。本文将介绍如何设置文本框的尺寸，并提供具体的代码示例。在HTML中，可以使用CSS来设置文本框的尺寸。具体的代码如下：input[type="text"
如何调整WordPress主题避免错位显示
Mar 05, 2024 pm 02:03 PM
如何调整WordPress主题避免错位显示，需要具体代码示例WordPress作为一个功能强大的CMS系统，受到了许多网站开发者和站长的喜爱。然而，在使用WordPress创建网站时，经常会遇到主题错位显示的问题，这对于用户体验和页面美观都会造成影响。因此，合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调
css选择器排除部分的元素是什么
Apr 06, 2024 am 02:42 AM
:not() 选择器可用于排除特定条件的元素，其语法为 :not(selector) {样式规则}。示例：:not(p) 排除所有非段落元素，li:not(.active) 排除非活动列表项，:not(table) 排除非表格元素，div:not([data-role="primary"]) 排除非 primary 角色的 div 元素。
css选择器优先级是什么
Apr 25, 2024 pm 05:30 PM
CSS 选择器优先级按如下顺序决定：特殊性（ID > 类 > 类型 > 通配符）来源顺序（行内 > 内部样式表 > 外部样式表 > 用户代理样式表）声明顺序（靠后的声明优先）重要性（!important 强制提高优先级）
css选择器哪些是高级选择器
Oct 07, 2023 pm 02:59 PM
css选择器中的高级选择器有后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。详细介绍：1、后代选择器使用空格分隔的选择器，表示选取某个元素的后代元素；2、子元素选择器使用大于号分隔的选择器，表示选取某个元素的直接子元素；3、相邻兄弟选择器使用加号分隔的选择器，表示选取紧接在某个元素后面的第一个兄弟元素等等。
了解CSS选择器通配符的权重和优先级的深层次理解
Dec 26, 2023 pm 01:36 PM
深入理解CSS选择器通配符的权重和优先级在CSS样式表中，选择器是用来指定样式应用于哪些HTML元素的重要工具。选择器的优先级和权重决定了当多个规则同时作用于一个HTML元素时，应用哪个样式。通配符选择器是CSS中一种常见的选择器。它使用“*”符号表示，表示匹配所有HTML元素。通配符选择器虽然简单，但在某些情况下非常有用。然而，通配符选择器的权重和优先级也
学会使用CSS选择器的基本语法
Jan 13, 2024 am 11:44 AM
掌握基本的CSS选择器语法，需要具体代码示例CSS选择器是前端开发中非常重要的一部分，它可以用来选择和修改HTML文档的各个元素。掌握基本的CSS选择器语法对于编写高效的样式表是至关重要的。本文将介绍一些常见的CSS选择器以及对应的代码示例。元素选择器元素选择器是最基本的选择器，可以通过元素的标签名来选择对应的元素。例如，要选择所有的段落（p元素），可以使用
H5页面制作究竟指什么
Apr 06, 2025 am 07:18 AM
H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。
