CSS选择符（选择器）

CSS选择符（选择器）:

表示要定义样式的对象
1、元素选择符/类型选择符（element选择器 )

如：div{width:100px; height:100px; background:red;}

语法：元素名称 { 属性：属性值；}
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。
例如 body、div、p,img,em,strong,span…等。
b)所有的页面元素都可以作为选择符;
应用：
1)如果想改变某个元素得默认样式时，可以使用类型选择符；
（如：改变一个div、p、h1样式）
2) 当统一文档某个元素的显示效果时，可以使用类型选择符
（如：改变文档所有p段落样式）
特点：对页面中所有当前类型的元素进行选择。

2、id选择器
语法：#id名{属性：属性值;}（这个是写在样式中的） <标签 ID=“id名称”></标签>（这个是写在body中给元素起名）
说明：
A）当我们使用id选择符时，应该为每个元素定义一个id属性

如：

，

（向对象命名，然后再利用样式去找该对象，并对他进行修饰）
B）id选择符的语法格式是“#”加上自定义的id名

   如：#box{width:300px; height:300px;}

C）起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
D）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
E) 最大的用处：创建网页的外围结构。（大块）
取名方法：

1、连字符：如news-left, news-right,news-center.
2、下划线：如 news_left, news_right, news_center.
3、驼峰式：如 newsLeft, newsRight, newsCenter.

3、类选择器（class选择符）
语法：<标签 class=“class名称”></标签>
CSS中写： .class名{属性：属性值;}
特点：一个元素可以起多个class名称
例如<div class=”A A1 A2 A3 A…”>
说明：
A）当我们使用class选择符时，应先为每个元素定义一个class名称
B）class选择符的语法格式是：

"如：<div class="top"></div>"
.top{width:200px; height:100px; background:green;}   可以理解为为元素定义某种样式，然后后统一用，

用法：class选择符更适合定义一类样式；
4、群组选择器
语法：选择符1，选择符2，选择符3{属性：属性值;}
例：#top1,#nav1{width:960px;}
例：.选择符1，.选择符2，选择符3{属性：属性值；}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
5、包含选择器/后代选择器
语法：选择符1 选择符2{属性：属性值;} （简记：选择符空隔选择符{属性冒号属性值分号}）
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。

如：结构：<ul class="list">
                   <li></li>
                   <li></li>
                   <li></li>	
        </ul>
      样式 ： .list li{background:red;}

5.1:子选择器
语法：选择符1>选择符2{属性：属性值；}
说明：选择符1中的直接子选择符2

例：<div>
         <p><span>111111111</span></p>
         <span>2222222</span>
</div>

div>span{color:red;}只能将内容为222222的span标签改颜色
5.2:相邻兄弟选择器
语法：选择符1+选择符2{属性：属性值；}
5.3:通用选择器
语法：选择符1~选择符2{属性：属性值；}

*6、通配符/通配选择器
语法：{ 属性：属性值；}
说明：通配选择符的写法是“”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距和填充值；
margin:0 auto;元素的水平居中
7、 伪类选择器(伪类选择符)
语法 ：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。 lvha(简易记忆：lv好啊)
说明：
A）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link, a:visited, a:hover, a:active, 错误的顺序有时会使超链接的样式失效；
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;} 表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样