常用 css 选择器

----------------------------------基本选择器-------------------------------

e : 标签选择器,悬着所有e类型的元素,,,p{font-size:20px}

.className: 类选择器,选择所有class 属性中包含className值得元素  .red{color:#0000} p.red{color:#FF00FF}

#IdName : ID选择器,选择所有元素id属性值等于IdName的元素..#main{color:red} p#main{color:red}

* : 通用选择器,选择指定范围内的任何元素....*{margin:0;padding:0}

 

----------------------------------组合选择器-------------------------------

e,f: 分组选择器,同时选择所有e元素 f 元素,e和f之间用逗号分隔.body,p{color:Red}

e f: 后代元素选择器,选择所有属于e元素后代的f元素,e 和f 之间用空格分隔 #main ul{ background-color:red}

e>f : 子元素选择器,选择所有e元素的子元素f #mian>p{color:Red}

e+f: 毗邻元素选择器,选择所有紧随e元素之后的统计元素f  #mian+p{color:red}

e~F : 邻后元素选择器,选择所有在e元素之后的同级f元素...#mian~p{color:red}

----------------------------------属性选择器-------------------------------

e[att]:选择所有设置att属性的e元素,不关注属性是否定义了值..p{calss}{color:red}

e[att=val]:选择所有att属性值等于val的e元素   p[class=red]{color:Red}

e{att~=val}:选择所有att属性值包含多个空格分隔的值,其中一个值等于val的e元素 p[class~=red]{colo:Red}

e[att|=val]:选择所有att属性值包含多个连字符分隔的值,其中一个值以val开头的e元素 p[class|=red]{color:Red}

e[att^="val"]:选择所有att属性值以val开头的e元素  p[class^=red]{color:red}

e[att$='val']:选择所有att属性值以val结尾的e元素  p[class$=red]{color:Red}

e[att*='val']:选择所有att属性值包含val的e元素 p[class*=red]{color:Red}

 

----------------------------------伪类选择器-------------------------------

e:link: 选择所有未被单击的e元素 p:link{color:Red}

e:visited:选择所有已经被单击的e元素 p:visited{color:red}

e:active: 选择所有鼠标被按下时的e元素p:active{color:Red}

e:hover:选择所有鼠标经过时的e元素 p:hover{color:Red}

e:focus:选择获得焦点的e元素  p:focus{border:1px solid #FF00FF}

e:first-child: 选择父元素的第一个子元素 div:firsr-child{background-color:red}

e:lang(c):选择lang属性等于c的e元素  q:lang(ch){color:blue}

----------------------------------伪对象选择器-------------------------------

e:first-line: 选择e元素的第一行对象   p:first-line{color:red}

e:first:letter: 选择e元素的第一个字母   p:first-letter{color:red}

e:before: 在e元素之前插入生成的内容 p:before{color:red}

e:after:在e元素之后插入生成的内容 p:after{color:Red}

----------------------------------用户界面选择器-------------------------------

用户界面选择器属于伪类选择器,用来标识表单元素的状态,也称为UI元素状态伪类..

e:enabled: 选择表单中激活的e元素 input:enabled{color:red}

e:disabled: 选择表单中禁用的e元素  input:disabled{color:gray}

e:checked: 选择表单中被选中的e元素,如Radio(单选框)或者 checkbox input:checked{color:red}

e:selection: 选择表单中当前被选中的元素,如radio和checkbox 元素或option...input:selection{color:Red}

----------------------------------结构性选择器-------------------------------

结构性选择器也属于伪类选择器..

e:root: 选择文档的跟元素,对于HTML文档来说,就是HTML元素. p:root{color:Red}

e:nth:-child(n): 选择父元素的第n个子元素,第一个编号为1..p:nth-child(1){color:red}

e:nth-last-chilad(n): 选择父元素的倒数第n个子元素,第一个编号为1..p:nth-last-child(2){color:Red}

e:nth-of-type(n): 与:nth-chilad()选择器作用类型,但是仅匹配使用同种类型标签的元素. p:nth-of-type(1){color:Red}

e:nth-last-of-type(n):与:nth-last-child()选择器作用类型,但是仅匹配使用同类型的标签元素... p:nth-last-of-type(3){color:Red}

e:last-child: 选择父元素的最后一个子元素,等同于:neht-last-child(1) p:last-child{color:Red}

e:first:of-type: 选择U父元素下使用同种标签的第一个子元素,等价于:nth-of-type(1).. p:first-type{color:Red}

e:last-of-type: 选择父元素下使用同种标签的第一个子元素等价于:nth-last-of-type(1)..p:last-of-type{color:red}

e:only-child: 选择父元素下仅有的一个子元素,等价于:first-child:last-child 或 :nth-child(1):nth-last-child(1)...p:only-child{color:red}

 

e:empty: 选择一个不包含任何子元素的元素,其中文本节点也可以作为子元素而存在.. p:empty{color:red}

----------------------------------其他择器-------------------------------

e:not(s) :选择不符合当前选择器的任何元素 ... p:not{color:Red}

e:target: 选择文档中特定Id元素被单击后的效果  p:target{color:red}

 

-------------------------------层级选择器-----------------------------------

 使用jQuery:

 $(function () {

$("div").css("border", "solid 1px red");//控制文档中所有的div元素            

$("div>div").css("margin", "2em");//素包控制div元含的div子元素 , 实际上他与div div包含选择器嗦匹配的元素是相同的            

$("div div").css("background", "red"); //控制最外层div元素包含的所有div元素            

$("div div div").css("background", "green"); //控制第三层及其以内的div元素            

$("div+p").css("margin", "2em"); //控制div相邻的p元素            

$("div:eq(1) ~ p").css("background","lightblue");//控制div后面并列的所有p元素        

});

HTML代码如下:

 

<div>一级div元素
     <div>二级div元素
       <div>

       三级div元素
       
       </div>
       <p>段落文本l_1</p>
       <p>段落文本l_2</p>
     </div>
     <p>段落文本2_1</p>
     <p>段落文本2_2</p>
  </div>
   <p>段落文本3_1</p>
   <p>段落文本3_2</p>

-------------------------------子元素选择器-----------------------------------

<script src="jQuery路径" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

 $("ul li:first-child").css("color", "red");            

$("ul li:last-child").css("color", "blue");            

$("ul li:nth-child(1n)").css("background", "#ff6").css("color", "green");            

$("ul li:nth-child(2n)").css("background", "blue").css("color","lightblue") ;        

});

</script>

 

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
  <li>列表7</li>
  <li>列表8</li>
  </ul>

 

以上是平时学习时做的一些记录,方便自己回头复习用的...并不是完整的资料...