2.选择器
什么是选择器？
更加准确选中需要设置的标签
head标签中加style标签
将样式都放在style中
2.1标签选择器
2.1.1权重：
标签选择器：0.0.0.1
类选择器：0.01.0
id选择器：0.1.0.0
伪目标选择器：0.0.1.0
行内样式：1.0.0.0
!important：无穷大
权重计算相加
权重值相同的后边覆盖前边
但权重叠加不会进位
/* 宽高无效 */
<style>
a {
width:200px;
height:200px;
background-color: blue;
border:1px blue solid;
<--边框属性,实线，取值无顺序要求，中间用空格隔开；边框属性，solid实线，指的是边框的样式，粗细值和样式是必须写的，取值无顺序要求，中间用空格隔开-->
display:inline-block;
<--元素类型转化，行内块元素，行内块元素可以设置宽高-->
display:block将元素显示为块级元素
display:inline将元素显示为行内元素
}
</styal>
<a href="">123</a>
<a href="">1235</a>
2.2ID选择器;类选择器
区别：
id是唯一的，一个id名只能用一次
class可以多次用
2.2.1id选择器
只能调用一次，别人切勿使用
#id值{}
例如：
先给标签起个id名字
<style>
/* id选择器 */
#j1{
width:200px;
height:200px;
}
</style>
<img src="../0628/img/火山爆发.png" alt="" id="j2">
id和类命名规范：
1.不能是纯数字
2.也不能是数字开头
3.不能有#.
4.可以有-_
5.建议用英文，也可以用拼音
6.可以多个词组组合，eg：headr-left上边左边；main_nav；wrapCenterMain
2.2.2类选择器
口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
多重类名，命名规则
类名最好用英文或者全拼
中间加空格
eg：class=“ph1 big”
.类名{}
eg:
先给标签起类名
<style>
/* 类选择器 */
.cj1{
width:200px;
height:200px;
}
</style>
<img src="../0628/img/火山爆发.png" alt="" id="j1" class="cj1">
/* 宽高有效 */
<style>
/* id选择器 */
#j1{
width:200px;
height:200px;
}
/* 类选择器 */
.cj1{
width:200px;
height:200px;
}
</style>
<img src="../0628/img/火山爆发.png" alt="" id="j1" class="cj1">
<!-- 可替换元素 -->
<img src="../0628/img/火山爆发.png" alt="" id="j2">
<img src="../0628/img/火山爆发.png" alt="" id="j3">
<img src="../0628/img/火山爆发.png" alt="" id="j4" class="cj1">
2.2.3通配符选择器*
选择所有的标签
* {
margin: 0;
padding: 0;
cursor: pointer;
}
内外边距为0
2.3复合选择器
2.3.1后代选择器（重要）
A B
A B
通过标签之间的包含关系
中间用一个空格
eg：
<div id="box-1">
<div class="lop1">1</div>
</div>
样式中写作：
#box .lop1{
background-color:red;
}
eg：
并集选择器
喜欢竖着写
A,B
并
A+B
跟在后边一个
A~B
跟在后边两个
子元素选择器
A>B
子代，亲儿子选择器
只选亲儿子，只选一个标签
交集选择器
A.classname
A:nth-child(a)
2.4伪类选择器
2.4.1结构伪类选择器
:first-child
有大儿子身份的，获取第一个子元素
<style>
div :first-child{
color: aquamarine;
}
</style>
</head>
<body>
<div>
<div>老大</div>
<div>老二</div>
<div>老三</div>
</div>
</body>
</html>
:last-child
获取最后一个元素
:nth-child(A)
选取某个元素的一个或者多个特定的子元素（A为几则选第几个）
在选择层级下第几个就是第几个，选中具体的第几个
<style>
div span:nth-child(2){
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
:nth-child(An+B)
使用数字（n从1开始），关键字（even偶数、odd奇数）或公式（2n-1）（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
<style>
div :nth-child(3n){
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
</body>
</html>
:nth-last-child(A)
选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（A从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。n为几则选倒数第几个。
e:first-of-type
匹配同类型中的第一个同级兄弟元素e
e:last-of-type
匹配同类型中的最后一个同级兄弟元素e
e:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素e
e:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素e
:nth-of-type(A)
匹配各类型中同种元素的第几个
在不同类别中标签的第几个
<style>
div :nth-of-type(3){
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
:only-child
匹配只有一个子元素的父元素
什么中的独生子，有独生子身份的
<style>
<--交集选择器-->
a:only-child{
font-size: 50px;
}
</style>
</head>
<body>
<div>
<a href="">老大家的老大</a>
</div>
<div>
<a href="">老二家的老大</a>
<a href="">老二家的老二</a>
</div>
<p>
<a href="">老三家的老大</a>
<!-- <a href="">老三家的老二</a> -->
</p>
</body>
</html>
:only-of-type
匹配各类型中只有一个同种元素的元素，各种类型中的唯一。
各种类型中的唯一
<style>
body :only-of-type{
font-size: 50px;
}
</style>
</head>
<body>
<div>
<a href="">老大家的老大</a>
<a href="">老大家的老二</a>
</div>
<div>
<a href="">老二家的老大</a>
</div>
<div>
<a href="">老三家的老大</a>
<a href="">老三家的老二</a>
</div>
<p>
<a href="">老四家的老大</a>
<!-- <a href="">老三家的老二</a> -->
</p>
</body>
</html>
e:root
匹配文档的根元素，在html中根元素永远是html
html=:root
:empty
匹配没有任何子元素的元素（空格，回车等也算子元素）
空元素选择器
否定伪类选择器
e:not(X)
匹配所有不匹配简单选择符x的元素e
非选择器
li:first-child{}
否定》li:not(:first-child){}
属性选择器[attribute]
[属性]
具有属性的元素选取出来
div[属性]
div元素中具有该属性的选择出来
div[class=box1]
选择出class="box1"的div 完美匹配
div[class ~=box1]
选择出包含class="box1"的div。 包含就匹配
模糊匹配
class ^=b 以这个开头的
class $=b 以这个结尾的
class *=b 包含这个字符的
2.5伪元素选择器 ::befor/after 内容前/后
::befor/after
虚拟，模拟出来的一个选择器，给父级元素设置
模拟出一个选择器，元素
会影响结构
必写的5项：
content: ""; /* 设置这个伪元素内部包含什么文本内容，此属性必须写 */ display: block; height: 0; visibility: hidden; /* 隐藏元素，但不取消文档流位置 */ clear: both; 清除
链接伪类选择器
a:link /选择所有未被访问的链接/没有点击过的链接
a:visited 选择所有已被访问的链接，点击过的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接），点住变色
注意：
只要链接在网页中点击过一次a：link就失去作用，
按lvha，顺序写。a:hover 必须在 a:link 和 a:visited 之后。a:active 必须在 a:hover 之后，需要严格按顺序才能看到完整效果。
所以，写的时候顺序尽量不要颠倒，按照 l o v e h a t e来记忆
除了a标签外，div和p等标签也有hover状态。
因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式。
目标伪类选择器 :target
描述：
被当作目标时元素会怎么样
当谁被点击时，我怎么样
当元素被作为目标url指向时的样式设置，使用超链接时依托于id
file:///D:/A-HTML/0720/代码/目标伪类选择器.html#tx
在网址后加 （#id名）
<style>
span:target{
被当作目标时元素会怎么样
color: blue;
font-size: 30px;
font-weight: 900;
}
</style>
<a href="#tx">aaaa</a>
<span id="tx">naov;nv,vMV</span>
状态伪类选择器 :checked
只针对能被选择的元素，input中的radio单选，checked复选，select下拉列表
处在被选中状态时后边的谁谁怎么样
input,div{
position: absolute;
}
input{
height: 50px;width: 200px;
z-index: 2;
opacity: 0;
}
div{
height: 50px;width: 200px;
background-color: beige;
}
input:nth-child(1){
top: 0;left: 0;
}
input:nth-child(2){
top: 0;left: 200px;
}
input:nth-child(3){
top: 0;left: 400px;
}
div:nth-child(4){
top: 0;left: 0;
}
div:nth-child(5){
top: 0;left: 200px;
}
div:nth-child(6){
top: 0;left: 400px;
}
input:nth-child(1):checked~div:nth-child(4){
background-color: blue;
}
input:nth-child(2):checked~div:nth-child(5){
background-color: blue;
}
input:nth-child(3):checked~div:nth-child(6){
background-color: blue;
}
</style>
<input type="radio" name="aa">
<input type="radio" name="aa">
<input type="radio" name="aa">
<div></div>
<div></div>
<div></div>
:focus伪类选择器
用于选取获得焦点的表单元素。当选中input输入框时变色
焦点就是光标，一般情况<input>表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus{
background-color: yellow;
}
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
