CSS选择器
1、三种引用方式
- 行内样式：
<h1 style="color:red;">内部样式</h1>- 内部样式表：
<style>选择器{属性：属性值。。。}</style>- 外部样式表
<link rel="stylesheet" type="text/css" href="css/test1.css"/>引入test1.css文件
2、常用的选择器
（1）基础选择器
标签选择器 (标签名)
使用标签选择器可选中当前范围的所有该标签元素。
div {属性1 ：属性值1；属性2 ：属性值2；。。。}
类选择器 （.+类名）
使用类选择器可选中标签中带有
class='类名'的所有元素
.img {属性1 ：属性值1；属性2 ：属性值2；。。。}
id选择器 （#+id名）
使用类选择器可选中标签中带有
id='id名'的所有元素,
#div1 {属性1 ：属性值1；属性2 ：属性值2；。。。}
（2）高级选择器
所有选择器：* （not不选）
选择所有元素,注意和其他选择器一起使用，作用更大。
* {属性1 ：属性值1；属性2 ：属性值2；。。。}选中所有元素。
#ha *{属性1 ：属性值1；属性2 ：属性值2；。。。}选中id名为ha的所有后代
:not(p){属性1 ：属性值1；属性2 ：属性值2；。。。}选中出来p元素外所有元素(:别忘了！)。
组合选择器：选择器1，选择器2。。。。。
组合选择器就是选中选择器1和选择器2。选择器1、2可以是基础选择器和高级选择器的任意。
div,span{属性1 ：属性值1；属性2 ：属性值2；。。。}选中所有div和span元素。
后代选择器：祖先选择器 后代选择器
div span{属性1 ：属性值1；属性2 ：属性值2；。。。}选择div内的所有span元素（不一定是子元素）
父子选择器：父选择器>子选择器
div>span{属性1 ：属性值1；属性2 ：属性值2；。。。}选择所有父级元素是div内的span元素。
兄弟选择器：兄选择器+弟选择器
.div1+p{属性1 ：属性值1；属性2 ：属性值2；。。。}选择紧挨着id='div1'的元素之后的p元素，只能由兄选弟，不可反过来（所谓的父子指的是内外层，兄弟则代表先后顺序）
属性选择器：[属性名] /[属性名=属性值]/[属性*|^|$=属性值]
[titie] {属性1 ：属性值1；属性2 ：属性值2；。。。}选择所有带有title属性的元素。
（这个属性是写在标签内部的，并不是写在style里的属性1 属性2，style、title、href等等都是属性）
[titie=你好，欢迎] {属性1 ：属性值1；属性2 ：属性值2；。。。}选择所有带有title属性并且属性值为你好，欢迎的元素。除了可以对准确的属性值进行选择，也可以进行模糊选择。
*包含：[titie*=a] {属性1 ：属性值1；。。。}选择title的属性值之中含有a的元素。
^开头：[titie^=a] {属性1 ：属性值1；。。。}选择title的属性值之中开头为a的元素。
$结尾：[titie$=a] {属性1 ：属性值1；。。。}选择title的属性值之中结尾为a的元素。
- nth选择器（也称为CSS3 结构类）
span:nth-child(1){属性1 ：属性值1；。。。}选择每个span是其父元素的第一个子元素。
div:nth-of-type(2){属性1 ：属性值1；。。。}选择每个div是其父元素的第二个儿子div元素。
span:nth-last-of-type(3){属性1 ：属性值1；。。。}选择每个span是其父元素的倒数第三个span元素。(这里面的123均可以更改,:可别忘了啊！)
（3）伪类选择器：选择某个元素的状态
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */举一个栗子！ 光标移到超链接上,字体变为蓝色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/test1.css"/> <style type="text/css"> a:hover{ color: #0000FF; /* 光标移到超链接上,字体变为蓝色 */ } </style> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </html>
3、选择器练习
css选择器有很多！上面列举的是常用的一些选择器，灵活搭配可解决大部分问题。
下面是我随意写的栗子，先写的各种嵌套的标签，然后再写的文字，最后用不同的选择器将它们的颜色和文字进行匹配，尽量不用重复的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 span:nth-child(1){
color: red;
}
body>div>span>div{
color: green;
}
#div1_1 div:nth-of-type(1){
color: yellow;
}
#div1_1 div:nth-child(1)+div{
color: #999900;
}
#span_div_span_div1{
color: #fa54ff;
}
#span_div_span_div1+div{
color: blue;
}
#span_div_span_div1+div+span div{
color: pink;
}
#div1:hover{
color: #00FFFF;
}
span:nth-last-of-type(1){
color: #00FFFF;
}
</style>
</head>
<body>
<div id="div1">
<span>俺想红</span>
<span>
<div id="">
不想绿
</div>
</span>
<div id="div1_1">
<div id="">
可别黄了
</div>
<div id="">
你说不黄就不黄啊
</div>
</div>
</div>
<span>
<div id="span_div">
<span id="span_div_span">
<div id="span_div_span_div1">
紫了吧唧
</div>
<div id="">
蓝汪汪
</div>
<span>
<div id="">
粉嘟噜
</div>
<span>青出于蓝而胜于蓝</span>
</span>
</span>
</div>
</span>
</body>
</html>
效果图：
image.png
4、优先级
有的时候我们看到的效果和我们写的效果并不一样，一个html文件中可能用到上面的三种引入方式，他们之间存在优先级。优先级的大小导致你的哪个效果起作用。
- 行内>>内部>外部（就近原则）
- id>class>标签（相同方式引入）
