CSS入门----选择器

CSS入门基础（一）

1，选择器

标签选择器 语法 标签{}

类选择器 语法 .类名

id选择器 语法 #id名{}

通配选择器 语法 *{}

注：

id、class选择器前面可结合元素选择器

​ 假设只想让div元素的背景色是黄色
​ 注意：div.bg 此处选择器之间没有空格

div.bg {
background-color: yellow;
}

一个元素引用多个class样式

多个class用空格分隔,顺序无关紧要
说明：如果属性不重复则样式叠加，否则以最后面的class为准

.center {
text-align: center;
}
.err {
color: red;
font-weight: bold;
font-style: italic;
}

<div class="center err">如果不重复则样式叠加，否则以最后面的class为准</div>

2，属性选择器

属性选择器根据元素的属性来选择元素 语法 标签名[属性]

根据元素的属性值来选择元素 语法 [属性=“属性值”]

3，后代选择器

ul li a {
color:red;
}

4，子选择器

• 用>连接选择器
• 只能选择作为某元素直接子元素的元素

div > strong {
color:red;
}

5，相邻兄弟选择器

• 用+连接选择器

• 选择紧跟在另一元素后的元素（第一个相邻的），二者有相同的父元素

   h3+p{
       color:red;
   }
  

  含义：h3之后第一个相邻的p兄弟（h3和p拥有共同的父元素）
  注意：不是h3的所有兄弟p,而是第一个兄弟

6，群组选择器 ，多个选择器一起指定样式 a,#id,.class,p

div,p,h1{
color:red;
margin:0;
}

7，同级兄弟选择器

• 用~连接选择器
• 选择同级的元素（后面相邻的兄弟），二者有相同的父元素

h3 ~ p {
color: red;
}

含义：与h3同级的所有p兄弟(h3 和 p 拥有共同的父元素)

8，first-child理解

例如

• 作为第一个子元素的有div(body的第一个)和第一个p(div的第一个）

• p:first-child选择的是p的那个

  p > i:first-child {
  color:red;
  } 
  

9，::selection匹配被用户选取的部分

被选中的部分变为红色

::selection {
color: #ff0000;
}

<p>这是一个p段落。</p>
<div>这是div元素中的文本。</div>
<br>
<a href="http://www.wust.edu.cn" target="_blank">武科大</a>

解读：网页中所选中的内容变为红色

10，before在元素之前插入新内容

h1:before {
content: url("images/1.gif");
}

解读：在h1标签的前面插入一张名称为1.gif的图片

11，:nth-child(n)选择器

:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素；

p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素

注意：n是从1开始的

<style>
    p:nth-child(1){
        color:red
    }        
</style>
<div style="border:1px solid">
    <span>div span中第一个段落。</span>
    <p>div 中第一个段落。</p>
    <p>div 中的最后一个段落。</p>
</div><br>

<div style="border:1px solid">
    <p>另一个 div 中第一个段落。</p>
    <p>另一个 div 中的最后一个段落。</p>
</div>

正方向范围

li:nth-child(n+6) :选中从第6个开始的子元素

负方向范围

:nth-child(-n+9):选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素

前后限制范围

:nth-child(n+4):nth-child(-n+8)

选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8)
我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素

奇数、偶数位

:nth-child(odd)

:nth-child(even)

隔选择子元素 :nth-child(3n+1),

选择1,4,7,10