通用选择器 *
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color:green;
}
</style>
</head>
<body>
<h2>啦啦啦啦啦</h2>
<p>哗哗哗哗哗哗哗哗</p>
<div>可爱可爱可爱</div>
</body>
</html>标签选择器
标签本身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h2{
color: orange;
}
p{
color: blueviolet;
}
</style>
</head>
<body>
<h2>啦啦啦啦啦</h2>
<p>哗哗哗哗哗哗哗哗</p>
<div>可爱可爱可爱</div>
</body>
</html>类选择器
class=" xx"
.xx{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cute{
color: #DC143C;
}
.like{
color: #FFA500;
}
</style>
</head>
<body>
<div class="cute">可爱可爱可爱</div>
<div class="like">喜欢喜欢喜欢喜欢</div>
</body>
</html>id选择器
id=" xx"
#xx{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cute{
color: red;
}
#like{
color: orangered;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱</div>
<div id="like">喜欢喜欢喜欢喜欢</div>
</body>
</html>群组选择器 ，
用，分开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cute,#like,#money{
background-color: #FFA500;
color:red;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱</div>
<div id="like">喜欢喜欢喜欢喜欢</div>
<div id="money">金钱金钱金钱金钱</div>
</body>
</html>后代选择器 空格
用空格隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cute p{
color:orchid;
}
#like h3{
color:crimson;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱
<p>1111111111</p>
<p>2222222</p>
</div>
<div id="like">喜欢喜欢喜欢喜欢
<h3>3333333</h3>
<h3>444444</h4>
</div>
<div id="money">金钱金钱金钱金钱</div>
</body>
</html>子代选择器 >
用>符号表示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cute>p{
color:orchid;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱
<p>1111111111</p>
<p>2222222</p>
<h4>3333333</h4>
</div>
<div id="like">喜欢喜欢喜欢喜欢
</div>
<div id="money">金钱金钱金钱金钱</div>
</body>
</html>
相邻兄弟选择器 +
同一父级元素下，紧紧挨着的兄弟元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p+h4{
color:skyblue;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱
<p>1111111111</p>
<p>2222222</p>
<h4>3333333</h4>
</div>
</body>
</html>通用兄弟选择器 ~
同一父元素下，通过哥哥找到所有符合条件的弟弟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p~h4{
color:brown;
}
</style>
</head>
<body>
<div id="cute">可爱可爱可爱
<p>1111111111</p>
<h4>aaaaaa</h4>
<p>2222222</p>
<h4>3333333</h4>
</div>
</body>
</html>应用场景：除去老大，其他弟弟们都应用的样式，使用通用兄弟选择器。（效率更高）
其他需求，相邻兄弟选择器效率高
属性选择器[ ]
【】里放属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class]{
color:cadetblue;
}
</style>
</head>
<body>
<p id="cute" title="eg" class="hj">1111111111</p>
<h4 id="cute">aaaaaa</h4>
<p class="hj">2222222</p>
<h4 id="cf">3333333</h4>
</body>
</html>属性和值选择器
【xx="xx"】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class=hj]{
background-color: #FFA500;
color:blueviolet;
}
</style>
</head>
<body>
<p id="cute" title="eg" class="hj">1111111111</p>
<h4 class="hj">aaaaaa</h4>
<p class="hj">2222222</p>
<h4 id="cf">3333333</h4>
</body>
</html>
属性和值选择器 【xx~=xx】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[id~=j]{
color:blueviolet;
}
</style>
</head>
<body>
<p id="cute j" >1111111111</p>
<h4 id="ghj">aaaaaa</h4>
<p id="dfj j">2222222</p>
<h4 id="cf j">3333333</h4>
</body>
</html>
属性和值选择器 [xx|=xx]
|以什么开头
整个单词
连字符-开头行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class|=top]{
background-color: coral;
}
</style>
</head>
<body>
<div class="top-header">学习学习学习</div>
<div class="texttop">换工作换工作换工作</div>
<div class="contentTop">涨工资涨工资涨工资</div>
<p class="topOne">背内容背内容背内容</p>
<h4 class="top">好好学习好好学习好好学习</h3>
<span class="text-top">美好未来等着你</span>
</body>
</html>
属性和值选择器【xx^=xx】
^以什么开头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class^="clever"]{
background-color: plum;
}
</style>
</head>
<body>
<div class="clever">我是聪明孩子</div>
<div id="clever">我的大脑很聪明</div>
<span class="cleverCute">我会挣到很多很多钱</span>
<p class="clever-cool">我会有一个大房子</p>
<span class="happyclever">还有一些花花草草</span>
</body>
</html>属性和值选择器【xx$=xx】
$以什么结尾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class$="goodhealth"]{
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="goodhealth">你有一个好身体</div>
<p class="goodhealthGood">你知道身体健康是一件多么令人愉快的事啊</p>
<span class="last-goodhealth">这源于你源源不断的努力</span><br/><br/>
<i class="Goodgoodhealth">所以每天运动必不可少</i>
</body>
</html>
属性和值选择器【xx*=xx】
* 所有包含的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[class*="happy"]{
background-color:deeppink;
}
</style>
</head>
<body>
<div class="happyGood">早睡早起身体好</div>
<p class="studyhappy">10点睡觉最好</p>
<span class="cheerful-happy">睡觉好身体好</span><br/><br/>
</body>
</html>：first-of-type
父元素下的第一个元素
注意：只要是父元素下某个元素的第一个元素就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:first-of-type{
background-color: #98FB98;
}
div:first-of-type{
background-color: hotpink;
}
span:first-of-type{
background-color: orangered;
}
</style>
</head>
<body>
<h1>
啦啦啦啦啦啦啦
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>哗哗哗哗哗哗</p>
</h1>
<h2>
<div>00000</div>
<span>11111</span>
<span>22222</span>
<span>3333</span>
</h2>
</body>
</html>：last-of-type
父元素的最后一个元素
注意：只要是父元素下某个元素的最后一个元素就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:last-of-type{
background-color: #98FB98;
}
div:last-of-type{
background-color: hotpink;
}
span:last-of-type{
background-color: orangered;
}
</style>
</head>
<body>
<h1>
啦啦啦啦啦啦啦
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>哗哗哗哗哗哗</p>
</h1>
<h2>
<div>00000</div>
<span>11111</span>
<span>22222</span>
<span>3333</span>
</h2>
</body>
</html>：only-of-type
父元素下的那个唯一元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:only-of-type{
background-color: #98FB98;
}
div:only-of-type{
background-color: hotpink;
}
span:only-of-type{
background-color: orangered;
}
</style>
</head>
<body>
<h1>
啦啦啦啦啦啦啦
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>哗哗哗哗哗哗</p>
<span>11111</span>
<span>22222</span>
<span>3333</span>
<div>00000</div>
</h1>
</body>
</html>：nth-of-type(n)
1.同级的某个元素
2.奇数/偶数
注：type好像都能写公式，不过我没写，以后再写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-of-type(3){
background-color: orange;
}
span:nth-of-type(2){
background-color: mediumpurple;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
<p>哈哈哈哈哈哈</p>
</h1>
<span>1111</span><br/>
<span>2222</span><br/>
<span>3333</span><br/>
<span>4444</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-of-type(odd){
background-color: red;
}
span:nth-of-type(even){
background-color: deeppink;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
<p>哈哈哈哈哈哈</p>
<p>流泪流泪流泪</p>
<p>悲悲悲悲悲悲</p>
</h1>
<span>1111</span><br/>
<span>2222</span><br/>
<span>3333</span><br/>
<span>4444</span>
</body>
</html>：nth-last-of-type(n)
1.同级的某个元素
2.奇数/偶数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-last-of-type(3){
background-color: skyblue;
}
span:nth-last-of-type(2){
background-color: mediumpurple;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
<p>哈哈哈哈哈哈</p>
</h1>
<span>1111</span><br/>
<span>2222</span><br/>
<span>3333</span><br/>
<span>4444</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-last-of-type(odd){
background-color: skyblue;
}
p:nth-last-of-type(even){
background-color: mediumpurple;
}
span:nth-last-of-type(odd){
background-color: skyblue;
}
span:nth-last-of-type(even){
background-color: mediumpurple;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
<p>哈哈哈哈哈哈</p>
</h1>
<span>1111</span><br/>
<span>2222</span><br/>
<span>3333</span><br/>
<span>4444</span>
</body>
</html>：：first-letter
选择每个元素的第一个字母
first-letter" 选择器仅适用于在块级元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p::first-letter{
color:#8A2BE2;
}
</style>
</head>
<body>
<p>HAVE Money</p>
<p>HAVE Money</p>
<p>有money</p>
</body>
</html>
：first-line---这个跟我想的不一样
选择每个元素的第一行
"first-line" 选择器适用于块级元素中
它这个只要在一个元素中，无论有几段，它都只选择一行，在不同的元素中，选择每个元素的第一行------我发现的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:first-line{
color:#8A2BE2;
}
</style>
</head>
<body>
<p>
There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
</p>
<p>
The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people
</p>
</body>
</html>：only-child
父元素下的唯一子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:only-child{
background-color: #98FB98;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
</h1>
<h2>
<p>111111</p>
</h2>
<h3>
<p>xxxxxx</p>
<span>uuuuu</span>
</h3>
</body>
</html>：first-child
父元素下的第一个元素
注意：只要是父元素下某个元素的第一个元素就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:first-child{
background-color: green;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
</h1>
<h3>
<p>xxxxxx</p>
<span>uuuuu</span>
</h3>
</body>
</html>：last-child
位置上是最后一个就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:last-child{
background-color: crimson;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
</h1>
<h3>
<p>xxxxxx</p>
<span>uuuuu</span>
<p>kkkk</p>
</h3>
<h3>
<p>xxxxxx</p>
<p>RRRRR</p>
<span>uuuuu</span>
</h3>
</body>
</html>：nth-child(n)
父元素下的第几个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(2){
background-color: red;
}
P:nth-child(3){
background-color: orangered;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
</h1>
</body>
</html>：nth-last-child(n)
1.父元素下倒数第几个
2.某个奇数或者某个偶数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-last-child(2){
background-color: red;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-last-child(odd){
background-color: red;
}
p:nth-last-child(even){
background-color: deeppink;
}
</style>
</head>
<body>
<h1>
<p>呜呜呜呜呜呜</p>
<p>哭哭哭哭哭哭</p>
<p>嘻嘻嘻嘻嘻嘻</p>
<p>哈哈哈哈哈哈</p>
<p>流泪流泪流泪</p>
<p>悲悲悲悲悲悲</p>
</h1>
</body>
</html>：root
根元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root{
background-color: red;
}
</style>
</head>
<body>
<h1>哈哈哈哈哈哈哈哈发钱啦</h1>
</body>
</html>：empty 空的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width:100px;
height: 30px;
}
#d2{
width:100px;
height: 60px;
color: green;
}
#d3{
width:200px;
height: 90px;
background-color: plum;
}
#d4{
width:50px;
height: 50px;
}
div:empty{
background-color: orangered;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">1111</div>
<div id="d3"><div id="d4"></div></div>
</body>
</html>：target
选择当前活动的#news元素（包含该锚名称的点击的URL）
＃ 锚的名称是在一个文件中链接到某个元素的URL，元素被链接到目标元素
:target选择器可用于当前活动的target元素的样式
有锚点知识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:target{
background-color: green;
}
</style>
</head>
<body>
<p><a href="#news1">呜呜呜呜呜</a></p>
<p><a href="#news2">哼哼哼哼哼</a></p>
<p><a href="#news3">嘻嘻嘻嘻嘻</a></p>
<p><a href="#news4">哈哈哈哈哈</a></p>
我是可爱的分割线--------------------------------------------------------------------------------------------------------------我是可爱的分割线----------------------------------------------------------------------------------我是可爱的分割线------------------------------------------------------------------------------------我是可爱的分割线-----------------我是可爱的分割线--------------------------------------------------------------------------我是可爱的分割线---------------------------------------------
<p id="news1"><b>呜呜呜呜呜</b></p>
<p id="news2"><b>哼哼哼哼哼</b></p>
<p id="news3"><b>嘻嘻嘻嘻嘻</b></p>
<p id="news4"><b>哈哈哈哈哈</b></p>
</body>
</html>
：focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:focus{
background-color: orangered;
border:1px solid gold;
}
</style>
</head>
<body>
你叫什么：<input type="text" name="name"/><br/>
你住哪里：<input type="text" name="where"/>
</body>
</html>lang
ie8才能用
：enabled
选择器匹配每个启用的元素，主要用于表单元素 --没有disabled就都可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:enabled{
border:3px solid #8A2BE2;
}
</style>
</head>
<body>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text" disabled/><br/>
</body>
</html>：disabled
匹配每个禁用的元素，主要用于表单的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="text"]:disabled{
background-color: plum;
}
</style>
</head>
<body>
水：<input type="text"><br/>
食物：<input type="text" disabled="disabled">
</body>
</html>：checked
匹配每个选中的输入元素（仅仅适用于单选按钮或复选框）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input:checked {
height:20px;
width:20px;
background-color:plum !important;
}
input[type=checkbox]{
background-color: #FF4500 !important;
}
</style>
</head>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender"/>male<br/>
<input type="radio" value="female" name="gender" /> female<br/>
<input type="checkbox" checked="checked" value="Bike"/>I have a bike </br>
<input type="checkbox" value="Car"/>I have a Car
</form>
</body>
</html>：：selection
匹配元素中被用户选中或处于高亮状态的部分
它只用于少数的css属性，比如color background cursor outline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
::selection{
color: orange;
}
/* 注意火狐需要设置私有属性 */
::-moz-selection{
color:orange;
}
</style>
</head>
<body>
<p>不想上班</p>
<span>人为什么要上班</span>
<p>谁发明的上班</p>
</body>
</html>
：not()
匹配每个元素是不是指定的元素/选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
::selection{
color: orange;
}
/* 注意火狐需要设置私有属性 */
::-moz-selection{
color:orange;
}
</style>
</head>
<body>
<p>不想上班</p>
<span>人为什么要上班</span>
<p>谁发明的上班</p>
</body>
</html>
：in-range
匹配值在指定区间之内的input元素
它只能作用域指定区间值得元素，比如input的min和max属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:in-range{
border: 2px solid #CD2314;
outline: 0;
width: 120px;
}
</style>
</head>
<body>
<!-- 在这个input中只能输入4-8 -->
<input type="number" min="4" max="8" value="4"/>
</body>
</html>
：out-of-range
匹配值在指定区间之外的input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:out-of-range{
border: 2px solid #FFC0CB;
outline: 0;
width: 120px;
}
</style>
</head>
<body>
<!-- 在这个input中输入4-8之外的值，样式才会生效-->
<input type="number" min="4" max="8" value="9"/>
</body>
</html>：optional
用于匹配可选的输入元素
它只能用于表单元素 input,select，textarea
表单元素中如果没有特别设置required属性，即为optional属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:optional{
background-color: #20B2AA;
margin-bottom: 5px;
}
</style>
</head>
<body>
<input type="text" name="one"/><br/>
<input type="text" name="two"/><br/>
<input type="text" name="three" required/>
</body>
</html>：required
用于匹配设置了 "required" 属性的元素
它只能用于表单元素 input,select，textarea
表单元素使用required属性设置必填项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:required{
background-color: #4DD22E;
margin-bottom: 5px;
}
</style>
</head>
<body>
<input type="text" name="one"/><br/>
<input type="text" name="two"/><br/>
<input type="text" name="three" required/>
</body>
</html>：valid---------自带bug
用于匹配输入值为合法的元素
在表单元素需要根据指定条件验证时设置指定样式
它只能用于能指定区间值得元素，比如input的min,max属性，正确的 email 字段, 合法的数字字段等
：invalid---------自带bug
用于匹配输入值为非法的元素
在表单元素中的值是非法时设置指定样式
它只能用于能指定区间值得元素，比如input的min,max属性，正确的 email 字段, 合法的数字字段等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:invalid{
background-color: #DDA0DD;
margin-bottom: 5px;
}
</style>
</head>
<body>
<input type="email" name="one"/><br/>
<input type="email" name="two"/><br/>
<input type="email" name="three"/>
</body>
</html>：read-write
用于匹配可读可写的元素
大多数浏览器中，它值设置了input textarea元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:read-write{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text" readonly/>
</body>
</html>：read-only
用来选取设置了readonly属性的元素
大多数浏览器, :read-only 选择器适用于 input 和 textarea 元素，也适用于设置了 "readonly" 属性的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:read-only{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text" readonly/>
</body>
</html>
伪元素 ：：after ::before
::before 在元素之前插入内容
::after 在元素之后插入内容
它们必须设置content
它是行内元素，块级元素使用它，需要转换模式
转换模式方式有两种
第一种 display:block/inline-block;
第二种 定位 position:absolute/fixed
案例一：在我有钱前插入文字 I have money --
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p::before{
content:"I have money---"
}
</style>
</head>
<p>我有钱</p>
<body>
</body>
</html>案例二：在div中添加文字身体健康，并向下移动100px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:100px;
height:50px;
background-color: skyblue;
}
/* ::after实现如下功能 */
div::after{
content:'身体健康';
display: block;
margin-top:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>:link 未访问的链接
:hover 鼠标悬停在链接上
:visited 已经被访问的链接
:active 点击链接时
他们是个有顺序要求
:hover ：active
JQuery选择器
JQuery选择器是大多数是基于css选择器的，还有部分自己的，以后再写
css样式权重
css3种样式
css一共有3种样式,行内样式（内联样式),内部样式，外部样式
内联样式
在元素中，写style属性，在style属性中编写样式，样式之间用分号；隔开，但它只对当前元素生效，代码可重用性低
内联样式优先级最高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>内联样式</h4>
<p style="color:red">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
</body>
</html>内部样式
只能在当前页面中使用
在head标签中，编写style标签，在style标签内部编写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color:orangered;
}
</style>
</head>
<body>
<h4>内部样式</h4>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
</body>
</html>外部样式
先创建一个css文件，再在html中的head标签里，使用link引入
eg:<link rel="stylesheet" type="text/css" href="my.css">
以后补充
样式的特性
继承性：文本样式和字体样式的继承，绝大多数都可以继承，但a标签不会继承字体颜色
堆叠性：为一个标签定义多个样式规则，如果样式属性不冲突，都会作用到这个标签上
样式的优先级
内联样式 高
内部和外部样式谁离标签的直线距离越短，就选择哪个。 中
浏览器样式 低
默认情况下，f12中样式是按照默认优先级顺序从上往下显示
选择器权值，代表选择器的重要程度
！import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0 代表可以参与的权利，但被人不理他
继承的样式 无
权值特点：
当一个选择器中含有多个选择时，需要将所有的选择器权值进行相加，值最大的显示
有多个选择器的权值一样大，按照就近原则
添加了！important当前css样式直接获取最高优先级
群组选择器，权值不相加，就是个是个的 eg:#a.c,#b 它的权值是 110 100
选择器权值的计算，不会超过本选择器权值的最大数量级。也就是元素选择器值（1）相加永远到不了10，也就是类选择（10）相加的值永远到不了100（比如：10个类选择器的权值相加也小于id选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 100 1 10=111 */
#d1 p .c3{
color: red;
}
/* 权值 100 10 10=120*/
/* 这个权值大，所以颜色是蓝色 */
#d1 .c2 .c3{
color:blue;
}
</style>
</head>
<body>
<h4>内部样式</h4>
<div id="d1">
<p id="d1" class="c2">
<span id="d3" class="c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</p>
</div>
</body>
</html>案列2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 权值 100 10 10=120*/
#d1 .c2 .c3{
color:blue;
}
/* 权值120 */
/* 权值相同，按就近原则，谁离标签近，就是什么颜色*/
.c1 #d2 .c3{
color:hotpink;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<p id="d2" class="c2">
<span id="d3" class="c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</p>
</div>
</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* !important权值最高，所以背景颜色为绿色 */
#d1 .c2 .c3{
color:blue;
background-color: green !important;
}
/* 权值相同，字体显示粉红色 */
.c1 #d2 .c3{
color:hotpink;
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<p id="d2" class="c2">
<span id="d3" class="c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</p>
</div>
</body>
</html>如何调整优先级
!important 优先级最高，高于内联
必须在值和分号之间
div{
color:red !important;
}
注意：内联样式不允许设置！important
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
