HTML选择器基本选择器层次选择器属性选择器交集选择器并集选择器

new乌龙茶

于 2023-09-11 23:28:06 发布

阅读量282

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/wlc763676wlc/article/details/132819591

版权

1.基本选择器

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>基本选择器</title>

<!-- style标签定义内部样式,都是以选择器的方式定义选择器

代表一类标签的格式 -->

<style>

/* 标签选择器，以标签的名字命名的选择器 */

h2 {

font-size: 30px;

color: red;

}

p {

color: green;

}

/* 类选择器，选择器名称是自定义，必须以.开头 */

.blue {

color: blue;

}

/* id选择器，必须自定义的，必须以#开头 */

#orange {

color: orange;

}

</style>

</head>

<body>

<h2>热门城市</h2>

<p class="blue">成都</p>

<p>武汉</p>

<p>合肥</p>

<p>南京</p>

<h2>旅游城市</h2>

<p class="blue"><a href="">青岛</a></p>

<p class="blue" id="orange">厦门</p>

<p>三亚</p>

<p>北京</p>

</body>

2.层次选择器

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>层次选择器</title>

<style>

/* 后代选择器，.a里面的所有h2 */

.a h2 {

font-size: 30px;

color: red;

}

/* 子代选择器，这里可以理解.a 里面的子元素h2 */

.a>h2 {

background-color: blue;

}

/* 表示相邻兄弟选择器，作用在.sh相邻的下一个li标签上 */

.sh+li {

color: red;

}

/* 通用兄弟选择器，作用在.sh下面的所有li标签上 */

.sh~li {

background-color: blue;

}

</style>

</head>

<body>

<h2>层次选择器</h2>

<div class="a">

<h2>热门城市</h2>

<ul>

<li>苏州</li>

<li>无锡</li>

<li class="sh">上海</li>

<li>杭州</li>

<li>南京</li>

</ul>

<div class="b">

<h2>数码产品</h2>

<ul>

<li>苹果手机</li>

<li>华为手机</li>

</ul>

</div>

</body>

3.属性选择器

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>属性选择器</title>

<style>

/* []定义属性选择器，这里表示获取所有带name属性的p标签 */

p[name] {

font-size: 30px;

}

/* 指定属性选择器 */

p[name="shanghai"] {

font-size: 30px;

color: red;

}

/* 属性值可以模糊匹配，^匹配以什么开头 */

p[name^="s"] {

background-color: lightblue;

}

/* $匹配已什么结尾， */

p[name$="zhou"] {

text-decoration: underline;

}

/* *表示匹配包含 */

p[name*=f] {

color: orange;

}

</style>

</head>

<body>

<p name="shanghai">上海</p>

<p name="suzhou">苏州</p>

<p name="hangzhou">杭州</p>

<p name="hefei">合肥</p>

<p>南京</p>

</body>

4.交集选择器

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>交集选择器</title>

<style>

/* 作用在div元素上的类选择器a */

div.a {

color: red;

font-size: 20px;

}

/* 同时具备id选择器和类选择器b */

#a.b {

color: green;

font: 30px;

}

</style>

</head>

<body>

<div class="a">张三</div>

<div>李四</div>

<p class="a">王五</p>

<div id="a" class="b">赵敏</div>

<p id="a" class="b">赵敏</p>

</body>

5.并集选择器

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>并集选择器</title>

<style>

/* 将多个选择器样式合并在一起，就是并集选择器 */

div,

span {

color: red;

}

</style>

</head>

<body>

<div>张三</div>

<p>李四</p>

<span>王五</span>

</body>

new乌龙茶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML选择器基本选择器层次选择器属性选择器交集选择器并集选择器

HTML选择器基本选择器层次选择器属性选择器交集选择器并集选择器
复制链接

扫一扫

HTML选择器 基本选择器 层次选择器 属性选择器 交集选择器 并集选择器

1.基本选择器

2.层次选择器

3.属性选择器

4.交集选择器

“相关推荐”对你有帮助么？

HTML选择器基本选择器层次选择器属性选择器交集选择器并集选择器