选择器

属性
通过属性的复杂叠加才能做出漂亮的网页

选择器
通过选择器找到对应的标签设置样式

选择器的作用
选择对应的标签，为之添加样式

标签选择器
根据标签名找到标签

类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器*/ div{ color: red; } p{ color: greenyellow; } </style></head><body> <div>22222222222</div> <div>22222222222</div> <div>22222222222</div> <p>1111111111111111</p> <p>1111111111111111</p> <p>1111111111111111</p></body></html>

代码：这是普通的页内样式； 注意style中的注释方式不一样。

上图：
可以看到业内样式设计成功； 那怎么将其中部分内容单独进行设计呢，使用行内样式的确可以做到，但是body中一般都是做内容和结构，所以尽量不要使用行内设计。
所以我们可以通过类选择器来设计，为某个或多个内容进行类命名，然后针对命名的类进行设计。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器*/ div{ color: red; } p{ color: greenyellow; } /*类选择器*/ .test1{ color: blue; } </style></head><body> <div>22222222222</div> <div>22222222222</div> <div class="test1">22222222222</div> <p>1111111111111111</p> <p>1111111111111111</p> <p class="test1">1111111111111111</p></body></html>

代码↓
在body中为两个内容进行类命名为 test1；
通过点“.”+类选择器名称，对类命名为test1的内容进行设计。

上图：可以看到类选择器的设计为蓝色

id选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器*/ div{ color: red; } p{ color: greenyellow; } /*类选择器*/ .test1{ color: blue; } /*id选择器*/ #main{ font-size: 60px; } </style></head><body> <div id="main">22222222222</div> <div>22222222222</div> <div>22222222222</div> <div>22222222222</div> <div class="test1">22222222222</div> <p>1111111111111111</p> <p>1111111111111111</p> <p>1111111111111111</p> <p class="test1">1111111111111111</p></body></html>

代码↓：
在body中，在内容中使用 id="" 来定义id，这个id是唯一的，不可重复，否则会报错；不过在html中多个内容使用同一个id也是可以成功的，这是因为html是弱类型语言，在JS中就会报错。
在style中使用#main{} 来设计该id的样式

并列选择器

p , #main{ border: 4px dashed green; }

代码↓：
在style中加入上面的代码； 表示或p或#main的标签都会被设计；
可以放多种标签进行同时设计

复合选择器

复合选择器就是与的关系。
不管放了几个标签，都必须同时符合才会生效设计内容。

/*复合选择器*/ p.test1{ font-size: 66px; } div#main{ font-size: 10px; }

代码：新增上面的代码； 设计了两个复合选择器； 每个复合选择器的两个条件都必须同时满足，注意复合标签之间不能有空格。

上图：可以看到同时满足两个复合条件的标签的字体大小改变了。

后代选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器*/ div{ color: red; } p{ color: greenyellow; } /*类选择器*/ .test1{ color: blue; } /*id选择器*/ #main{ font-size: 60px; } /*并列选择器*/ p , #main{ border: 4px dashed green; } /*复合选择器*/ p.test1{ font-size: 66px; } div#main{ font-size: 10px; } /*后代选择器*/ div .test3 a{ font-size: 66px; } </style></head><body> <div id="main">22222222222</div> <div>22222222222</div> <div>22222222222</div> <div>22222222222</div> <div class="test1">22222222222</div> <p>1111111111111111</p> <p>1111111111111111</p> <p>1111111111111111</p> <p class="test1">1111111111111111</p> <div id="test2"> <p class="test3"> <a href="#">我是超链接</a> </p> </div></body></html>

代码↓：
body下面增加了部分内容；
style中增加了后代选择器设计，先满足div标签，div后面要满足.test3标签，test3后面要满足a标签；

/*后代选择器*/ /*div .test3 a{*/ /* font-size: 66px;*/ /*}*/ div a{ font-size: 66px; }

代码：如果把中间的某一个标签去掉也是可以的，因为a也属于div的后代。

/*后代选择器*/ /*div .test3 a{*/ /* font-size: 66px;*/ /*}*/ /*div a{*/ /* font-size: 66px;*/ /*}*/ #test2 .test3 a{ font-size: 66px; }

代码：将最前面的标签改成#test2 也是满足条件的。

直接后代选择器

与后代选择器效果差不多，但要求必须是紧挨着的下一级符合才可以，跳过匹配某个标签的后代是不生效的。

上图：
必须是div下面紧挨着的p标签才会生效；
div下的span的p标签是不生效的；

直接后代选择器表达： div > p{}

相邻兄弟选择器

上图：倒数第2个p标签与其上面的div标签相邻

属性选择器

上图：匹配div标签，且div中有名为name的属性； 第1条和第2条会相匹配。

上图：多属性选择器的匹配方法。 第二条匹配。

上图：匹配div，名为name的属性，且name属性的值要是“jack”，满足这三个条件才能匹配

伪类选择器

其中常用的有focus和hover

focus

/*伪类选择器*/input:focus{ width: 500px; height: 60px;

<input type="text" value="">

上2代码：body中添加input内容； style添加针对input:focus的设计；

上图：默认没有点击的样式

上图：点击后的样式，就变成我们设计的样子了，高度和宽度再点击（聚焦）的时候就改变了。

input:focus{ width: 500px; height: 60px; /*调整边框*/ outline: none; border: 1px solid red;

代码：调整边框，先将原来的边框给去掉（outline: none），才能重新定义新的边框。

上图：如果不先去掉原来的边框，新的border 样式就不会生效。

hover

/*id选择器*/#main{ font-size: 60px; width: 500px; height: 200px; background: deepskyblue;}

代码：修改id选择器的设计样式

上图：当前修改后的样式

#main:hover{ width: 100px; height: 100px;}

代码：在style中增加上面的代码的样式

上图：将鼠标悬浮在上面的时候，可以看到边框大小改变了。

伪元素

#test4:first-letter{ font-size: 55px; }

<p id="test4">我是段落</p>

上2代码：
body增加一个段落，并且使用id选择器；
style中增加first-letter伪元素

上图：文本的第一个字母的样式改变了