css基本选择器
css基本选择器
1，基础选择器（重点）
* ：通用选择器，匹配任何元素 代码：*{ : }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{color: red} <!--此处是对所有的标签进行设置-->
</style>
</head>
<body>
ni
<div>hello div</div>
<p>hello</p>
<p>ni</p>
<a href="">点击</a>
</body>
</html>
效果是：所有标签都变红如下：
标签选择器，即通过标签名字来匹配
代码：标签名{: }
如下：对div标签进行设置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{color: red}<!--此处是对标签名为div的标签进行设置-->
</style>
</head>
<body>
<div>hello div</div>
<p>hello</p>
<p>ni</p>
<a href="">点击</a>
</body>
class选择器，匹配所有class属性中包含class="info"的元素,class 可以重复
匹配class 时一定要加上 .
代码：.class值{ : } 字典中是设置内容。如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ss{color: gold}
</style>
</head>
<body>
<p class="ss">hello</p>
<a class="ss">nide </a>
<p>hao</p>
</body>
效果如下：
标签名和class选择器可以一起使用如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.ss{color: green}
</style>
</head>
<body>
<div>who</div>
<p class="ss">hello</p>
<p class="ss">nide </p>
<div class="ss">i am</div>
<p>hao</p>
</body>
效果如下：
id 选择器
代码：#id值{ : } 字典中是设置内容
在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码）
匹配id 时需要加上#。如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ss{color: gold} <!--此处是对Id='ss'的标签进行设置-->
</style>
</head>
<body>
<p id="ss">hello</p>
<p>ni</p>
<p>hao</p>
</body>
2，组合选择器
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，只能包含内联元素
- 有几个特殊的块级元素只能包含内联系元素，不能包含块级元素。如：h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列，内练元素与内练元素并列
1）E，F 多元素选择器，同时匹配E元素或者F元素，E和F之间用逗号隔开（重点）。例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.ss,#tt{color: green}
</style>
</head>
<body>
<div>who</div>
<p class="ss">hello</p>
<p class="ss">nide </p>
<div class="ss">i am</div>
<p id="tt">hao</p>
</body>
效果图如下：
2）E F 后代元素选择器 例如匹配所有属于E元素后代的F元素,E和F之间以空格隔开
例如：将class ='div1'的div标签里边的所有div标签内容变红 代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {color: red}
</style>
</head>
<body>
<div>who</div>
<div class="div1">
<div>
<a href="">a</a>
<p>ppp</p>
<div>div3</div>
</div>
</div>
</body>
3）E>F 子元素选择器，匹配所有E元素的子元素F,仅找到E的下一层元素就不找了 之间用>隔开
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1>.div2{color:green}
</style>
</head>
<body>
<div>who</div>
<div class="div1">
<div>
<a href="">a</a>
<p>ppp</p>
<div>div3</div>
</div>
<p>p ele</p>
<div class="div2">div2</div>
</div>
</body>
4) E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 以+号隔开，只会向下找紧挨着的。
例如：将<div>div after</div>标签变为背景色变为绿色代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1+div{background-color: green}
</style>
</head>
<body>
<div>who</div>
<div class="div1">
<div>
<a href="">a</a>
<p>ppp</p>
<div>div3</div>
</div>
<p>p ele</p>
<div class="div2">div2</div>
</div>
<div>div after</div>
</body>
3，属性选择器（重点）
可以自己设置属性
1）E[att] 匹配所有具有att属性的E元素，不考虑它的属性值(注意：E在此处可以省略.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[alex]{color: red}
</style>
</head>
<body>
<div>who</div>
<div alex="sb">alex</div>
<div>div after</div>
</body>
2）E[att=val] 匹配所有att属性等于val的E元素
例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[alex='sb']{color: red}
</style>
</head>
<body>
<div>who</div>
<p alex="sb">alex1</p>
<div alex="sb">alex2</div>
<div>div after</div>
</body>
3）E[att～=val] 匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素 例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[alex~='sb']{color: red}
</style>
</head>
<body>
<div>who</div>
<p alex="ab sb">alex1</p>
<div alex="bc sb">alex2</div>
<div alex="ab sb">alex3</div>
<div>div after</div>
</body>
4）E[att^=val] 匹配属性值以指定值val开头的每个元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[alex^='sb']{color: red}
</style>
</head>
<body>
<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="ss">alex3</div>
<div>div after</div>
</body>
5）E[att$=val] 匹配属性值以指定值val结尾的每个元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[alex$='ss']{color: red}
</style>
</head>
<body>
<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="ss">alex3</div>
<div>div after</div>
</body>
6）E[att$*val] 匹配属性值中包含指定值val的每个元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[alex*='sb']{color: red}
</style>
</head>
<body>
<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="sa sb">alex3</div>
<div>div after</div>
</body>
4,伪类
CSS是伪类是用来给选择器添加一些特殊效果。
anchor 伪类：专门用于控制链接的显示效果
标签名：link （代表没有接触过的链接），用于定义了链接的常规状态
标签名：hover(鼠标放在链接上的状态），用于产生视觉效果
标签名：visited (访问过的链接）用于阅读文章，能清楚的判断已访问过的链接
标签名：active(正在访问的链接）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="123.png">hello-world</a>
<div class="box">
<div class="top"></div>
<div class="botton"></div>
</div>
<div class="add">hello yuan</div>
</body>
补充：before after 伪类
: before p:before 在每个<p>元素之前插入内容
: after p:after 在每个<p> 元素之后插入内容
p:before 在每个<p>元素的内容之前插入内容
p:before{content:"hello":color:red}
p:after 在每个<p>元素的内容之后插入元素
p:after{content:"hello";color:red} 例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
}
.top,.botton{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.box:hover .botton{
background-color: red;
}
.add:after{
content: '欢迎登录';
color: gold;
}
</style>
</head>
<body>
<a href="123.png">hello-world</a>
<div class="box">
<div class="top"></div>
<div class="botton"></div>
</div>
<div class="add">hello yuan</div>
</body>
效果图如下：
鼠标经过图片任何地方，部分会出现效果 代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
}
.top,.botton{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.box:hover .botton{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="botton"></div>
</div>
</body>
5， CSS优先级和继承
-CSS优先级：是指CSS样式在浏览器中被解析的先后顺序
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1，内联样式表的权值最高 style ="" -------1000
2，统计选择符中的ID属性个数 #id---------- 100
3，同级选择符中的CLASS属性个数 .class ------10
4，统计选择符中的HTML标签名个数 p--------1
按照这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。权重高的优先级别高
例1：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{color: red}
</style>
</head>
<div style="color: green" id="div1">hello</div>
</body>
====》结果是字体颜色为绿色，因为style文本优先级最高
***************************************
例子2:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{color: gold}
.div1 .div3{color: red}
#div1 .div3{color: green}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<div class="div3">
嵌套优先级
</div>
</div>
</div>
</body>
======》结果是：字体为绿色，因为id的优先级高
************************************************
例2:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{color: gold}
.div1 .div3{color: red}
.div3{color: green}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
嵌套优先级
</div>
</div>
</div>
</body>
====》结果是：字体为红色 分析：因为.div1.div3的权重为10+10=20，最高，所以为红色字体
附加说明：
1，文本的样式优先级为1000 所以始终高于外部定义。这里文内样式指形如<div style="color:red>bleh</div>的样式，而外部定义指经由<link>或者<style>卷标定义的规则
2，有 ! import声明的规则高于一切
3，如果 !important声明冲突，则比较优先权
4，如果优先权一样，则按照在源码中出现的顺序决定，后来者居上
5，由继承而得到的样式没有specificity的计算，它低于一切其他的规则，比如：(全局选择符*定义的规则）
-CSS继承
继承是CSS的一个主要特征，他是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如BODY定义了颜色值，也会应用到整个段落的文本中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{color: red}
</style>
</head>
<div id="div1">
hello1
<div class="div2">
hello2
<div class="div3">
嵌套优先级
</div>
</div>
</div>
</body>
===》结果是：hello1 hello2 以及嵌套优先级字体都为红色。
注意：继承的权重的很低的，只要给加个颜色值，这个颜色值马上会覆盖掉它继承的颜色。
此外，CSS继承也是由限制的，有一些属性不能被继承例如：border,margin,padding,background等
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{color: red}
.div3{color: yellow}
</style>
</head>
<div id="div1">
hello1
<div class="div2">
hello2
<div class="div3">
嵌套优先级
</div>
</div>
</div>
</body>
===>结果是：嵌套优先级的字体为黄色，其余还是红色
