css选择器

标签选择器

标签选择器就是元素自身，定义时直接使用元素标签名称。如定义段落样式，可以选择p元素的名称，即把p作为选择器。

格式：标签名{}

p{color:green;}

 

类名选择器

类选择器也称自定义选择器，使用元素的class属性值为一组元素指定样式，类选择器必须在元素的class属性值前加“.”

.center{text-align:center}

 如果应用在下面的HTML代码中，h1和p元素都有center类，这意味着两者都将遵守.center选择器中的规则。

<h1 class="center">这个标题将被居中</h1>
<p class="center">这个段落也将被居中</p>

 

id选择器

id选择器使用元素的id属性值为元素指定样式，id选择器必须在元素的id属性值前加“#”。

#red{color:red;}
#green{color:green;}

在下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

通用选择器

通用选择器是一种特殊的选择器，用“*”表示，CSS中的通用选择器与Windows通配符“*”具有相似的功能，可以定义所有元素的样式。

*{font-size:12px; /*<定义文档中所有字体大小为12像素>*/}

 上面的样式将会影响文档中所有元素，即文档中所有字体大小都被定义为12像素。使用通用选择器时要慎重，一般常用于定义文档中各种元素的共同属性，如字号、字体等。

 优先级：!important>行内样式>id>类>标签>*

层次选择器

后代

标签1 标签2{} ：选中标签1里面的标签2

在下面代码中，希望列表中的strong元素变为斜体字，而不是默认的粗体字。

<p><strong>粗体字</strong></p>
<ol>
  <li><strong>斜体字</strong></li>
  <li>正常字体</li>
</ol>

可以定义如下派生选择器，这样只有li元素中的strong元素样式为斜体字。
 

li strong{font-style:italic;font-weight:normal;}

 

子代

子元素选择器只能选择作为某元素的子元素声明样式，子选择器使用“>”号。

标签1>标签2：选中标签1中的子代标签2

如希望选择只作为h1元素的子元素strong，可以这样写：

h1>strong{color:red;}

这个规则会把下面代码中第一个h1下面的strong元素变为红色，但是第二个strong不受影响。
 

<h1>这是<strong>非常</strong>重要的</h1>
<h1>这个<em>已经<strong>非常</strong></em>重要了</h1>

 

后代可以包含子代，子代只能是父元素的第一层

 

 兄弟 

元素1+元素2：选中元素1后面第一个相邻的兄弟元素2

增加紧接在h1元素后出现的段落的上边距

h1+p{margin-top:50px;}

元素1~元素2：选中元素1后面所有的兄弟元素2

增加h1元素后所有的段落的上边距

h1~p{margin-top:50px;}

结构选择器

选择器1 选择器2:first-child
在选择器1中选择第一个元素，并且该元素与选择器2选中的元素相同

ul li:first-child {color: pink; } 

 选中ul里的第一个元素，而且这个元素是li，把颜色变成粉色 ，lorem1变成粉色

<ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        
</ul>

选择器1 选择器2:first-of-type
在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2

ul li:first-of-type {color: pink;} 

选中ul里的所有li元素，然后把第一个变成粉色 。lorem1变成粉色

<ul>
        <h2>结构选择器</h2>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        
</ul>

选择器1 选择器2:last-child
在选择器1中选择最后一个元素，并且该元素与选择器2选中的元素相同

ul li:last-child {color: pink;} 

选中ul里的最后一个元素，而且这个元素是li，把颜色变成粉色 ，lorem3变成粉色 

<ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        
</ul>

选择器1 选择器2:last-of-type
在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2

ul li:last-of-type {color: pink;} 

选中ul里的所有li元素，然后把最后一个变成粉色 。lorem3变成粉色

<ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <h2>结构选择器</h2>
</ul>

选择器1>选择器2:nth-child(num)
在选择器1中选择第num个元素，并且该元素与选择器2选中的元素相同

ul>li:nth-child(2) {color: pink;} 

选中ul里的第二个元素，而且这个元素是li，把颜色变成粉色 ，lorem2变成粉色 

<ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        
</ul>

选择器1>选择器2:nth-of-typr(num)
在选择器1中的使用选择器2选中元素，再找第num个出现的元素

ul>li:nth-of-typr(2) {color: pink;} 

 选中ul里的所有li元素，然后把第二个变成粉色 。lorem2变成粉色

<ul>
        <li>lorem1</li>
        <h2>结构选择器</h2>
        <li>lorem2</li>
        <li>lorem3</li>
        
</ul>

选择器:not(条件)
除了符合条件的选择器选中的其他元素

ul>li:not(:nth-child(3)){color: pink;}

除了第三个li元素其他li元素都变粉色