百度前端技术实战训练营——CSS基础之选择器
百度前端技术实战训练营——CSS基础之选择器
-
- CSS选择器
-
- 标签选择器
- 类选择器
-
- 多类名
- id选择器
- 通配符选择器
- 后代选择器
- 子元素选择器
- 伪类选择器
-
- 链接伪类选择器
- focus伪类选择器
- 简单应用
CSS选择器
选择器(选择符)就是根据不同需求把不同的标签选出来。简单来说，就是选择标签用的。
可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
也可以分为两大类：
- 简单选择器（标签选择器，类选择器，id选择器，通配符选择器）
- 符合选择器（后代选择器，子选择器，并集选择器，伪类选择器）
以下只介绍常用的几种。
\newline
标签选择器
标签选择器(元素选择器)是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之标签选择器title>
<style>
/* 标签选择器 */
p {
color: green;
}
div {
color: pink;
}
style>
head>
<body>
<p>男生p>
<p>男生p>
<p>男生p>
<div>女生div>
<div>女生div>
<div>女生div>
body>
html>
效果：
\newline
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在HTML中以 class 属性表示，在CSS中，类选择器以一个点 . 号显示。
注意：
- 类选择器使用
.进行标识，后面紧跟类名(自定义) - 可以理解为给这个标签起了一个名字来表示
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的
- 命名规范
<head>
<title>基础选择器之类选择器title>
<style>
/* 类选择器 */
.red {
color: red;
}
style>
head>
<body>
<ul>
<li>冰雨li>
<li class="red">来生缘li>
<li>李香兰li>
<li>生僻字li>
<li class="red">江南styleli>
ul>
body>
效果：
\newline
多类名
我们可以给一个标签指定多个类名，这些类名都可以选出这个标签，从而达到更多的选择目的。简单理解就是一个标签有多个名字。
多类名使用方式
<div class="red font20">多类名选择器div>
- 在标签
class属性中写多个类名 - 多个类名中间必须用
空格分开
<head>
<title>多类名的使用方式title>
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
style>
head>
<body>
<div class="red font35">多类名选择器div>
body>
效果：
\newline
id选择器
id 选择器可以为标有特定 id 的HTML元素指定特定的样式。HTML元素以 id 属性来设置 id 选择器，CSS中 id 选择器以 # 来定义。 id 属性只能在每个HTML 文档中出现一次，只能调用一次。类选择器在修改样式中用得最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用。
<head>
<title>基础选择器之id选择器title>
<style>
/* id选择器 */
#pink {
color: pink;
font-size: 30px;
}
style>
head>
<body>
<div id="pink">id选择器div>
body>
效果：
\newline
通配符选择器
CSS中，通配符选择器使用 * 定义，它表示选取页面中所有元素(标签)。
- 通配符选择器不需要调用，自动就给所有的元素使用样式
- 特殊情况才使用（如以下是清除所有的元素标签的内外边距）
* {
margin: 0;
padding: 0;
}
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>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
style>
head>
<body>
<div>我的div>
<span>我的span>
<ul>
<li>还是我的li>
ul>
body>
html>
效果：
\newline
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意简单选择器
/* 选择元素1里面的所有元素2 */
元素1 元素2 {样式声明}
\newline
子元素选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
- 元素1和元素2中间用
>隔开 - 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙之类都不归他管
/* 示选择元素1里面的所有直接后代(子元素)元素2 */
元素1 > 元素2 {样式声明}
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>
.nav>a {
color: red;
}
style>
head>
<body>
<div class="nav">
<a href="#">我是儿子a>
<p>
<a href="#">我是孙子a>
p>
div>
body>
html>
效果：
\newline
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用 : 表示。伪类选择器有很多，如链接伪类、结构伪类等。
\newline
链接伪类选择器
- 为了确保生效，一般按照LVHA的循顺序声明
:link - :visited - :hover - :active。a:hover必须在 CSS 定义中的a:link和a:visited之后，才能生效！a:active必须在 CSS 定义中的a:hover之后才能生效！ - 伪类名称对大小写不敏感
- a 链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式
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.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
style>
head>
<body>
<a href="#">小猪佩奇a>
<a href="http://www.xxxxxxxx.com">未知的网站a>
body>
html>
效果不好展示，请自行尝试。
\newline
focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
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>focus伪类选择器title>
<style>
/* 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
style>
head>
<body>
<input type="text">
<input type="text">
<input type="text">
body>
html>
效果：
\newline
简单应用
训练营上课案例。
html文件：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开始学习CSS选择器title>
<link rel="stylesheet" href="./CSS基础.css">
head>
<body>
<p>我是段落Ap>
<p class="paragraph">我是段落Bp>
<p class="paragraph extra-para">我是段落Cp>
<p id="para">我是段落Dp>
<p id="para" class="paragraph">类优先级测试p>
<img
src="https://ts4.cn.mm.bing.net/th?id=ORMS.2c1e78aaefb96846fd441a663854f5e6&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.25&p=0" />
<br>
<a href="">点我跳转a>
<br>
<br>
<div>
<span>span 1.
<span>span 2.span>
span>
div>
<span>span 3.span>
<br>
<br>
<div class="article">
<button class="article__button--primary">1button>
<button class="article__button--success">2button>
div>
<div class="article">
<button class="button-primary">1button>
<button class="button-success">2button>
div>
body>
html>
css文件：
p {
color: blue;
}
.paragraph {
color: red;
}
.paragraph {
color: brown;
}
.extra-para {
font-size: 30px;
}
#para {
color: green;
}
img[src] {
width: 100px;
}
a:hover {
color: red;
}
span {
background-color: white;
}
div span {
background-color: DodgerBlue;
}
span {
/* background-color: white; */
}
.article .button-primary {}
效果：
