css选择器(几个注意点)

2019-04-25 本文已影响0人陈大事_code

类选择器

.important.urgent {background:silver;}

像这种多个类选择器连接在一起的写法，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

注意：并不是后代选择器哟~

只要class列表当中有和这两个类名就可以了，并不是完全匹配。

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

属性选择器

只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

这个还是要注意下的，因为遇到的情况不多，但是至少要会一种情况。

通配符写法：

img[title~="Figure"] {border: 1px solid gray;}

~ 表示title中包含‘Figure’的img

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

特定属性选择类型

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

后代选择器

后代选择器两个元素之间的层次间隔可以是无限的。

例如：ul em 将会选择以下标记中的所有 em 元素，不管em在ul下的第几层。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

子选择器

与后代选择器相差别：子元素选择器只能选择作为某元素的子元素。

例如： body > p

子元素：某元素下的第一层元素。

<body>
    <div class="father">
        <span>嗯</span>
    </div>
    <p>
       <span>你好</span>
        <span>世界！</span>
     </p>
</body>

其中，div和p都是body的子元素，而span不是，因为他已经嵌套在了div和p的内部。

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

注意：他们要用相同的父元素哟~，且是紧跟着前一个元素。

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

伪类

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

可以与类选择器配合使用：

a.red : visited {color: #FF0000}

选择元素的第一个子元素:

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

所有伪类

属性	描述	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

before和after比较常用

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