css选择器

　　CSS选择

目录：

1. CSS 元素选择器
2. CSS 选择器分组
3. CSS ID 选择器详解
4. CSS 类选择器详解
5. CSS 属性选择器详解
6. CSS 后代选择器
7. CSS 子元素选择器
8. CSS 相邻兄弟选择器
9. CSS 伪类
10. CSS 伪元素

1.CSS 元素选择器

     div{

       background: pink;     

     }

2.CSS 选择器分组

*

*{

      background: pink;

         

}

说明：选择所有元素

，

div,p{

      background: pink;     

}

说明：选择所有 <div> 元素和所有 <p> 元素。

css 多类选择器

.important{

      background: red;

    }

    .warning{

      color : blue;

    }

    .important.warning{

      border: 1px solid black;

}

<p class="important warning">

   This paragraph is a very important warning.

  </p>

注： 1.class 的顺序可以不同，但是类名不能错2. .important.warning之间不能有空格

3.CSS ID 选择器详解

#div1{

     background:pink;

}

 

<div id=’div1’></div>

注：id选择器在一个文档中只能出现一次，ID 属性不允许有以空格分隔的词列表，区分大小写（这些有特殊的条件的原因js通过id确定唯一的一个元素）

 

4.CSS 类选择器详解

1.简单的类选择器

.div1{

     background:pink;

}

<div class=’div1’></div>

2.结合元素选择器

p.test{

      background: pink;

         

    }

<div class='test'>abc</div>

 <p class='test'>abc</p>

5.CSS 属性选择器详解

[attribute]

用于选取带有指定属性的元素。 

[attribute=value] 

用于选取带有指定属性和值的元素。 

[attribute~=value] 

用于选取属性值中包含指定词汇的元素。 

[attribute|=value] 

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 

[attribute^=value] 

匹配属性值以指定值开头的每个元素。 

[attribute$=value]

匹配属性值以指定值结尾的每个元素。 

[attribute*=value] 

匹配属性值中包含指定值的每个元素。   

1）  [attribute]

a[href] a元素有href 属性

2）   [attribute = value]

a[href=”abc”]   a元素href 等于abc的

3）  [attribute~=value]

适用于属性为多个属性值的

Eg:

p[class~=”panel”]{

    background:pink;l

}

<p class=’panel test1’>abc</p>

<p class=’panel test2’>edc</p>

注：value 必须是 panel 或者是test1 才能够匹配到第一个元素p

4）  [attribute^=value] 和 [attribute|=value]

这两个都是以匹配以什么开头的，特殊的是：| 该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

6.CSS 后代选择器

空格

div p{

     background:pink;

}

包括在div 中的所有p元素

7.CSS 子元素选择器

> 

div > p{

  color: red;

}

匹配div的子元素

8.CSS 相邻兄弟选择器

<div>

   <p>abc</p>

  </div>

  <p>bcd</p>

  <div>edf</div>

  <span><p>ded</p></span>

      <p>ded</p>

+

Div + p{

     Color:red;

}

选取div 的后面的第一个p

~

Div + p{

     Color:red;

}

选取div 的后面所有兄弟元素p 

9.CSS 伪类

 a:link {color: #FF0000}         /* 未访问的链接 */

a:visited {color: #00FF00}     /* 已访问的链接 */

a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */

a:active {color: #0000FF}      /* 选定的链接 */

:active 

向被激活的元素添加样式。

:focus 

向拥有键盘输入焦点的元素添加样式。 

:hover 

当鼠标悬浮在元素上方时，向元素添加样式。 

:link

向未被访问的链接添加样式。 

:visited

向已被访问的链接添加样式。 

:first-child

向元素的第一个子元素添加样式。 

:lang 

向带有指定 lang 属性的元素添加样式。 

10.CSS 伪元素 

:first-letter 

向文本的第一个字母添加特殊样式。 

:first-line 

向文本的首行添加特殊样式。

:before

在元素之前添加内容。

:after

在元素之后添加内容。