CSS样式表中的基本选择器

样式表中的选择器

作用：用于选则控件，设置样式
常用的样式选择器：
一、基础样式选择器

1、id选择器  用#来选择  ps：id是唯一的不允许重复
   #id的名称{
        样式：值
         }        -------给id为指定名称的控件，设置样式

css代码如下：

<style type="text/css">
			#box1{
				/* 宽度为200px */
				width: 200px;
				/* 高度为200px */
				height: 200px;
				/* 背景颜色 */
				background-color: aquamarine;
			}
		</style>

效果如图：

2、类选择器  用.（点）来选择 ps：class是允许重复的  可以同时选择多个
          .类的名称{
            样式：值
                } ------给class为one的控件设置样式  

css代码如下：

<style type="text/css">
			.one{
				/* 200px的宽 */
				width: 200px;
				/* 200px的高 */
				height: 200px;
				/* 背景颜色为aqua(蓝色) */
				background-color: aqua;
				/* 1px 的细实线 红色的  边框 */
				border: 1px solid red;
			}
		</style>

效果如图：

3、标签选择器   标签选择器用标签的名称选择
      存在的标签名称{
       样式：值
        }     -------给li标签设置样式

css代码如下：

<style type="text/css">
			li{
				/* 颜色为红色red */
				color: red;
			}
		</style>

ps：在我写的代码中 下面有li标签 所有我可以使用标签选择器来选择所有的li标签。

效果如图：

二、扩展样式选择器
注意： 这些标签 因为使用不多 有的作用我也不是特别清楚 欢迎指正！

1、全局选择器    它的样式会应用到所有的控件，包括body，只要是页面中的标签都会生效
    *{
       样式:值
      }

 2、并集选择器    同时选择多个控件
       用法1  选择器1,选择器2,{
                          样式:值
                          }
       用法2     #**,.***,div{
                             样式:值
                              }

   3、后代选择器    只要是父元素包含的，就都会被选择
     
  	  父元素 后代元素{
                    样式：值
                    }

      例如：    div p{ 
                        
                          }   --------表示对div下的所有p标签有效  注意是所有的P标签

  4、父级选择器     
        父元素>子元素 {
                  样式：值
                      } 
        例如：    div>p{ 
                        
               }       ---------表示的对所有父元素是div的p标签有效

注意：
父级选择器和后代选择器是不同的 后代选择器 能把标签下的所有标签都选择 父级选择器只能选择父级是这个标签的 如上的代码 span里面的P标签 就不会被选中！
效果如图：

第二段因为是在span里面 所有他的父级标签 就不是div 所以 没有被选中。

 5、伪类样式选择器
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */ 

      当鼠标悬停在控件上时，选择控件

   标签名:hover{
            
          }

这个选择器的具体效果 要自己尝试 才能更明白 我的口才有限 不能给大家解释清楚！

6、属性选择器  
   [属性名=值]{
   
			}

这个标签 我不是特别熟 大家可以帮我补充一下 ！！‘

效果如图：