CSS选择器

选择器

• id

• class

• 行内

• 标签

• 通配符选择器 *

• 链接伪类选择器

• • :link 未访问的链接

  • :visited 已访问的链接我们已经点击过一次的状态

  • :hover 鼠标移动到链接上

  • :active 选定的链接 当我们点击别松开鼠标显示的状态

• 结构伪类选择器(css3新特性)

• • :first-child 选取属于父元素的首个子元素的指定选择器。

  • :last-child 选择属于其父元素的最后一个子元素的指定选择器

  • :nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型 even 偶数 odd 奇数,如果用公式n从0开始 (从上往下数)

  • :nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式(从下往上数)

<ul>
  <li>第一个孩子</li>
  <li>第二个孩子</li>
  <li>第三个孩子</li>
  <li>第四个孩子</li>
  <li>第五个孩子</li>
  <li>第六个孩子</li>
  <li>第七个孩子</li>
 <ul>
/*li是ul的孩子，后面对应选择第几个孩子*/

 // even => 2n  偶数 2、4、 6 
 li:nth-child(even) {
     color:red
 }
 // odd => 2n+1/2n-1 奇数 1、3、5、7 
 li:nth-child(odd) {
     color:red
 }

• :target

目标伪类选择器：选择器可用于选取当前活动的目标元素

:target {
   color: red;
   font-size:3
 }

tips：link visited hover active 顺序不要改变，按照lvha的顺序。可简单写,只写一个hover。

css复合选择器

• 交集选择器

既属于p又属于red

p.red{
  font-size:    20px;
 }
<p class='red'>111</p>
 <p >222</p>

• 并集选择器

只要选择器都会执行后面样式

div,
p,
span {
color:blue;
font-size:18px
}

• 后台选择器

子孙后代都可以选择，用空格隔开

div p {
 color:pink;
}
<p>211</p>
<div>
  <p>
  111
  </p>
</div>

• 子元素选择器

只选择亲儿子

div > p {
 color:pink;
}

• 属性选择器(css3)

/*包含title这个属性*/
 
 a[title] {
  color:red;   
 }
 
 /*包含的属性等于*/
 
 input[type='text'] {
      color:red;
 }
<a href='#'
 title='测试1'>测试1</a>
 
 <input
 type="text"
 ></input>