黑马程序员技术交流社区
标题: 【上海校区】css中的几种选择器 [打印本页]
作者: 梦缠绕的时候 时间: 2018-7-31 09:51
标题: 【上海校区】css中的几种选择器
css中选择器有很多种，最常用的有元素选择器，类选择器，id选择器，群组选择器，通用选择器，组合选择器（包括后代选择器，子选择器，相邻兄弟选择器，普通兄弟选择器）。
一、元素选择器。对html文档中某元素进行样式设定，调用css文件后，页面关于设定的这个元素都继承此样式，不需要逐行去html中调用代码。eg：
body
｛
font-size:15px;
background-color:#000000;
color:white;
｝
p
{
text-indent:0;
}
a
{
text-decoration:none;
}
二.类选择器。以“.”开头定义，选择一类元素。命名规范推荐用“-”连接，例如：solution-title；类选择器写法如下：
css文档中：
.left
{
width:600px;
}
.right
{
width:300px;
}
html中调用：
<div class="left">左边部分</div>
<div class="right">y右边部分</div>
三.id选择器。每个html文档的id选择器都是唯一的，不可能出现两个一样的id选择器。id选择器写法如下：
css文档中：
#paral
｛
text-align:center;
color:red;
｝
html中调用：
<p id="paral">文本居中，字体为红色</p>
四.群组选择器。多个选择器下有相同的属性，可以写成一个群组属性。要根据实际情况考虑怎么使用，太频繁也可能造成结构混乱。写法如下：
h1,h2,h3,h4,h5,h6,p,body,html
{
margin:0;
padding:0;
}
/*一般对一组元素设定样式，同元素选择器一样也不需要在html中调用*/
.left
{
float:left;
}
.clear
{
cleat:both
}
/*用的比较多的浮动、清除浮动等可以专门定义个简单好记的类选择器，调用起来方便。这种要在html中调用。*/
五、通用选择器。用“*（通配符）”代表所有元素。eg:
*
{
font-size:14px;
}
/*表示文档中所有字体大小均为14像素*/
*
｛
margin：0；
padding:0;
｝
/*表示文档中所有元素外边距和内边距均设置为0*/
六、组合选择器可表示两个选择器之间的关系，它包括了4中组合方式：
- 后代选择器（以空格分隔’ ‘）；
- 子元素选择器（以大于号分隔’>’）;
- 相邻兄弟选择器（以加号分隔’+’）；
- 普通兄弟选择器（以破折号分隔’~’）。
（1）后代选择器。文档中有元素a和b，b元素如果包含在a元素中，那么它继承a的所有属性。只要b在a中不管是几级嵌套b都有a的属性。写法如下：
<html>
<head>
<meta charset="utf-8">
<title>css组合选择器之后代选择器</title>
<style>
div p
{
color:blue;
}
</style>
</head>
<body>
<div>
<p>我的老家在陕西1</p>
<span><p>我的老家在陕西2</p><span>
我的老家在陕西3
</div>
<p>我的老家在陕西4</p>
<p>我的老家在陕西5</p>
</body>
</html>
后代选择器运行结果：
（2）子选择器。和上面的后代选择器类似，但有一点不同只有某元素a的子元素b才继承a的属性。可以这样理解后代选择器是子子孙孙都继承属性，而子元素选择器只有儿子继承父亲的属性。 子选择器写法（修改上面后代选择器案例代码）：
将div p改为div>p子选择器运行结果：
（3）相邻兄弟选择器。和元素a相邻的同一级别的元素具有其属性。 相邻兄弟选择器写法（修改子选择器案例代码）：
将div>p修改为div+p相邻兄弟选择器运行结果：
（4）普通兄弟选择器.顾名思义，只要是同一级别的元素都具有此属性。 普通兄弟选择器写法（修改以上相邻兄弟选择器案例代码）：
将div+p改为div~p普通兄弟选择器运行结果：
作者: wuqiong 时间: 2018-7-31 10:26
作者: 不二晨 时间: 2018-7-31 11:52
奈斯，很赞
作者: 梦缠绕的时候 时间: 2018-7-31 12:04
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |