CSS---选择器种类 | 层叠性权重

一、css选择器种类

1.1，ID选择器

1.2，类选择器

1.3，标签选择器

1.4，后代选择器

1.5，子代选择器

1.6，交集选择器

1.7，并集选择器

1.8，通配符选择器

1.9，属性选择器

1.10，伪类选择器1--LVHA爱恨原则

1.11，伪类选择器2--ntl-child

1.12，伪元素选择器-- before, after

二、css的继承性和重叠性和!important

三、css使用总结

-----------------------------------------------------------

一、css选择器种类

1.1，ID选择器

选一个，id是唯一的。例如获取标签的id=‘name’的：$("#name")

1.2，类选择器

选一群。例如获取所有标签的class='c1'的：$(".c1")

1.3，标签选择器

选一群。例如获取所有的p标签：$("p")

1.4，后代选择器

选一群，获取某标签下指定类型的所有子孙标签。 例如：$("div p")、$(".content  div p")

1.5，子代选择器

选一群，只获取某标签的指定类型的子标签。例如：$(".content>p")

1.6，交集选择器

选一群，获取同时能被两种选择器都选上的标签，两种选择器紧挨在一起。

例如：$("h3.active") --- h3表示所有h3标签，.active表示所有active类标签，h3.active可以选中所有包含active类的h3标签

1.7，并集选择器

选一群，获取某几种选择器能获取的标签的集合，用逗号分隔。

例如：$("a,h3,h4")  表示所有的a标签+h3标签+h4标签

1.8，通配符选择器

选一群，选择所有标签。一般不用，性能不好    *{  font:....}

用下面的链接中的css清除默认样式：

https://meyerweb.com/eric/tools/css/reset/

1.9，属性选择器

选一群，属性选择器在表单控件中比较常用

[for]                    { /*找到属性为for的所有*/ }
label[for]             { /*找到label里面所有属性为for的*/ }

label[for="pwd"] {/*找到label里属性for="pwd"的*/}
[title^="hello"]     {/*找到所有title属性且值以hello开头的*/}
[title$="hello"]     {/*找到所有title属性且值以hello结尾的*/}
[title*="hello"]      {/*找到所有title属性，且值中包含hello字符串的*/}

1.10，伪类选择器1--LVHA爱恨原则

这个顺序必须是 l v h a 否则会出问题

/*点击前的a标签的样式*/
a:link{
　　color: #666;
}
/*鼠标点击a松手后的样式*/
a:visited{
　　color: yellow;
}
/*鼠标悬停在a上的样式*/
a:hover{
　　color: red;
}
/*鼠标点击不松手时a的样式*/
a:active{
　　color: green;
}

1.11，伪类选择器2--ntl-child

/*指定所有li中的第1个*/
li:first-child{
　　color: red;
}
  /*指定所有li中的最后1个*/
li:last-child{
　　color: red;
}
  /*指定所有li中的第1个*/
li:nth-child(1){
　　color: red;
}
  /*指定所有的li，n从0开始,0表示没有选中*/
div ul li:nth-child(n){
　　font-size: 20px;
}
  /*指定所有的li中的偶数行*/
div ul li:nth-child(2n){
　　text-decoration: underline;
}
  /*指定所有的li中的奇数行*/
div ul li:nth-child(2n-1){
　　text-decoration: underline;
}
  /*指定所有li中隔3换1=4n+1，隔4换1=5n+1...*/
div ul li:nth-child(4n+1){
　　text-decoration: underline;
}

1.12，伪元素选择器-- before, after

/*当前文本的第一个首字母*/
p:first-letter{
　　color: red;
}
/*在当前文本前添加内容。通常和content属性结合使用*/
p:before{
　　content: 'alex';
}
  /*相当于在文本后加了个span标签并且可以设置样式，后面可以清除浮动用*/
p:after{
　　content: '@';
　　color: blue;
　　font-size: 40px;
}

例如：<p>我是一个段落</p>    

二、css的继承性和重叠性和!important

继承性：子标签会继承祖宗标签的4种文本类属性：color  font-*  text-*  line-*

重叠性：权重大的会覆盖权重小的属性

1,看选中还是继承：选中 > 继承

2,都选中，看权重：选择器中id数量 >  选择器中class的数量 > 选择器中标签的数量

3,都继承，看谁描述的近，例如：继承自父亲的  大于  继承自爷爷的

!important:  可以把该属性的权重弄的无限大，例如：  color: red!important;

三、css使用总结

1，尽量少使用id选择器，因为id一般用到js的时候才用

2，使用类选择器尽量找共同样式，可以少些代码,用<div  class="sheet1 sheet2  sheet3">形式