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>相关推荐：
Atas ialah kandungan terperinci CSS选择器的代码实例以及css优先级的代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana untuk mengubah saiz kotak teks HTML
Feb 20, 2024 am 10:03 AM
Menetapkan saiz kotak teks HTML adalah operasi yang sangat biasa dalam pembangunan bahagian hadapan. Artikel ini menerangkan cara menetapkan saiz kotak teks dan menyediakan contoh kod tertentu. Dalam HTML, anda boleh menggunakan CSS untuk menetapkan saiz kotak teks. Kod khusus adalah seperti berikut: input[type="text"
Bagaimana untuk melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar
Mar 05, 2024 pm 02:03 PM
Cara melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar memerlukan contoh kod khusus Sebagai sistem CMS yang berkuasa, WordPress disukai oleh banyak pembangun laman web dan juruweb. Walau bagaimanapun, apabila menggunakan WordPress untuk mencipta laman web, anda sering menghadapi masalah salah jajaran tema, yang menjejaskan pengalaman pengguna dan keindahan halaman. Oleh itu, adalah sangat penting untuk melaraskan tema WordPress anda dengan betul untuk mengelakkan paparan tidak sejajar. Artikel ini akan memperkenalkan cara melaraskan tema melalui contoh kod tertentu.
Apakah elemen dalam bahagian pemilih css yang dikecualikan
Apr 06, 2024 am 02:42 AM
Pemilih :not() boleh digunakan untuk mengecualikan elemen dalam keadaan tertentu dan sintaksnya ialah :not(selector) {style rule}. Contoh: :not(p) mengecualikan semua elemen bukan perenggan, li:not(.active) mengecualikan item senarai tidak aktif, :not(table) mengecualikan elemen bukan jadual, div:not([data-role="primary"] ) Kecualikan elemen div dengan peranan bukan utama.
Apakah keutamaan pemilih css
Apr 25, 2024 pm 05:30 PM
Keutamaan pemilih CSS ditentukan dalam susunan berikut: Kekhususan (ID > Kelas > Jenis > Kad bebas) Susunan sumber (Sebaris > Helaian gaya dalaman > Helaian gaya luaran > Helaian gaya ejen pengguna) Perintah pengisytiharan (pengisytiharan terkini diutamakan) Kepentingan (!penting memaksa keutamaan meningkat)
pemilih css yang merupakan pemilih lanjutan
Oct 07, 2023 pm 02:59 PM
Pemilih lanjutan dalam pemilih CSS termasuk pemilih keturunan, pemilih elemen anak, pemilih adik beradik bersebelahan, pemilih adik beradik universal, pemilih atribut, pemilih kelas, pemilih ID, pemilih kelas pseudo dan pemilih elemen pseudo menunggu. Pengenalan terperinci: 1. Pemilih turunan menggunakan pemilih yang dipisahkan oleh ruang untuk memilih unsur turunan unsur 2. Pemilih elemen anak menggunakan pemilih yang dipisahkan dengan tanda yang lebih besar untuk memilih unsur anak langsung bagi sesuatu elemen; Pemilih adik beradik bersebelahan menggunakan pemilih yang dipisahkan dengan tanda tambah untuk memilih elemen adik beradik pertama serta-merta mengikuti elemen, dan seterusnya.
Dapatkan pemahaman yang mendalam tentang berat dan keutamaan kad bebas pemilih CSS
Dec 26, 2023 pm 01:36 PM
Pemahaman mendalam tentang berat dan keutamaan kad bebas pemilih CSS Dalam helaian gaya CSS, pemilih ialah alat penting untuk menentukan elemen HTML yang digunakan untuk gaya. Keutamaan dan berat pemilih menentukan gaya yang digunakan apabila berbilang peraturan digunakan pada elemen HTML pada masa yang sama. Pemilih kad bebas ialah pemilih biasa dalam CSS. Ia diwakili oleh simbol "*", yang bermaksud ia sepadan dengan semua elemen HTML. Pemilih kad bebas adalah mudah tetapi boleh menjadi sangat berguna dalam situasi tertentu. Walau bagaimanapun, berat dan keutamaan pemilih kad bebas juga
Ketahui sintaks asas menggunakan pemilih CSS
Jan 13, 2024 am 11:44 AM
Untuk menguasai sintaks pemilih CSS asas, contoh kod khusus diperlukan adalah bahagian yang sangat penting dalam pembangunan bahagian hadapan Ia boleh digunakan untuk memilih dan mengubah suai pelbagai elemen dokumen HTML. Menguasai sintaks pemilih CSS asas adalah penting untuk menulis helaian gaya yang cekap. Artikel ini akan memperkenalkan beberapa pemilih CSS biasa dan contoh kod yang sepadan. Pemilih elemen Pemilih elemen ialah pemilih paling asas, yang boleh memilih elemen yang sepadan dengan nama tegnya. Contohnya, untuk memilih semua perenggan (elemen p), anda boleh gunakan
Ketahui lebih lanjut tentang rangka kerja reka letak responsif: panduan menyeluruh untuk pemula hingga pakar
Feb 19, 2024 pm 05:43 PM
Analisis Rangka Kerja Reka Letak Responsif: Panduan Penting daripada Pemula kepada Pakar Dengan populariti dan kepelbagaian peranti mudah alih, reka letak responsif telah menjadi kemahiran penting untuk reka bentuk web moden. Rangka kerja susun atur responsif telah menjadi alat pilihan untuk pembangun kerana kesederhanaan, fleksibiliti dan kebolehselenggaraannya. Walau bagaimanapun, bagi pemula, mempelajari dan memahami rangka kerja susun atur responsif boleh berasa sedikit mengelirukan. Daripada pemula kepada pakar, artikel ini memberi anda panduan terperinci untuk menguasai rangka kerja reka letak responsif, bersama-sama dengan contoh kod konkrit. Apakah kain responsif
