この記事では、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;
}ワイルドカードセレクター
<!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>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>
* {
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>クラスセレクター
<!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>複合selector
<!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>疑似要素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>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>伪元素选择器</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>関連する推奨事項:
CSS3 でカスタム スクロール バー スタイルを実装するには? (コード)
CSSセレクターの種類は何ですか? CSS でよく使用されるセレクターの簡単な紹介
以上がCSS セレクターのコード例と CSS 優先度のコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
