css选择器的简单了解
这里是几个选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
1、元素选择器：此种选择器影响范围大，建议尽量应用在层级选择器中。
/*元素选择器*/
p{
color:red;
}
h1{
color:red;
}
2、ID选择器：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
/*id选择器 id="xxx"*/
#p1{
font-size: 20px;
}
3、类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
/*类选择器 class="xxx"*/
.p1{
font-size: 50px;
}
.hello{
color:green;
}
4、组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器。
/*选择器分组 (组选择器)*/
#p1,.p2,h1{
background-color: yellow;
}
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
5、通配选择器：所有的标签都应用
/*通配选择器*/
*{
color:pink;
}
/*复合选择器*/
span.p3{
background-color: yellow;
}
/*后代元素选择器*/
div.p.span{
color: pink;
}
/*子代元素选择器 */ /* IE6不支持 */
div > span{
color:blue;
}
</style>
</head>
<body>
<h1>好诗</h1>
<p>我如果爱你——</p>
<p>绝不学痴情的鸟儿，</p>
<p class="p1 hello">为绿荫重复单调的歌曲；</p>
<p class="p1">也不止像泉源，</p>
<p class="p2 hello">清凉的慰藉<sup>2</sup>；</p>
<p class="p2">也不止像险峰，</p>
<p>增加你的高度，衬托你的威仪。</p>
<p>甚至日光，</p>
<p>甚至春雨。</p>
<div>
<p>
<span>
增加你的高度，衬托你的威仪。
</span>
</p>
<span>
甚至日光,
</span>
<p>甚至春雨。</p>
</div>
<p>不，这些都还不够！</p>
<p>我必须是你近旁的一株木棉，</p>
</body>
</html>
6：伪类及伪元素选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
7：否定伪类
<style type="text/css">
/*
为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
否定伪类：
作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
*/
p:not(.hello){
background-color: yellow;
}
</style>
8:样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<style type="text/css">
body{
font-size: 30px;
}
</style>
</head>
<body>
<!--
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承
-->
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
</body>
</html>
9：选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
/*
当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示
优先级的规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
但是注意，选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算的
div, p, #p1, .hello{}
可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important
*/
*{
font-size: 50px;
}
p{
font-size: 30px;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: skyblue !important;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">
我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>
10：<a>标签的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a的伪类</title>
<style type="text/css">
/*
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的
*/
a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br>
<a href="http://www.baidu123456.com">未访问过的链接</a>
</body>
</html>
11：文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--
em和strong这两个标签都表示一个强调的内容
em主要表示语气上的强调，在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>！
</p>
<p>
<strong>
注意：如果你不认真上课，你就找不到好工作！
</strong>
</p>
<!--
i标签中的内容会以斜体显示
b标签中的内容会以粗体显示
h5规范中规定：对于不需要着重的内容，而是单纯的斜体或者是加粗，就可以使用i和b标签
-->
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
<!--
small标签中的内容会比他父元素中的文字要小一些
在H5中使用small标签来表示一些细则一类的内容
比如：合同中的小字，网站的版权声明都可以放到small
-->
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
<p>
我是p标签中的内容<big>我是big标签中的内容</big>
</p>
<!--
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名、歌名、话剧名、电影名……
-->
<p>
<cite>《三体》</cite>是我最喜欢的一本书
</p>
<!--
q标签表示一个短的引用（行内引用），q标签引用的内容，浏览器会默认加上引号
-->
<p>
子曰：<q>学而时习之，不亦说乎！</q>
</p>
<!--
blockquote标签表示一个长引用（块级引用）
-->
<p>
子曰：<blockquote>有朋自远方来，乐呵乐呵！</blockquote>
</p>
<!-- 使用sup标签来设置一个上标 -->
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
<!-- 使用sub标签用来表示一个下标 -->
<p>H<sub>2</sub>O</p>
<!-- 使用del标签来表示一个删除的内容，会自动添加删除线 -->
<p>
<del>17.75</del><br>
15.54<br>
</p>
<!-- ins表示一个插入的内容，会自动添加下划线 -->
<p>
郭敬明的个头儿真<ins>高啊</ins>！
</p>
<!--
需要在页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格及换行
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
-->
<pre>
<code>
if(True)
print("hello")
</code>
</pre>
</body>
</html>
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
