CSS 选择器

2020-12-11 本文已影响0人 googoler

CSS 规则

类型选择器（type selector）或元素选择器
- 文档的元素就是最基本的选择器;元素选择器又称为类型选择器（type selector）
```
html {color: black;}
h1 {color: blue;}
h2 {color: silver;}
```
- 选择器分组
  假设希望 h2 元素和 p元素都有灰色。为达到这个目的，最容易的做法是使用以下声明(选择器分组)：
```
h2, p {color:gray;}
```
- 通配符选择器
  通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符
```
* {color:red;}
```
- 声明分组
  可以对选择器进行分组，也可以对声明部分进行分组;对声明分组，一定要在各个声明的最后使用分号:
```
 h1 {font: 28px Verdana; color: white; background: black;}
```

类选择器

类选择器
在使用类选择器之前，需要修改具体的文档标记,为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值:后我们使用类名前有一个点号（.），然后结合通配选择器使用：

 <h1 class="important">
    This heading is very important.
 </h1>
 <p class="important">
      This paragraph is very important.
 </p>

 //css 通配符选择器：
    *.important {color:red;}
//选择所有类名相同的元素，可以在类选择器中忽略通配选择器:
    .important {color:red;}
 //结合元素选择器
    p.important {color:red;}

多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔;通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
```
<p class="important warning">
        This paragraph is a very important warning.
</p>
//css 多类选择器
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
```

ID 选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式
- ID 选择器前面有一个 # 号 - 也称为棋盘号或井号:
```
*#intro {font-weight:bold;}
```
- ID 选择器中可以忽略通配选择器
```
#intro {font-weight:bold;}
```
- ID 选择器引用 id 属性中的值
```
<html>
<head>
<style type="text/css">
      #intro {font-weight:bold;}
</style>
</head>

<body>
      <p id="intro">This is a paragraph of introduction.</p>
      <p>This is a paragraph.</p>
</body>
</html>
```
- 类选择器和 ID 选择器可能是区分大小写的

ID 属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

     //把包含标题（title）的所有元素变为红色
     *[title] {color:red;}       
     //根据多个属性进行选择，只需将属性选择器链接在一起即可
     a[href][title] {color:red;}
      ```

根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素:
```
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
```
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
```
p[class~="important"] {color: red;}
```

子串匹配属性选择器

类型                  描述
[abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]    选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素

特定属性选择类型

*[lang|="en"] {color: red;}
 // **这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素**

img[src|="figure"] {border: 1px solid gray;}
//这个规则会选择 src属性等于 figuren 或以 figure- 开头的所有元素；
//如：figure-1.jpg 和 figure-2.jpg figure-x.jpg

选择器参考手册

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

后代选择器
后代选择器（descendant selector）又称为包含选择器; 后代选择器可以选择作为某元素后代的元素;在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
- 根据上下文选择元素
```
     h1 em {color:red;}
     //只对 h1 元素中的 em 元素应用样式
     //因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。
     //如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
     ```
```

子元素选择器
只选择某个元素的子元素，请使用子元素选择器（Child selector）;子选择器使用了大于号（子结合符）:

选择子元素

h1 > strong {color:red;}
//从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

table.company td > p
//选择作为 td 元素子元素的所有 p 元素，
//这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性.

相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素;相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

  ```
  <!DOCTYPE HTML>
  <html>
  <head>
  <style type="text/css">
  li + li {font-weight:bold;}
  </style>
  </head>          
  <body>
  <div>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ol>
  </div>
  </body>
  </html>
  ```

效果

选择相邻兄弟

 h1 + p {margin-top:50px;}
 //这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
 ```

结合其他选择器

html > body table + ul {margin-top:20px;}
 //这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，
 //该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
 ```

伪类 (Pseudo-classes)
伪类用于向某些选择器添加特殊的效果:

语法：

selector : pseudo-class {property: value}
//CSS 类也可与伪类搭配使用
selector.class : pseudo-class {property: value}

伪类

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

伪元素 (Pseudo-elements)
伪元素用于向某些选择器设置特殊效果。

语法：

selector:pseudo-element {property:value;}
//CSS 类也可与伪类搭配使用
selector.class:pseudo-element {property:value;}

伪元素

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

CSS 选择器

猜你喜欢

热点阅读