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即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...
随机推荐
- JVM内存管理机制
Java与C++之间有一堆由内存动态分配与垃圾收集技术所围成的“高墙”,墙外面的人想进去,墙里面的人却想出来. —— <深入理解Java虚拟机:JVM高级特性与最佳实践> Java虚拟机在 ...
- Qt——基本工具的使用
本文主要介绍在windows系统中使用C++编写Qt程序所需要的一些工具,不会具体地讲工具怎么使用. 其它系统的安装本文不会涉及,在http://wiki.qt.io/Main中,有关于各种系统qt安 ...
- 015 反射中的 Class.forName() 与 ClassLoader.loadClass() 的区别
作者:nnngu GitHub:https://github.com/nnngu 博客园:http://www.cnblogs.com/nnngu 简书:https://www.jianshu.com ...
- IbatisNet连接oracle 报错
提示什么 connect oracle 1.5.0.xxxx 将你本机的oracle 客户端版本重装换成32位即可
- MT【153】缩小包围圈
(清华2017.4.29标准学术能力测试3) 集合$S=\{1,2,\cdots,25\}$,$A\subseteq S$,且$A$ 的所有子集中元素之和不同．则下列选项正确的有( ) A. ...
- AtCoder Grand Contest 005
AtCoder Grand Contest 005 A - STring 翻译 给定一个只包含\(ST\)的字符串,如果出现了连续的\(ST\),就把他删去,然后所有位置前移.问最后剩下的串长. 题解 ...
- AtCoder Grand Contest 002
AtCoder Grand Contest 002 A - Range Product 翻译 告诉你\(a,b\),求\(\prod_{i=a}^b i\)是正数还是负数还是零. 题解 什么鬼玩意. ...
- 【BZOJ4869】【SHOI2017】相逢是问候
Description BZOJ传送门 Solution 这题涉及到指数嵌套堆叠,可能可以用欧拉函数解决. 试想一个数\(a_i\)经过\(k\)次操作后会变成什么? \[ k个c\;\; \begi ...
- 【poj3375】 Network Connection
http://poj.org/problem?id=3375 (题目链接) 题意 有$M$个网络接口和$N$台计算机,给出它们的坐标(在同一直线上),一个接口只能接一台计算机,费用为两坐标之差的绝对值 ...
- SSH项目整合
其实框架的整合无非就是jar包和配置文件: struts2.spring.Hibernate这三个框架,分清楚什么作用就好配置了. jar包我们就不说了,这里看下配置文件吧: struts.xml: ...