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">