3、CSS选择器
一、CSS介绍
层贴样式表：就是给HTML标签添加样式的，让它变的更加的好看，如果把Web比作一个人，HTML是人体的骨骼，而CSS就是人体的皮肤。
1、注释
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
2、语法格式
/*css的语法结构*
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
3、引用方式
1.style标签内部直接书写
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
二、CSS选择器
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。CSS选择器：就是指定CSS要作用的某个标签，意为：选择哪个容器。
1、基本选择器
<style>
/*【id选择器】*/
#d1{
color:greenyellow; /*找到id是d1的标签，将文本颜色变成绿黄色*/
}
#########################################################################
/*【类选择器】*/
.c1{
color:red; /*找到class值里面包含c1的标签，将文本颜色变成红色*/
}
#########################################################################
/*【元素/标签选择器】*/
span{
color:green; /*找到所有的span标签，将文本颜色变成绿色*/
}
#########################################################################
/*【通用选择器】*/
*{
color:green; /*把所有的标签变成绿色，基本用不上，了解即可*/
}
</style>
2、组合选择器
/*在前端 我们将标签的嵌套用亲戚关系来表述层级*/
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
/*div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲*/
/*【后代选择器】*/
div span {
color: red; /*div包里所有的标签 改为红色*/
}
/*【儿子选择器】*/
div>span {
color: red; /*div次一级别的个 改为红色*/
}
/*【毗邻选择器】*/
div+span {
color: red; /*同级别紧挨着的下面的第一个 改为红色*/
}
/*【弟弟选择器】*/
div~span {
color: red; /*同级别下面所有的span 改为红色*/
}
3、属性选择器
/*
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
*/
/*属性选择器是以[]作为标志的*/
/*将所有含有属性名是username的标签背景色改为红色*/
[username] {
background-color: red;
}
/*找到所有属性名是username并且属性值是jason的标签*/
[username='jason'] {
background-color: orange;
}
/*找到所有属性名是username并且属性值是jason的input标签*/
input[username='jason'] {
background-color: wheat;
}
4、分组和嵌套
<style>
/*分组，同时为div,p,span的文本都换成红色*/
div,p,span {
color:red;
}
/*嵌套，为id为d1的div内部下class为c2的文本换成红色*/
#d1 .c2{
color: red;
}
</style
/*下面是body的内容*/
<body>
<div id="d1">div
<p class="c2">p</p>
<span id="d3">span</span>
<span id="d4">span</span>
</div>
</body>
5、伪类选择器
同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
伪类选择器分为两种。
（1）静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">京东商城</a>
<p>点我点我</p>
<input type="text">
</body>
</html>
6、伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
/*可以把第一个变得很大*/
p:first-letter {
font-size:48px;
color:orange;
}
/*在文本开头，用css添加内容，因为是css添加，所以无法选中*/
p:before {
content: '无坚不摧';
color: blue;
}
/*在文本末尾，用css添加内容*/
p:after {
content: '安如磐石';
color: orange;
}
/*before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题*/
7、选择器优先级
"""
id选择器
类选择器
标签选择器
行内式
"""
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
浙公网安备 33010602011771号