6.1.2.4 css 选择器
1 基本选择器
1.1 标签选择器
直接拿标签名 如:
p{
color: red;
}
1.2 id 选择器
1) # 来选中ID
<span id="span_id">xxx</span>
2) <!--同一个页面中,id 必须惟一,不区分大小写-->
3) 命名规范,同python变量名
4) 任何标签都可以设置id
#id名{
color: red;
}
1.3 类选择器
1) . 来选择类
2)类可以重复,归类
3) 同一标签中可以携带多个类,用空格隔开
4)类的使用 能够决定前端工程师的水平
总结:
1. 不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同完成样式
2. 每个类要尽可能的小,有公共的概念,能够让更多的标签使用。
到底使用id还是用class?
答案:尽可能的用class.除非一些特殊情况可以用id
原因: id一般是用在js的。也就是说js是通过id来获取到标签。
2 高级选择器
2.1 后代选择器 空格
如: div p{ }
2.2 子代选择器 >
如:div>p{ }
2.3 交集选择器 直接写在一起
如:
h3{}
.active{}
h3.active{交集的部分}
2.4 并集选择器 也叫组合选择器
CSS3.0
3. 属性选择器:[]
通常使用在表单控件中,使用比较频繁
如: [for]{
}
label[for]{} # lable标签里的for属性
label[for="pwd"] {....} # label并且for=="pwd"的标签
label[for^='vip']{ } # for属性值以vip开头
lable[for$='xx'] {} # 以xx结尾
[for*='ser'] {} # 包含'ser'关系
[title~='hello'] {} # 找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素
4. 伪类选择器 :
通常用在a标签中, ‘爱恨原则 love hate’
a:link{} # 没有被访问的a标签的样式
a:visited{} # 访问过后的a标签的样式
a:hover{} # 鼠标悬浮时的a标签的样式
a:active{} #鼠标点住的时候a标签的样式
div ul li:first-child{} # 选中第一个元素
div ul li:last-child{} #选中最后一个元素
div ul li:nth-child{数字或n或表达式} # 0:没有选中 1: 第一个,2:第2个, n: 选中所有
# 2n:偶数 2n-1:奇数 隔m换色:(m+1)n+1
5. 伪元素选择器
5.1 p:first-letter{} 当前文本元素第一个字母
如:<p>我是一个段落</p> ,#设置“我”的样式
5.2 p:before{content:'alex'} # 在p标签的内容最左边加内容'alex',一定要结合content属性。在...之前,使用不是很频繁
5.3 p:after{content:'&';color:red;} #在..之后,使用非常频繁,通常与我们后面要使用的布局有很大关联(清除浮动)。
快捷键:
如:div>ul>li<tab> ==> div下有ul,ul下有li
input.box<tab> ==> <input type="text" class="box">
input#xx<tab> ==> <input type="text" id="xx">