CSS选择器
2016-07-13 本文已影响84人
进击的阿群
一. CSS选择器常见的有几种?
CSS选择器：
1. 通配选择器：
* {
margin: 0;
padding: 0;
}
这种选择器在全局属性设置中比较常见，用途不多，一般会提前规定。
2. id选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task8</title>
<style type="text/css">
#header { /* 前面有#号 */
color: red;
background-color: silver;
}
</style>
</head>
<body>
<div id="header"> <!--这是id选择器-->
id选择器用“#”选择。
</div>
</body>
</html>
id选择器一般用于独一无二的区块或者重要元素。
3. 类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task8</title>
<style type="text/css">
#header {
color: red;
background-color: silver;
}
.topic { /* 前面有“.” */
text-align: center;
}
</style>
</head>
<body>
<div id="header">
头部
</div>
<h1 class="topic">大标题</h1><!--这是类选择器-->
</body>
</html>
类选择器用的比较多，因为可重复使用。
4. 标签选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task8</title>
<style type="text/css">
h1 { /* 直接写标签名称 */
text-align: center;
}
</style>
</head>
<body>
<div id="header">
头部
</div>
<h1>大标题</h1><!--这是标签选择器-->
</body>
</html>
标签选择器用的不多，一般与其他选择器配合使用。
5. 伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task8</title>
<style type="text/css">
a:active { /* E:属性 */
opacity: 0.5;
}
a:hover { /* 伪类选择器 */
opacity: 0.8;
}
</style>
</head>
<body>
<div id="header">
头部
</div>
<h1>大标题</h1>
<a href="#">这是一段链接</a>
</body>
</html>
6. 属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task8</title>
<style type="text/css">
input[type="text"] { /* 属性选择器 */
background-color: #0f0f0f; /* E[属性="属性值"] */
}
img[alt] { /* 只写属性名称，叫纯属性选择器 */
color: red; /* 能一次选择所有图片的alt */
} /* 还有很多属性选择器，不一一列举 */
</style>
</head>
<body>
<div id="header">
头部
</div>
<h1>大标题</h1>
账号：<input type="text" name="count">
密码：<input type="password" name="passwords">
<div class="div1">
<img src="" alt="1" />
<img src="" alt="2" />
</div>
</body>
</html>
7. 后代选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.box h1 { /* 后代选择器 */
background-color: yellow;/* 空格代表选择所有后代 */
}
.box > h1 { /* >代表选择.box的直接后代 */
background-color: red;
}
</style>
</head>
<body>
<h1>我是大标题</h1>
<div class="box">
<h1>我也是大标题</h1>
<div class="content">
<h1>我还是</h1>
</div>
<h1>我是事实</h1>
</div>
</body>
</html>
这个概念比较模糊，见效果图：
后代选择器
8. 伪元素选择器：
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
I'm the king of the world. ——《泰坦尼克号》
</p>
</body>
</html>
效果图：
伪元素选择器
9. 组合选择器：
组合选择器就是将各类选择器运用连接符组合使用，具体使用情况不尽相同，看需求，例如E+F、E~F、.E.F、等等。
2. 选择器的优先级是怎样的?
- !important
- style内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器默认样式
- 而具体情况是，选择器越具体，越接近下层，则越优先。
- 如果对同一个元素设置了不同样式，则：
- 内联样式
- style中越往下的样式
3. class 和 id 的使用场景?
class标签更加灵活，通常不会单独使用，而是和其他元素组合使用，由于其可重复使用的优点，在html文档中经常大量使用，相较于id选择器更加方便些。
id选择器主要用于特殊且重要的元素，以及外部结构区块。一般html文档会有很多区块，其中的主要结构区块都是用id选择器，结构语义化更清晰。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content,
#header,
#footer {
border: 1px solid #ccc;
}
.content {
border: 1px dashed red;
}
</style>
</head>
<body>
<div id="header">
头部
<h1 class="topic">大标题</h1>
</div>
<div id="content">
<h2>标题2</h2>
<div class="content">
<p class="content">
这是一个段落。
</p>
</div>
</div>
<div id="footer">
<div class="footer">
<a class="content" href="#">链接</a>
</div>
</div>
</body>
</html>
效果图：
class和id使用场景
4. 使用CSS选择器时为什么要划定适当的命名空间？
- 提高代码可读性；
- 便于维护管理；
- 保持代码的可拓展性；
- 避免结构冲突。
5. 以下选择器分别是什么意思?
#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{/* 选择祖先为class="header"
且直接父元素为class="nav"的li元素 */
}
#header a:hover{/* 选择祖先为class="header"的a元素的伪类:hover */
}
6. 列出你知道的伪类选择器
- :hover
- :link
- :active
- :first-of-type
- :first-child
- :nth-of-type()
- :nth-child()
- :last-of-type
- :last-child
- :focus
- :visited
7. :first-child和:first-of-type的作用和区别？
作用：
-
first-child匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 -
first-of-type匹配的是某父元素下相同类型子元素中的第一个，不限制是第一个子元素，只要是该类型元素的第一个就可以。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.box h2:first-of-type {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<h1 class="second">我是事实</h1>
<h2>我是事实</h2>
<h1>我是事实</h1>
<div class="content">
<h2>我还是</h2>
</div>
<h1>我是事实</h1>
<h1>我是事实</h1>
</div>
</body>
</html>
效果图：
first-of-type效果图
如果把
first-of-type换成first-child：
<style type="text/css" media="screen">
.box h2:first-child {
border: 1px solid red;
}
</style>
效果图：
first-child效果图
图中发现，值得注意的是：
即使是嵌套关系下的第一个子元素，也是会被匹配。
8. 运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.item1:first-child {
color: red;
}
.item1:first-of-type {
background: blue;
}
</style>
<body>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
效果图：
代码效果图
-
蓝色背景：样式里面设置了
first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。 -
红色字：
first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色字。
9. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
text-align: center作用是使元素水平居中，作用在块级元素上，让块级元素内部的行内元素水平居中。
10. 如果遇到一个属性想知道兼容性，在哪查看?
在can i use网站查询。
eg:
can i use
本文版权归本人和饥人谷所有，转载请注明来源，谢谢！
