文章目录
一、选择器的基本概念
功能:为选中的元素,设置属性。
分类
- 基础选择器
- 复合选择器
二、基础选择器
优先级:ID选择器 > 类选择器 > 标签选择器
1.标签选择器
特点
- 针对一类标签,描述的是共性。为这一类标签设置属性,没有办法描述个性。
- 选择器的名字就是html标签
代码如下
<style>
p{
font-size: 16px;
color: blueviolet;
font-weight: bold;
}
</style>
<body>
<p>今天是周一</p>
<p>今天是周二</p>
<p>今天是周三</p>
<div>今天是周四</div>
<div>今天是周五</div>
</body>
效果如下
可以看到,只为p标签设置了属性,所以div标签是没有任何变化的。
2. 类选择器
基本语法
- 用 .类名 的形式开头的
- 如果是长的类名, 可以使用 - 分割
- 不要使用纯数字, 或者中文, 以及标签名来命名类名.
特点
- 能差异化表示同一个标签,只需要定义两个不同的选择器就好了
举个例子~
<style>
.one{
color: blue;
font-size: 20px;
}
.two{
color: blueviolet;
font-size: 16px;
}
</style>
<body>
<p class="one">这是一个段落</p>
<p class="two">今天天气晴朗</p>
<p>今天适合出游</p>
</body>
效果图如下
- 多个标签可以使用同一个类选择器
举个例子~
<style>
.one{
color: blue;
font-size: 20px;
}
</style>
<body>
<p class="one">这是一个段落</p>
<p class="one">今天要多喝水</p>
<div>这是一个div</div>
</body>
效果图如下
- 一个标签可以使用多个类选择器
举个例子~
<style>
.size{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.style{
font-size: 20px;
color:brown;
}
.style1{
font-size: 10px;
font-weight: bold;
color: cornflowerblue;
}
</style>
<body>
<div class="size style">这是一个div</div>
<div class="size style1">这是一个新的div</div>
</body>
效果图如下
两个div都有size选择器,所以长宽、背景色都是一样的
区别就是style和style1中的属性不同,因为是不同的选择器
3. id选择器
和类选择器类似,
- 使用#开头, #id 的形式
- id 选择器的值和 html 中某个元素的 id 值相同
- id是唯一的,不能被多个标签使用
举个例子~
<style>
#one{
background-color: cadetblue;
font-size: 17px;
color: darkmagenta;
width: 200px;
height: 100px;
}
</style>
<body>
<div id="one">这是一个div</div>
<div>这是一个新的div</div>
</body>
效果图
id是one的标签有了背景色、字体大小、字体颜色、长宽
4. 通配符选择器
使用 * 的定义, 选取所有的标签
举个例子~
<style>
*{
color: blueviolet;
width: 200px;
height: 100px;
background-color: bisque;
}
</style>
<body>
<div>这是一个div</div>
<div>这是一个新的div</div>
</body>
效果图如下
页面所有背景颜色都会变成橘黄色,字体颜色为紫色,页面长宽为200px 100px
基础选择器总结
选择器 | 作用 |
---|---|
标签选择器 | 选出所有相同的标签,描述共性,不能差异化选择 |
类选择器 | 选出一个或者多个标签,描述一个或者多个标签的个性 |
id选择器 | 选出一个标签,同一个id是唯一的,和身份证号一样 |
通配符 | 选出所有标签,为HTML所有标签设置属性,特殊情况下使用 |
三、复合选择器
1. 后代选择器
又叫包含选择器,选择某个父元素中的某个子元素
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例1
<style>
ul li{
color: brown;
font-size: 20px;
}
</style>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
效果图
修改ul中li的颜色、字体,不影响ol中的
代码示例2:元素2除了是儿子,还可以是孙子
<style>
ul li a{
color: brown;
font-size: 20px;
}
/*
或者这样写:
ul a{
color: brown;
font-size: 20px;
}
*/
</style>
<body>
<ul>
<li>one</li>
<li>two</li>
<li><a href="#">three</a></li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
效果图
只给父元素中的孙子元素a设置属性
代码示例3:可以是任意基础选择器的组合(包括类选择器, id 选择器)
<style>
.one li a{
color: chartreuse;
font-size: 20px;
}
</style>
<body>
<ul class="one">
<li>one</li>
<li>two</li>
<li><a href="#">three</a></li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
效果图
2. 子代选择器
和后代选择器类似, 但是只能选择子标签
元素1>元素2 { 样式声明 }
- 使用大于号分割
- 只选亲儿子,不选孙子元素
代码示例1(后代选择器)
<style>
.one a{
color:crimson;
font-size: 20px;
}
</style>
<body>
<ul class="one">
<a href="#">这是一个链接</a>
<li>one</li>
<li>two</li>
<li><a href="#">three</a></li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
效果图
后代会选中所有的a标签
代码示例2(子代选择器)
<style>
.one > a{
color:crimson;
font-size: 20px;
}
</style>
<body>
<ul class="one">
<a href="#">这是一个链接</a>
<li>one</li>
<li>two</li>
<li><a href="#">three</a></li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
效果图
子代选择器只会选择自己的儿子标签
3. 并集选择器
用于选择多组标签 (集体声明)
元素1, 元素2 { 样式声明 }
- 通过逗号分割等多个元素
- 表示同时选中 元素1 和 元 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写,每个选择器占一行 (最后一个选择器不能加逗号)
代码示例1
<style>
div,p{
color:rgb(220, 20, 30);
font-size: 20px;
}
</style>
<body>
<div>水果</div>
<p>蔬菜</p>
<ul class="one">
<li>one</li>
<li>two</li>
<li><a href="#">three</a></li>
</ul>
</body>
效果图
只有选中的div和p标签有属性,其他没有
代码示例2
<style>
div,p, ul>li{
color:rgb(220, 20, 200);
font-size: 20px;
}
</style>
<body>
<h1>牛奶</h1>
<div>水果</div>
<p>蔬菜</p>
<ul class="one">
<li>萝卜</li>
<li>青菜</li>
<li><a href="#">苹果</a></li>
</ul>
</body>
效果图
把萝卜和青菜也设置成红色属性
4. 伪类选择器
4.1 链接伪类选择器
- a:link 选择未被访问过的链接
- a:visited 选择已经被访问过的链接
- a:hover 选择鼠标指针悬停上的链接
- a:active 选择活动链接(鼠标按下了但是未弹起)
注意
- 按照LVHA的顺序去写
- a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
- a:active 必须被置于 a:hover 之后,才是有效的
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
<body>
<a href="#">苹果</a>
</body>
4.2 force 伪类选择器
选取获取焦点的 input 表单元素
<style>
.three>input:focus {
color: red;
}
</style>
<body>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
复合选择器总结
选择器 | 作用 |
---|---|
后代选择器 | 选择后代元素 |
子选择器 | 选择子代元素 |
并集选择器 | 选择多组标签,设置相同的样式 |
链接伪类选择器 | 选择不同状态的链接 |
:focuse 伪类选择器 | 选择被选中的元素 |