CSS选择器基础
2016-05-11 本文已影响176人
羞涩的涩
CSS选择器常见的有几种?
- ID选择器
#content {css样式} <div id="content"></div>权限高，慎用 - 类选择器
.content {css样式} <div class="content"></div>就是class选择器 - 派生选择器
table tr {css样式}选择某个元素下的子元素,一般用语作用域隔离 - 分组选择器
div, p { css样式}注意中间为英文逗号，两者为平行关系 - 属性选择器
input[type="text"] { css样式}使用场景偏少
选择器的优先级是怎样的?
优先级从高到低
- 在属性后面添加!important（特定情况下用，几乎很少）
- 在属性添加style样式（一般不推荐这样写）
- id选择器（在唯一特定的元素内使用）
- 类选择器（使用范围很广，经常使用）
- 伪类选择器（根据需求使用，注意优先级）
- 属性选择器（使用场景较少）
- 标签选择器（一般少量代码下使用）
- 通配符选择器（使用范围极少，不推荐用，会加大浏览器渲染负担）
- 浏览器自定义（权限较低）
class 和 id 的使用场景?
- class选择器是我们经常使用的选择器最广最多的选择器，可以给任何元素添加class名称。
- ID选择器使用前确定此元素权限较高且在文档里具有唯一性才可使用
使用CSS选择器时为什么要划定适当的命名空间？
是为了更好的匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误。
以下选择器分别是什么意思?
#header{
} /* ID选择器匹配ID为header的元素*/
.header{
} /*类选择器匹配所有class名为header的元素*/
.header .logo{
} /*匹配所有class名为header的后代里所有class名为logo的元素*/
.header.mobile{
} /*匹配同时具有class名为header和class名为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标签的鼠标悬浮动作*/
列出你知道的伪类选择器
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意，以上方法需要严格按照此顺序才能有效！
E:focus匹配获得焦点的e元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个元素为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个元素为1
E:nth-of-type(n)相当于E:nth-child(n)，不过是从同类标签开始数
:first-child和:first-of-type的作用和区别
-
:first-child选择器用于匹配其父元素的首个子元素里的选定标签
如：p:first-child {样式}为p的父元素下的第一个P元素标签 -
first-of-type选择器匹配属于其父元素下同种类型的第一个子元素
区别：:first-child属于强制性的，结构上的父元素下的第一个子元素，如果标签不准确会匹配不到的情况，而:first-of-type是在父元素下所有的子元素中检索到所要匹配类型的标签给他样式
参考博客:http://www.cnblogs.com/2050/p/3569509.html
运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
.item1:first-of-type{
background: red;
}
/*匹配所有class名为item1的元素（111、222、333、444、555、666）,
寻找其父元素下的第一个同类型的子元素使其背景为红，
111为父元素body下第一个div元素所以为背景为红，
222为父元素.ct下第一个p类型子元素所以背景为红，
333为父元素.ct下第一个div类型子元素所以背景为红，
444为第2个div子元素所以不变，
555为父元素.item2下第一个div类型子元素所以背景为红，
666为第2个所以不变*/
.item1:first-child{
color: blue;
}
/* 匹配所有class名为item1的元素（111、222、333、444、555、666），
寻找其父元素下第一个子元素使其颜色为蓝，
111为父元素body下第一个子元素所以变蓝，
222为父元素.ct下第一个子元素所以变蓝，
333和444分别为父元素.ct下第2个第3个子元素所以不变，
555为父元素.item2下第一个子元素所以变蓝，
666为第2个所以不变。
*/
</style>
</head>
<body>
<div class="item1">111</div>
<div class="ct">
<p class="item1">222</p>
<div class="item1">333</div>
<div class="item1">444</div>
<div class="item2">
<div class="item1">555</div>
<div class="item1">666</div>
</div>
</div>
</body>
</html>
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是让元素内容水平居中，主要作用于块级元素、表单格元素里的行内元素组成的内容（对块级元素本身不起作用）.
能够让块级元素内所有的由行内元素（a、span、img、input....）组成的内容水平居中。
如果遇到一个属性想知道兼容性，在哪查看?
在这个链接http://caniuse.com/ 框内查询其兼容性。
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
