本文主要是介绍css 类选择器 id选择器 html选择器 通配符选择器 父子选择器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、css使用的基本语法：
选择器 {
属性1：属性值；
属性2：属性值；
属性3：属性值；
.
.
.
}
2、Css使用的必要性：
（1）、统一网页不同个体的风格
（2）、可以使用滤镜
3、Css中常用的4种选择器：
（1）、类选择器，又叫class选择器：
类选择器格式：
. 类选择器{
属性名：属性值;
……
}
（2）、id选择器：
Id选择器格式：
#id选择器{
属性名：属性值;
……
}
（3）、html元素选择器：
html元素选择器格式：
Html元素名称{
属性名：属性值;
……
}
（4）、通配符选择器
* {
属性名：属性值;
……
}
（5）、父子选择器
#id1 span {color:red;font-size:60px;font-style : italic ;
}
Ø Css文件可以使用在各种文件中，如 .php, .html, .jsp, .asp, .net；
Ø 各种选择器优先级比较：Id选择器 > class选择器 > html选择器 > 通配符选择器；
Ø 父子选择器可以有多级，但实际开发中最好不要超过三层；
Ø 父子选择器有严格的层级关系；
Ø 父子选择器不局限于什么类型的选择器：
如：
#id1 span
.s1 #id1 font
Div #id1 .s1
这些形式均可以；
Ø 一个元素可以同时被id,class选择器修饰；
<span class="style1" id="id2">样式1一</span>
Ø 同一个元素不能同时被两个id选择器修饰，一个元素只能有1个id选择器，但可以有多个class选择器； <span class="style1 style2">样式1一</span>
Ø 当修饰同一个元素的多个类选择器发生冲突时，则以写在css文件中的后面的哪个类选择器为准；
Ø 在css文件中，如果有多个class、id选择器，他们有相同的部分，我们可以把相同的css样式放在一起；
5、说明：
css文件本身也会被浏览器下载到本地，才能显示效果。
实例：
<html>
<head>
<title>第二讲代码</title>
<!--css 部分可以单写一个文件(外联css)，然后引入，也可以直接嵌入到该html文件中（内联css）-->
<!--一个html文件可以引入多个css文件，多写几行即可-->
<link rel="stylesheet" type="text/css" href="a1.css" >
<link rel="stylesheet" type="text/css" href="a2.css" >
</head>
<body>
<!--<span> 属性用来组合行内元素（中间部分可看做一个整体），以便通过样式来格式化它们-->
<b>1、使用css统一网页不同元素风格,类选择器</b><br><br><br>
<span class="style1" style ="font-family:华文新魏">样式一</span>
<br/><br/>
<span class="style1">样式二</span>
<br/><br/>
<span class="style1">样式三</span>
<br/><br/>
<span class="style2">样式四</span>
<br/><br/>
<span class="style2">样式五</span>
<br/><br/>
<span class="style2">样式六</span>
<br/><br/><b>2、id选择器</b><br><br><br><span id="id1">样式七</span>
<br/><br/>
<span id="id1">样式八</span>
<br/><br/>
<span id="id1">样式九：不打算把课程包括数据初步设计课程不健康报报价</span>
<br/><br/><b>3、html选择器控制超链接</b><br><br><br><a href="http://www.baidu.com" >百度</a><br>
<a href="http://www.sohu.com" target="_blank">搜狐</a><br>
<a href="http://www.taobao.com" target="_blank">淘宝</a><br><br><br><b>4、对同一种html元素，分类显示问题</b><br><br><br><b class="cls1">11223344556677889900</b>
<br><br>
<b class="cls2">qqwweerrttyyuuiioopp</b>
<br><br><b>5、通配符选择器</b><br><br><br>
<!--如果希望所有的元素都符合某一样式，可以使用通配符选择器，但它的优先级是最低的。-->
<!--见.css文件，以网页边距属性margin为例--><b>6、父子选择器</b><br><br><br><span id="id1"><span>标<span>题</span>：</span>不打算把课程<font>包括数</font>据初步设计课程不健康报报价</span>
<br/><br/><b>7、一个元素被多种选择器修饰</b><br><br><br>
<span class="style1" id="id2">样式1一</span>
<br/><br/>
<span class="style1">样式1二</span>
<br/><br/>
<span class="style1">样式1三</span>
<br/><br/><b>8、一个元素被多个class选择器修饰</b><br><br><br>
<span class="style1 style3">样式1一</span>
<br/><br/>
<span class="style1">样式1二</span>
<br/><br/>
<span class="style1">样式1三</span>
<br/><br/><b>9、合并css文件选择器</b><br><br><br>
<!--在css文件中，如果有多个class、id选择器，他们有相同的部分，我们可以把相同的css样式放在一起；
把各个类选择器的公共部分，单独抽取写为一份，这样可以减少css的冗余--><span class="ad_1">恩格斯v输入个人</span>
<br/><br/>
<span class="ad_2">v都是v二嘎v是v上造成至</span>
<br/><br/>
<span class="ad_3">说v发多少v分DVD大幅度v别的服不</span>
<br/><br/><b>2、滤镜技术,不好用，没能明白</b><br><br><br>
<div><img src="b1.jpg" >
<img src="b2.jpg" >
<img src="b3.jpg" >
<img src="b4.jpg">
<img src="b5.jpg">
<img src="b6.jpg">
<img src="b7.jpg">
<img src="b8.jpg"></div></body></html>a1.css
/*.style1 叫做 类选择器*/
.style1 {color:green;font-size:30px;
}
.style2 {color:red;font-size:40px;
}/*id选择器的使用*/
#id1{color:yellow;font-size:50px;
}/*html选择器，使网页字体默认显示为橙色 */
body{color:orange;
}img{
width:300px;
filter :gray;
}
/*html选择器控制超链接*/
a:link{ /*伪类link设置 a 对象在未被访问前的样式。*/color:red;text-decoration : none;/*去掉文字装饰效果，这里指下划线*/font-size:24px;}
a:hover{ /*伪类hover设置对象在其鼠标悬停时的样式*/color:blue;text-decoration :underline;/*添加下划线*/font-size:35px;
}a:visited { /*伪类visited设置 a 对象在其链接地址已被访问过时的样式*/color:#c0ff00;font-size:50px;}a:active { /*伪类active设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。*/color:#40ff00;font-size:50px;}/*同一种元素的分类显示*/
b.cls1{color:#c0ff00;font-size:50px;
}b.cls2{color:#40ff00;font-size:53px;
}/*通配符选择器*/*{/*margin-top:0px; /* 消除外部上边距*//*margin-right:0px;margin-bottom:0px;margin-left:0px;*//*margin:0px;*//*margin: 10px 20px;*//*margin: 10px 20px 30px;*/margin: 10px 20px 30px 40px;/*margin取值含义：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边（以顺时针顺序）。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。*/}*{/*padding-top:0px; /* 消除元素内部上边距*//*padding-right:0px;padding-bottom:0px;padding-left:0px;*//*padding:0px;*//*padding: 10px 20px;*//*padding: 10px 20px 30px;*/padding: 10px 20px 30px 40px;/*padding取值含义：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边（以顺时针顺序）。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。*/}/*父子选择器（包含选择器）*/#id1 span {color:red;font-size:60px;font-style : italic ;
}#id1 span span { /*一定要注意层次关系*/color:green;}#id1 font{font-size:100px;}#id2 {font-weight : bold;font-style : italic ;
}/*一个元素被多个class选择器修饰*/
.style3 {font-weight : bold;text-decoration :line-through;background : red;
}/*合并css文件选择器*/
/*在css文件中，如果有多个class、id选择器，他们有相同的部分，我们可以把相同的css样式放在一起；
把各个类选择器的公共部分，单独抽取写为一份，这样可以减少css的冗余*//*我们可以把某个css文件中的选择器公有的部分，独立出来写一份；
例如以下三个选择器：
*/
/*广告一*/
.ad_1{width:20px;height:30px;background:red;float:left;margin:3px;
}
/*广告二*/
.ad_2{width:30px;height:40px;background:red;float:left;margin:3px;
}
/*广告三*/
.ad_3{width:40px;height:50px;background:red;float:left;margin:3px;
}/*由以上三个选择器可进行以下改写：*//*广告一*/
.ad_1{width:200px;height:30px;
}
/*广告二*/
.ad_2{width:300px;height:40px;
}
/*广告三*/
.ad_3{width:400px;height:50px;
}
/*将以上三个选择器的重合部分写入以下选择器*/
.ad_1,.ad_2,.ad_3{ /*注意用逗号隔开，否则就成了父子选择器了*/background:red;float:left;margin:3px;
}/*注意，经过以上改造的选择器还和原来一样使用，新生成的选择器 不需要出现在html文件中，会自动识别重合属性*/
这篇关于css 类选择器 id选择器 html选择器 通配符选择器 父子选择器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
