CSS笔记（二）

三，选择器

1.基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器名称

以标签名作为样式应用依据

1.2 类选择器

使用自定义名称，以 . 号作为前缀，然后通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用依据

注意事项:

• 调用时不能添加.号

• 同时调用多个类选择器以 空格 隔开

• 类选择名称不能以数字开头

1.3 ID选择器

使用自定义名称，以 # 号作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用依据，一对一的关系

2.复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

  h1.aaa{     /*class为aaa的h1标签选择器
    	color:red;
    }
    <h1 class="aaa">复合选择器</h1>

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

 div,.d1,p,.d2{
   	font-size:60px;
   	color:blue;
   }
         <div>盒子</div>
		<h3 class="d1">div内部的h3</h3>
		<p>div内部的p</p>
<p class="d2">html</p>

2.3 嵌套选择器

在某个选择器内再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

 div h3{
    	background-color:orange;
    }
    div p{
    	background-color:green;
    }
    div>h2>p{
    	background-color:pink;
    }

<div>
	<h3 class="ddd">div中的标题h3</h3>
	<p>div中的段落p</p>
</div>>

<div>
	<h2 class="acb">
     <p> div内部的h2内部</p>
	</h2>
	</div>

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于 <a> 标签

四种状态:

• :link 未访问的链接

• :visited 已访问的链接

• :hover 鼠标移动到链接上，即悬浮在链接上

• :active 选定的链接，被激活

注：默认超链接为：蓝色、下划线

a:link,a:visited{
     font-size:13px;
     color:#666666;
     text-decoration:none;
    }
    a:hover,a:active{
    	color:#ff7300;
    	text-decoration:underline;
    }
      p:hover{
      	color:red;
      }
      p:active{
      	color:blue;
      }

<a href="https://www.baidu.com">百度</a>
<p>CSS</p>

2.5 伪元素选择器

• :first-­letter 为第一个字符添加样式

• :first-­line 为第一行添加样式

• :before 在元素内容的最前面添加内容，需要配合content属性使用

• :after 在元素内容的最后面添加内容，需要配合content属性使用

<style>
   p:first-letter{
   	color:red;
   }
   p:first-line{

   	font-style:italic;
   }
  p:before{
  	content:"我在前面";
  }
   p:after{
   	content:"我在后面";
   }
	</style>

3.选择器优先级

3.1 优先级

        行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器，再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载的会覆盖先加载的同名样式

3.2  内外部样式加载顺序

        就近原则

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优

<style>
   div{
   	color:green!important;
   }
     .aaa{
     	color:red;
     }
     #bbb{
     	color:pink;
     }
     p{
     	color:red;
     }
	</style>
	<link rel="stylesheet" href="style.css">
    <div class="aaa" id="bbb" style="color:blue;">CSS study</div>
    <p>HTML </p>

3.3 ！important

可以使用!important使某个样式有最高的优先级

 div{
   	color:green!important;
   }
<div class="aaa" id="bbb" style="color:blue;">CSS study</div>