CSS选择器

2017-04-12  本文已影响36人  muyang_js的简书
647982-818da2e694534f3b.png.jpeg

标签选择器

标签名称{
  属性:值;
}

<b>id 选择器</b>

#id名称{
  属性:值;
}

类选择器

.类名{
  属性:值;
}

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

id选择器和类选择器

注意：

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性

标签名称1 标签名称2{
  属性:值;
}

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

标签名称1>标签名称2{
  属性:值;
}

后代选择器和子元素选择器

交集选择器

选择器1选择器2{
  属性: 值;
}

并集选择器

选择器1,选择器2{
  属性:值;
}

相邻兄弟选择器

什么是相邻兄弟选择器 CSS2
作用: 给指定标签后面紧跟的那个标签设置属性

选择器1+选择器2{
  属性:值;
}

选择器1~选择器2{
  属性:值;
}

序选择器

序选择器是CSS3中新增的选择器最具代表性的就是序选择器
什么是序选择器?
作用: 选中指定的任意标签然后设置属性

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

:nth-of-type(odd) 选中同级别中同类型的所有奇数

:nth-of-type(even) 选中同级别中同类型的所有偶数
:nth-of-type(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的

[attribute$=value] CSS3
属性的取值是否包含某个特定的值得

[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到, 无论有没有被隔开
通配符选择器

作用: 给当前界面上所有的标签设置属性
格式:

*{
  属性:值;
}
上一篇 下一篇

猜你喜欢

热点阅读