css选择器
2016-07-18 本文已影响12人
ahong_吴
一、CSS选择器常见的有几种?
- *选择器
*{
margin: 0px;
padding: 0px;
}
选择所有的元素，一般用于margin，padding设置为o。
- id选择器
#id{
color: blue;
}
以#开头，id名称只能有一个不能有两个，页面上所有的id都不能一样。
- 类选择器
.class{
color: blue;
}
选择class=""的所有元素。
- 标签选择器
p{
color: blue;
}
直接选择一个html标签
- 属性选择器
<style>
input[type="text"]{
outline: none;
}
</style>
</head>
<body>
<form name="myForm" action="" method="get">
<input name="usernamne" type="text" placeholder="用户名" maxlength="10"/><br/>
<input name="password" type="password" placeholder="密码"/>
<input type="submit" value="提交" />
</form>
</body>
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
- 组合选择器
a,p{
color: blue;
}
Paste_Image.png
- 伪类选择器
a:hover{
color: blue;
}
Paste_Image.png
二、选择器的优先级是怎样的?
从高到低分别是：
- 在属性后面使用 !important，会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 多个选择器与这个元素匹配时，如果一个规则比其他规则更特定，它就会胜出。
Paste_Image.png
三、class 和 id 的使用场景?
- 把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
- id需要具有唯一性，并且尽量在外围使用，如网页的大致布局。
四、使用CSS选择器时为什么要划定适当的命名空间？
- 简洁明了，可读性好
- 便于团队开发和维护
- 免于与其他样式发生冲突
五、以下选择器分别是什么意思?
#header{
} /*id选择器*/
.header{
} /*class选择器*/
.header .logo{
} /*后代选择器，选择.head下面的所有.logo元素*/
.header.mobile{
} /*选择同时具有.header.mobile的的元素*/
.header p, .header h3{
} /*选择header下的p和h3元素。*/
#header .nav>li{
} /*选择id为header后代中，nav下的直接子元素li。*/
#header a:hover{
} /*选择id为header后代中a元素，设置a的鼠标悬停状态*/
六、:first-child和:first-of-type的作用和区别
.box>hi:first-child 选择box中所有元素的第一个h1
.box>h1:first-of-typ 选择box中所有h1标签中第一个h1
七、运行如下代码，解析下输出样式的原因。
Paste_Image.png
八、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是让文本居中，但是只能运用于块级元素中。比如div里面的图片、文字。
Paste_Image.png
九、如果遇到一个属性想知道兼容性，在哪查看?
在can i use上查看
Paste_Image.png
