CSS选择器

• CSS选择器常见的有几种?
• 类型选择器（元素选择器）：

只需指定希望应用样式的元素名称
p {color: black;}
h1 {font-weight:bold;}

• 后代选择器

用来寻找特定元素或元素组的后代，后代选择器由两个选择器之间的空格表示。
blockquote p {padding-left: 2em;}
//此例表示只给blockquote块引用标签的后代的p元素的增加两个字体大小宽度的左内边距。

示例

上述选择器适用于那些应用范围广的一般样式。

• ID选择器和类选择器

寻找更特定的元素，ID选择器由一个"#"字符表示，类选择器由一个"."点号表示。
#intro {font-size: 20px;}//使简介段落中的文本大小设置为20px
.date-posted {color: green;}//使日期显示为绿色

ID和类选择器

• 通用选择器

通配符 * 表示选择所有可用元素，通用选择器一般用来对页面上的所有元素应用样式。
    *  {margin: 0; padding: 0;}//删除每个元素上默认的浏览器内边距和外边距。

• 伪类选择器

有时候我们需要根据文档结构之外的其他条件对元素应用样式,例如表单和链接的状态。
应用于链接：
a:link {color: blue;}//a链接未访问时颜色为蓝色
a:visited {color:green;}//a链接访问过后颜色为绿色
a:hover, a:focus, a:active {color:red};//当a链接被指向、被焦点选中、被点击时颜色为黄色.

应用于表单和表格：
tr:hover {background-color: red;}
input:focus {background-color: yellow;}

表单焦点选择时

表格移入时

把伪类连在一起，创建了更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。
a:visited:hover {color: olive;}//当a链接被访问过后鼠标悬停在上面时显示橄榄绿色。

被访问过后的悬停

• :link和:visited称为链接伪类，只能应用于锚元素。
• :hover、:active和:focus称为动态伪类，理论上可以应用于任何元素，但IE6只应用于:active和:hover，IE7在任何元素上都支持:hover,但是忽略:active和:focus。
• 子选择器：

后代选择器选择一个元素的所有后代包括“子元素”和“孙元素”、“曾孙元素。。。”，而子选择器只选择元素的直接后代，既“子元素”
#nav>li {background-color: green; padding-left: 20px;}//外层列表项的背景颜色为绿色，而嵌套列表中的列表项不受影响。

• IE6不支持子选择器

可以用通配符选择器覆盖来达到子选择器的效果。
#nav li {background-color: green; padding-left: 20px;}
#nav li * {background-color: none; padding-left: 0;}

子选择器

• 相邻同胞选择器：

可用于定位同一个父元素下某个之后的元素
例：使用相邻同胞选择器让顶级标题后面的一个段落显示为灰色加粗，并且字号比后续段落大一点
h2 + p {
 font-size: 1.4em;
 color: #777; 
font-weight:bold;
}

相邻同胞选择器

• 普通兄弟选择器：

例：对应相邻同胞选择器，让顶级标题后面的所有段落显示为灰色加粗，并且字号比后续段落大一点
h2 ~ p {
 font-size: 1.4em;
 color: #777; 
font-weight:bold;
}

普通兄弟选择器

• 属性选择器

属性选择器可以根据某个属性是否存在或属性的值来寻找元素。
例：有title属性的p元素文本为红色，底边加一个虚线使得这段文本更加突出，并且使用动态伪类使得这个带有title属性的p元素在被选中和悬停时鼠标符号改为问号。
p[title]{
  color:red;
  border-bottom: 1px dotted #999;
}
p[title]:hover, p[title]:focus{
  cursor: help;
}

属性选择器达到有意思的效果

• 选择器的优先级是怎样的?

• 选择器的优先级取决于选择器的特定性

  
  
  

  css选择器优先级计算
• 选择器优先级一致：下面的样式会覆盖前面的

!important:div{color:blue;!important}优先级最高
内联样式:

这是h3标题

优先级排第二

经过试验后代选择器优先级大于子选择器

• class 和 id 的使用场景?
• 如果你想要创建一个“组”，以便增加样式，就可以使用了class类，把你的元素放在这里类中，这样就能为这个类中的所有元素一起指定样式了。如果你想对多个元素重用某种样式，才能真正发挥类的作用。
• 如果只有一个元素需要制定样式，这种情况下应该使用ID。比如有些东西你希望页面上只能有一个，比如页脚、导航条、页眉，这些东西在页面上不会出现两个。
• 当然，即使只有一个元素，你也可以单独对它使用类，如果给这儿类增加另一个元素，那你这个元素就没有唯一的样式了。
• id的使用场景:

1 包含页面页脚的一个段落。
2 包含“每日精选”的图片。
3 包含任务列表的一个

元素.

• class的使用场景：

1 包含公司简介的一组标题和段落。
2 包含电影评论的一组

元素。
3 包含某人引用的一些元素。

• 使用CSS选择器时为什么要划定适当的命名空间？
• 保持 CSS 便于维护
• 保持代码清晰易懂
• 保持代码的可拓展性
• 划定适当命名空间的技巧
• 控制css样式行宽的大小，比如保持在80字节以下。
• 使用四个空格而非TAB，把样式声明拆分为多行。
• 使用多个文件写样式。
• 给你的样式文件设置目录。

可参照weakish作者的《编写可维护的CSS》一文
https://segmentfault.com/a/1190000000388784

• 以下选择器分别是什么意思?

#header{}/*选择id名为header的元素*/
.header{}/*选择class名为header的元素*/
.header .logo{}/*选择class名为header元素下后代class名为logo的元素*/
.header.mobile{}/*选择在class名为header mobile的元素*/
.header p, .header h3{}/*选择class名为header元素下后代里的p元素和class名为header元素下后代里的h3元素*/
#header .nav>li{}/*选择id名为header元素下后代class名为nav的元素下第一代子元素为li的元素*/
#header a:hover{}/*选择id名为header元素下后代的a元素鼠标悬停的状态*/

• 列出你知道的伪类选择器

伪元素选择器	功能描述
::first-line	匹配文本块的首行
::first-letter	选择文本块的首字母
:before	在选中元素的内容之前插入内容
:after	在选中元素的内容之后插入内容

结构性伪类选择器	功能描述
根元素选择器
:root	匹配文档中的根元素
子元素选择器
:first-child	选择元素的第一个子元素
:last-child	选择元素的最后一个子元素
:only-child	选择元素的唯一子元素
:only-of-type	选择元素指定类型的唯一元素
:nth-child选择器
:nth-chlid(n)	选择父元素的第n个子元素
:nth-last-child(n)	选择父元素的倒数第n个子元素
:nth-of-type(n)	选择父元素定义类型的第n个子元素
:nth-last-of-type(n)	选择父元素定义类型的倒数第n个子元素

UI伪类选择器	功能描述
:enabled	选择启用状态的元素
:disabled	选择禁用状态的元素
:checked	选择被选中的input元素(单选和复选)
:default	选择默认元素
:valid	根据输入验证选择有效或无效的input元素
:invalid
:in-range	选择在指定范围之内或之外受限的input元素
:out-of-range
:required	根据是否允许:required属性选贼input元素
:optional

动态伪类选择器	功能描述
:link	选择链接元素
:visited	选择用户已访问的链接元素
:hover	匹配鼠标悬停在其上的元素
:active	匹配用户即将点击的元素
:focus	当前获得焦点的元素

• :first-child和:first-of-type的作用和区别
• :first-child结构上父元素下第一个元素
• :first-of-type结构上父元素下相同类型子元素中的第一个，不再限制是第一个子元素了，只要是该类型元素的第一个就行了
• p:first-child表示第一个元素且为p标签。
• p:first-of-type表示第一个p标签的元素。

• 效果相同的情况

  
  
  

  效果相同

• p:first-child无效的情况，这里我们需要两个判断
  1 找到第一个元素(下图找到的第一个元素是div)
  2 判断找到的第一个元素是否为p标签，如果是则匹配样式，不是则不匹配
  （这里选择器找到的第一个元素是div不是p所以css无效）

  
  
  

  first-child无效

• 而用p:first-of-type选择的话，这里只需要一个判断
  1 找到第一个为p标签的元素（这里选择器直接找到所有的p标签然后选择第一个p元素匹配样式）

  
  
  

  first-of-type有效

• 运行如下代码，解析下输出样式的原因。

 
 
    
aa
 
    
bb
 
    
ccc
 

效果

• .item1:first-child{ color: red;}
  这条选择器找到class="item1"元素的父类
  class="ct"下的第一个元素且class为item1的元素字体颜色为红。

• .item1:first-of-type{ background: blue;}
  表示class="item1"元素的父类class="ct"下同一类型元素组里的第一个元素且class为item1的元素背景色为蓝色。
  上段代码中

  aa

  和

  bb

  都是当前父类下class为item1的p元素和h3元素组的第一个元素，所以被选中。

• 改变一下html上面class的命名，观察h3的样式匹配(of-type的判断最后是要具体选择到标签上)

  
  
  

  效果

• 下面加入第二个div，可以观察:first-of-type选择器

  
  
  

  第一个例子

• 这里找到了class为item1的div但是这个div在父元素下同类型中是第二个div所以无效了。

  
  
  

  第二个例子

• 这里的新例子使用了:nth-of-type(2)，选择了第二个元素，可以证明:first-of-type这个伪类选择器判断条件里有一个且判断
  

  

  新例子

• text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

• 作用是使行内元素居中，只能作用在行内元素上，而不能使块元素居中

  
  
  

  只能使行内元素居中

• 如果遇到一个属性想知道兼容性，在哪查看?

• http://caniuse.com/可以搜索属性兼容性。

• http://caniuse.com/#search=new%20elements 搜索new elements可查看HTML5新增加的语义标签。

本博客版权归 杨然和饥人谷所有，转载需说明来源