CSS基础之选择器
一：CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到，一个样式表时，就会按照。
二：CSS语法
每个CSS有两部分组成：选择器和声明，声明又包括属性和属性值。每个声明由分号结束。
三：CSS的几种引入方式
3.1：行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
3.2：内部样式
嵌入式是将CSS样式几种写在HTML的<head>标签之中，具体方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<base target="_blank">
<style type="text/css"> ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
display: :block;
width: 60px;
}
a:link{color: pink;}
a:visited{color: #2B6600}
a:hover{color: blue; font-size: 150%;}
a:active{color: #222222} </style>
</head>
<body>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#about">about</a></li>
<li><a href="shopping">shopping</a></li>
</ul> </body>
</html>
3.3：外部样式
外部样式就是把CSS文件写在单独的文件里面，将HTML文件和CSS样式表完全解耦和，提高开发效率，具体引入方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body > </body>
</html>
四：CSS选择器
4.1：基本选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id = 'p1'>hello world</p> </body>
</html>
类选择器（标签的类属性可以有多个，多个属性需要以空格分开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
font-weight: bold;
} </style>
</head>
<body>
<p class = 'p1 p2'>hello world</p>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
* {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<p>hello world</p>
<p>yes command</p>
<p>one world one dream</p>
</body>
</html>
4.2：组合选择器
4.2.1：后代选择器
/*
选中标签li下的所有标签a，将其文本设置成pink颜色
*/
li a {
color: pink;
}
4.2.2：儿子选择器
/*
选择标签div的子标签p,(注意：仅仅是子标签，其子子p标签，和后面的都不选中）
*/
div>p {
color: red;
}
4.3.3：毗邻选择器
/*
毗邻选择器必须通过+号链接,毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
*/
div+p {
font-weight: bold;
}
4.3.4：弟弟选择器
/*
用~来链接,选择器选中的是指选择器后面的某个选择器选中的所有标签,无论有没有被隔开，都可以被选中
*/
ul~p {
color: yellow;
}
注：选中ul标签后所有的同级的p标签，无论p标签有没有隔开
4.3：属性选择器
/*
用于选取带有属性的元素
*/
p [title] {
color: red;
}
/*
可以用去选取带有指定属性的属性值的元素
*/
p[class = 'part1']
4.4：CSS3中的序列选择器
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个 :first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个 :only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
4.5：伪类选择器（附具体使用场景）
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
} /* 选定的链接 */
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
注：
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用
伪类选择器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<base target="_blank">
<style type="text/css">
a:link{color: pink;}
a:visited{color: #2B6600}
a:hover{color: blue; font-size: 150%;}
a:active{color: #222222}
</style> </head>
<body>
<a href="#">home1</a><br>
<a href="#">home2</a><br>
<a href="#">home3</a>
</body>
</html>
4.6：伪元素选择器
/*
选取标签p首字母设置
*/
p:first-letter {
font-size: 48px;
color: red;
} /*
在每个<p>标签之前插入？
*/
p:before {
content:"？";
color:red;
} /*
在每个<p>元素之后插入？
*/
p:after {
content:"[?]";
color:blue;
}
CSS基础之选择器的更多相关文章
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...
- Css基础-id选择器
id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- CSS基础2——选择器
前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; } div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...
随机推荐
- SQLSERVER 修改实例名以及架构信息
1. GUI的方式 后者是 alter database 的方式修改 instance的名字 2. 在全局的安全性下面创建用户. 3. 在实例的安全性下面创建架构和用户(架构名与用户名一直, 使用新实 ...
- C# 键盘记录器
设计背景 Win系统带有API可以获取键入值,本小程序主要应用了一个网上广为流传的类,可以说一个测试DEMO.有俗称为键盘钩子 设计思路 使用Win API获取建入值 相关技术 Win API 功能 ...
- Wow! Such Doge! HDU - 4847（虽然是道水题 但很有必要记一下）
就是求出现了多少次doge 不区分大小写 巧用字符串函数 isalpha 判断是否是字母 tolower 转换为小写字母 toupper 转换为大写字母 strncmp字符串比较函数 能限制比较的 ...
- 【刷题】BZOJ 4657 tower
Description Nick最近在玩一款很好玩的游戏,游戏规则是这样的: 有一个n*m的地图,地图上的每一个位置要么是空地,要么是炮塔,要么是一些BETA狗,Nick需要操纵炮塔攻击BETA狗们. ...
- png?wxfrom=5&wx_lazy=1
作为一名游戏行业的视频&平面设计师,平时的工作就是为公司发行的游戏制作宣传视频.广告.平面宣传图,打交道最多的自然就是Adobe家族的设计软件,Photoshop.AfterEffects.P ...
- 【科技】KD-tree随想
大概就是个复杂度对的暴力做法,在你不想写二维线段树等的时候优秀的替代品. 优点:思路简单,代码好写. 他大概有两种用法(虽然差不多). 在平面坐标系中干一些事情: 例如最常规的平面最近最远点,不管是欧 ...
- 第三周 构造一个简单的Linux系统
20135331文艺 首先 在上周内容中我们学习了 计算机三个法宝: 1.存储程序计算机 2.函数调用堆栈 3.中断 本周中得知 操作系统两把宝剑: 1.中断上下文的切换:保存现场和恢复现场 2.进程 ...
- Centos7搭建redis集群及安装sentinel
准备三个节点,系统版本为CentOS7.3 11.0.8.15 master 11.0.8.16 slave01 11.0.8.17 slave02 1.安装redis # yum install - ...
- oracle的学习笔记
Oracle的介绍 1. Oracle的创始人----拉里•埃里森 2. oracle的安装 [连接Oracle步骤](](https://img2018.cnblogs.com/blog/12245 ...
- 【bzoj4826】影魔
Portal --> bzoj4826 Solution 为什么莫名读了很长时间的题...== 逐渐不会语文qwq 貌似这题的做法很多,丢上来的话是因为..这个化简条件的过程莫名爽哈哈哈哈哈 注 ...