一、选择器
- 什么是标签选择器?
---作用：根据指定的标签名称，在当前界面找到所有该名称的标签，然后设置属性。 - 格式:
标签名称：{
属性:值；
}- 注意点：
1）标签选择器中的是当前界面中所有的标签，而不能单独选中某一个标签
2）标签选择器无论标签藏得多深都能选中
3）只是在HTML中的标签可以作为标签选择器（h/img/ul/ol/input……） - 什么是id选择器
---作用：根据指定的id名称找到对应的标签，然后设置属性 - 格式：
#id名称{
属性：值；
}- 注意点：
1）每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id
2）在同一个界面中id名称不能重复
3）在编写id选择器时一定要在id前加上# - id名称是有一定规范的
1)id的名称只能由字母/数字/下划线
2）id名称不能以数字开头
3）id名称不能是HTML标签的名称a/h/input
4）在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给js的 - 什么是类选择器?
---作用：根据制定的类名称找到对应的标签，然后设置属性 - 格式：
.类名{
属性：值;
}- 注意点：
1）每个HTML标签都有一个属性叫做class，也就是说每个标签都可以设置类名
2）在同一个界面中class名称能重复
3）在编写class选择器时一定要在class名称加上点
4)类名就是专门用来给某个特定的标签设置样式
6）在HTML中每个标签可以同时绑定多个类名
<p class="类名1 类名2 类名3……"></p>
<p class="类名1" class=“类名2”></p>//错误- 类名命名规范
1)class的名称只能由字母/数字/下划线
2）class名称不能以数字开头
3）class名称不能是HTML标签的名称a/h/input
二、类选择器和id选择器
- id和class的区别
1）id相当于人的很反正不可以重复，class相当于人的名字
2）在HTML标签只能绑定一个id名称，一个HTML标签可以绑定多个class名称 - id选择器和class选择器的区别
1)id选择器开头是#
2）class是以点开头 - 在企业开发中到底用id选择器还是class选择器？
----id一般情况下是给js使用的，所以非特殊情况下，否则不要使用id去设置样式 - 在企业开发中一个开发人员对类的使用可以看出这个开发员的技术水平
---一般情况下在企业开发中要注重冗余代码抽取，可以将一些公共的代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>html5废弃的标签</title>
<style>
.colorR{
color:red;
}
.sizez{
font-size:30px;
}
.line{
text-decoration:underline;
}
</style>
</head>
<body>
<p class="colorR sizez">第一段文字</p>
<p class="sizez line">第二段文字</p>
<p class="colorR sizez">第三段文字</p>
</body>
</html>三、后代选择器
- 什么是后代选择器?
---作用：找到指定标签的所有后代标签，设置属性 - 格式：
标签名称1 标签名称2{
属性:值；
}含义：先找到叫做标签名称1的标签，然后再找到在这个标签下面查找所有名称为标签名称2的标签，然后设置属性
- 注意点：
1）后代选择器必须用空格隔开
2）后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到中都是后代
3）后代选择器不仅仅可以使用标签名称，也可以使用其他选择器的名称（类选择器 id选择器）
4）可以无限后代
四、子元素选择器
- 什么是子元素选择器?
--找到指定标签中所有特定的直接元素,然后设置属性 - 格式
标签名称1>标签名称2
{
属性:值;
}--含义:先找到标签名称1的标签,然后在这个标签中查找所有直接元素名称叫做标签名称2的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div>p{
color:red;
}
</style>
}
</head>
<body>
<div>
<p>我是</p>
<p>撒吃撒·1</p>
<ul>
<li>
<p>秩序册·</p>
</li>
</ul>
</div>
</body>
</html>- 注意:
1)子元素选择器只会查找儿子,不会查找其他嵌套的标签
2)子元素选择器之间用>符号连接,并且不能有空格
3）子代选择器不仅仅可以使用标签名称，也可以使用其他选择器的名称（类选择器 id选择器）
4)子元素可以通过大于符号可以一直选择下去
后代选择器和子元素选择器的区别?
---区别
1)后代选择器使用空格作为连接符号,子元素选择器使用大于号连接符号
2.1)后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子/孙子......只要是被放到指定标签中的特定标签都会被选中
2.2)子元素选择器只会选中指定标签中,所有的特定的直接标签,也就是只会选中特定的儿子标签
---共同点
1)后代选择器和子代选择器都可以使用标签名称/类选择器/id选择器名称作为选择器
2)后代和子代都有通过各自连接符号一直延续下去
---如何选择 - 如果只想选中指定标签中的所有特定标签,那么就使用后代选择器
- 如果只想选中指定标签中的所有特定儿子标签,那么就使用子代选择器
五 交集选择器
- 什么是交集选择器?
--作用;给所有选择器中的标签,相交的那部分标签设置属性 - 格式:
选择器1选择器2{
属性:值;
}- 注意点:
1)选择器和选择器之间没有任何符号链接
2)选择器可以使用标签名称id名称/class名称/标签名称
3)交集选择器了解,企业不太使用
<style>
p.part1{
color:red;
}
</style>
</head>
<body>
<p class="part1">说不好吃</p>
</body>
</html>l六 并集选择器
- 什么是并集选择器?
--作用;给所有选择器选中的标签设置属性 - 格式:
选择器1,选择器2{
属性:值;
}- 注意点:
1)并集选择器用逗号连接
2)选择器可以使用标签名称id名称/class名称/标签名称
七 兄弟选择器
- 什么是兄弟选择器?
------相邻兄弟选择器(css2) - 作用:给指定选择器后面紧跟的那个选择器中的标签设置属性
- 格式:
选择器1+选择器2{
属性:值;
}- 注意点:
1)相邻兄弟选择器必须通过+连接
2)相邻兄弟选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签
------通用选择器
作用:给指定选择器后面的所有选择器中的所有标签设置属性 - 格式:
选择器1~选择器2{
属性:值;
}- 注意点:
1)通用兄弟选择器必须用~连接
2)通用选择器选中的是指定选择器后面某个选择器中的所有标签,无论有没有被隔开
八 CSS3新增选择器--序选择器
---同级别的第几个
:first-child;选中同级别的第一个标签
:last-child;选中同级别的最后一个
--注意:不区分类型
:nth-child(n){}选中同级别中的第n个标签
:nth-last-child(n){}选中同级别中的倒数第n个标签
:only-child{}选中父元素中唯一的元素
:nth-child(odd)选中同级别中所有奇数
:nth-child(even)选中同级别所有偶数
nth-child(xn+y)xy是用户自定义的,而n是计数器,从0开始递增 同级别标签有几个`n就是几然后带入
例子:p:nth-child(3n+0)三的倍数变化
--注意不区分类型
<style>
p:first-child{
color:red;
}
p:first-of-type{
color:blue;
}
p:last-child{
color:red;
}
</style>
</head>
<body>
<p>三年从</p>//变
<p>受刺激</p>
<div>
<p>彻底结束</p>//变
<p>现场目击</p>
</div>
</body>----同类型的第几个
```:last-of-type```选中同级别同类型的最后一个标签
```:nth-of-type(n)```选中同级别同类型的第n个标签
:nth-last-of-type(n)选中同级别同类型的倒数第n个标签
:only-of-type选中父元素中唯一类型的某个标签
:nth-of-type(odd)选中同类型奇数
:nth-of-type(even)选中同类型偶数
### 九属性选择器
* 什么叫做属性选择器?
---作用:根据指定的属性名称找到对应的标签,然后设置属性
* 格式:- [attribute]//根据指定的属性名称找到对应标签,然后设置属性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p[id]
{
color:red;
}
</style>
</head>
<body>
<p id="idential1">dg</p>
<p id="idential2">dg</p>
<p id="idential3">eg</p>
<p>ger</p>
<p id="idential4">ee </p>
<p id="idential5">ewgqg</p>
</body>
</html>- [attribute=value]//
---作用:找到有指定属性,并且属性的取值等于value的标签,然后设置属性
- [attribute=value]//
- 最常见的应用场景,就是用于区分input属性input[type=text]
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p[class=cc]
{
color:red;
}
</style>
</head>
<body>
<p id="idential1">dg</p>
<p id="idential2" class="cc">dg</p>
<p id="idential3" class="cc">eg</p>
<p>ger</p>
<p id="idential4" class="para">ee </p>
<p id="idential5">ewgqg</p>
</body>
</html>- 什么选择器是以什么开头的
[attribute| =value ] css2
作用:css2只能找到value开头,并且value是被-和其他内容隔开的
[attribute^=value] css3
作用:css2只能找到value开头,无论有没有被-隔开
<img alt="sdi-da"> - 属性的取值是以什么结尾的
[attribute$=value] css3
作用:
<style>
img[value$=abc]{
}
</style>
<img src="" value="scmsjabc">
<img src="" value="scmsj-abc">
<img src="" value="sabccmsj">
<img src="" value="sjabc"cms>- 属性的取值是否包含某个特定的值
[attribute~=value] css2
作用;只能找到独立的单词,也就是包含value ,并且value是被空格隔开的
[attribute*=value] css3
作用;只要包含value就可以找到
十 通配符选择器
- 什么叫通配符选择器?
--作用:给当前界面上所有的标签设置属性. - 格式:
* {
属性:值;
}注意:
由于通配符选择器是设置界面上所有的标签的属性,所以在设置之前会遍历所有的标签,如果当前界面上的标签较多,那么性能就会比差,所有在企业开发中一般不会使用通配符选择器
<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">