css选择器
基本选择器
1,id选择器
1、作用：
根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性
2、格式
id名称 {
属性：值;
}
3、注意点：
1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
示例<head> ??<style> ???????#p1{ ???????????color: red; ???????} ???????#p2 { ???????????color: green; ???????} ???????#p3 { ???????????color:blue; ???????} ???</style></head><body> ???<p id="p1">213131231231</p> ???<p id="p2">123131231</p> ???<p id="p3">123123132132</p>类选择器
1、作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性
2、格式：
.类名称 {
属性：值;
}
3、注意点：
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同
<head> <style> ???????.p1{ ???????????color: red; ???????} ???????.p2 { ???????????color: green; ???????} ???????.p3 { ???????????color:blue; ???????} ???</style></head><body> ???<p class="p1">213131231231</p> ???<p class="p2">123131231</p> ???<p class="p3">123123132132</p></body>标签选择器
1、作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
2、格式：
标签名称 {
属性：值;
}
3、注意点：
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器，无论嵌套多少层都能选中
通配符选择器
1、作用：选择所有标签
2、格式：
- {
属性：值；}
3、注意点：
在企业开发中一般不会使用通配符选择器
理由是：
由于通配符选择器是设置界面上所有的标签的属性，
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多，那么性能就会比较差
<head> <style> ???????* { ???????????color: red; ???????} ???</style></head><body> ???<h1>wo shi biao ti</h1> ???<p>wo shi duan luo</p> ???<a href="#">wo shi chao lian jie</a>后代选择器，子元素选择器
后代选择器
1、作用：找到指定标签的所有后代标签，设置属性
2、格式：
标签名1 xxx {
属性：值;
}
3、注意：
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去
<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>后代选择器</title> ???<style> ???div p { ???????color: red; ???} ???????#id1 li p{ ???????????font-size: 50px; ???????} ???div ul li a{ ???????font-size: 100px; ???????color:green; ???} ???</style></head><body><p>我是body下的段落1</p> ???<!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class--> ???<div id="id1" class="part1"> ???????<p>我是div下的段落1</p> ???????<p>我是div下的段落2</p> ???????<ul> ???????????<li class="aaa"> ???????????????<p class="ccc">我是ul>li下的段落1</p> ???????????????<p class="ddd">我是ul>li下的段落</p> ???????????????<a href="">点我啊1</a> ???????????</li> ???????????<li> ???????????????<a href="#">点我啊2</a> ???????????</li> ???????</ul> ???</div> ???<p>我是body下的段落2</p></body></html>子元素选择器
1、作用：找到指定标签的所有特定的直接子元素，然后设置属性
2、格式：
标签名1>标签名2 {
属性：值;
}
先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
3、注意：
1、子元素选择器之间需要用>符号链接，并且不能有空格
比如div >p会找div标签的所有后代标签，标签名为">p"
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去
<head> ???<meta charset="UTF-8"> ???<title>后代选择器</title> ???<style> ???????body>p { ???????????color: green; ???????} ???????div>p { ???????????color: red; ???????} ???????.aaa>a { ???????????font-size: 100px; ???????} ???????div>ul>li>.ddd { ???????????color: blue; ???????} ???</style></head><body><p>我是body下的段落1</p> ???<!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class--> ???<div id="id1" class="part1"> ???????<p>我是div下的段落1</p> ???????<p>我是div下的段落2</p> ???????<ul> ???????????<li class="aaa"> ???????????????<p class="ccc">我是ul>li下的段落1</p> ???????????????<p class="ddd">我是ul>li下的段落2</p> ???????????????<a href="">点我啊1</a> ???????????</li> ???????????<li> ???????????????<a href="#">点我啊2</a> ???????????</li> ???????</ul> ???</div> ???<p>我是body下的段落2</p></body>兄弟选择器
相邻兄弟选择器
1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
2、格式
选择器1+选择器2 {
属性：值;
}
3、注意点：
1、相邻兄弟选择器必须通过+号链接
2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签
通用兄弟选择器
1、作用：给指定选择器后面的所有选择器中的所有标签设置属性
2、格式：
选择器1~选择器2 {
属性：值;
}
3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中
<head> ???<meta charset="UTF-8"> ???<title>兄弟选择器</title> ???<style> ???????h1+p { ???????????font-size: 50px; ???????} ???????h1~p { ???????????color: red; ???????} ???</style></head><body> <h1 >我是标题1</h1> ???<a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<p>我是段落</p> ???<h1>我是标题2</h1> ???<p>我是段落</p></body>css之选择器
原文地址：https://www.cnblogs.com/guodengjian/p/9089097.html