css选择器

CSS选择器

元素选择器

h2 {color:yellow}

类选择器

包含类important的所有元素

*.cla {color:red;}

或者

.cla {color:red;}

包含类cla所有的p元素

p.cla {color:red;}

包含类cla1和cla2的所有p元素

使用空格分割类的词列表

<p class='cla1 cla2 cla3'></p>


p.cla1.cla2 {color:red;}

ID选择器

同类选择器相似,使用#

*#intro {font-weight:bold;}

由于ID在全局只有一个所以

#intro {font-weight:bold;}

这样的组合意思是含有class cla而且id为intro的p元素,虽然这样的结合是无意义的,因为id是唯一的,所以id元素经常单独去使用.

p#intro.cla {};

属性选择器

含有属性title

    *[title] {color:red;}

含有属性href的a元素

    a[href] { }

同时含有属性href title的a元素

    a[href][title] {   }

根据属性的值的选择
- 属性值相等 =
```
    a[href='http://'] { }
    a[href='http://'][title='xxx'] { }
```
- 根据属性值中的词列表选择 ~=
```
    <p class='cla1 cla2'></p>
```
```
    p[class~='cla1'] { }
```
- 根据词汇开头,整个单词 |=
```
*[lang|="en"] {color: red;}
```
- 匹配属性值开头 ^=
  
  [attribute^=value]
- 匹配属性值结尾 $=
  
  [attribute$=value]
- 匹配属性值内容 *=
  
  [attribute*=value]

后代选择器

使用空格分隔多个选择器空格作为结合符, h1 p 读作作为h1后代元素的所有p元素

h1 p{}

子元素选择器

后代选择器中后代为h1范围内的所有p元素

子元素选择器只选择直接子元素

    <h1>

        <p></p>
        <a><p></p></a>
        <p></p>
        </h1>

h1>p选择到第一个和第二个p元素.

相邻兄弟元素选择器

h1 + p {}

只选择h1同级的在h1后的第一个p元素

    <head>
    <style type="text/css">
    h1 + p {margin-top:50px;}
    </style>
    </head>

    <body>
    <h1>This is a heading.</h1>
    <h1>123</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    </body>

伪类/伪元素选择器

语法

selector : pseudo-class {property: value}
selector:pseudo-element {property:value;}

伪类

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

伪元素

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

给元素后插入内容

    h1:after
    {
      content:url(logo.gif);
    }

指定content属性

h1:after {
width: 100px;
display: block;
content:"";
background: blue;
height: 100px;
/* content: url(/i/w3school_logo_white.gif); */
text: 123;
}

选择器分组

使用,分割选择器

h2, p {color:gray;}

总结

当所有的选择器中间无空格的时候可以认为是一种元素要符合所有的条件

p+h1>p[a='1'].t { }

类为t,属性a='1',p元素,属于h1,h1是p的兄弟元素. .t and [a='1'] and p and h1> and p+

自右向左读