CSS選擇器總結

時間 2019-11-29

標籤 css 選擇器總結欄目 CSS 简体版

原文原文鏈接

最近在www.w3school.com.cn學習了CSS選擇器，下面作一個知識彙總。部分源碼來自www.w3school.com.cn！css

插入樣式表的方法有三種：post

第一種：外部樣式表學習

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

第二種：內部樣式表字體

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

第三種：內聯樣式表url

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

CSS基本的選擇器有四種，其它複雜的選擇器都由這四種組合而成spa

元素選擇器（類型選擇器）
id選擇器
類選擇器
屬性選擇器

選擇器的基礎語法，規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。ssr

//CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

//每條聲明由一個屬性和一個值組成。

selector {property: value}

1. 元素選擇器（類型選擇器）code

```
h1 {font-family: sans-serif;}
```

同時也能夠爲XML文檔設置樣式：

XML文檔：orm

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS樣式：xml

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }

to
  {
  font-size:28px;
  display: block;
  }

from
  {
  font-size:28px;
  display: block;
  }

heading
  {
  color: red;
  font-size:60px;
  display: block;
  }

body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

2.id選擇器

id 屬性只能在每一個 HTML 文檔中出現一次！

HTML代碼：

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

CSS樣式：

#red {color:red;}
#green {color:green;}

3.類選擇器

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着二者都將遵照 ".center" 選擇器中的規則。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

CSS樣式：

.center {text-align: center}

4.屬性選擇器

css屬性選擇器參考
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute\|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
[attribute=value*]	匹配屬性值中包含指定值的每一個元素。

爲了更準確的定位HTML元素並對其添加樣式，在上面四種基礎選擇器上面，CSS選擇器還能夠分紅：分組選擇器，派生選擇器，後代選擇器，子元素選擇器，相鄰兄弟選擇器，僞類和僞元素。

*1.分組選擇器

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

*2.派生選擇器

派生選擇器是經過依據元素在其位置的上下文關係來定義樣式的。

HTML代碼：

<p><strong>我是粗體字，不是斜體字，由於我不在列表當中，因此這個規則對我不起做用</strong></p>

<ol>
<li><strong>我是斜體字。這是由於 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>

CSS代碼：

li strong {
    font-style: italic;
    font-weight: normal;
  }

*3.後代選擇器

後代選擇器又稱包含選擇器，能夠選擇某元素的任意一代的後代元素。

HTML代碼：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

CSS代碼：

h1 em {color:red;}

*4.子元素選擇器

子元素選擇器只可選擇某元素第一代後代的選擇器。

HTML代碼：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

CSS代碼：

h1 > strong {color:red;}

*5.相鄰兄弟選擇器

相鄰兄弟選擇器會選擇某一元素緊隨其後的元素，可是前提是他們擁有相同的父級。

eg1:

HTML代碼：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代碼：

h2 + strong {color:red;}

語法規則是h2和strong之間有一個「＋」，「＋」和前面的h1或者後面的strong之間的空格都是無關緊要的。
在以上例子中，第一個strong緊鄰着h2而且他們擁有相同的父級(h1)，因此h2 + strong會選擇到第一個<strong>而不會選到第二個<strong>.

eg2:

HTML代碼：

<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>

CSS代碼：

li + li {color:red;}

在以上的例子中li+li是選擇緊挨着li後面的第一個<li>，因此第一個<li>不會被選擇；而第二個<li>是緊挨着第一個li的，全部會被選擇；第三個<li>是緊挨着第二個<li>的，也會被選擇。

*6僞類

僞類的語法：

selector : pseudo-class {property: value}

CSS 類也可與僞類搭配使用：

selector.class : pseudo-class {property: value}

屬性	描述
:active	向被激活的元素添加樣式。
:focus	向擁有鍵盤輸入焦點的元素添加樣式。
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。
:link	向未被訪問的連接添加樣式。
:visited	向已被訪問的連接添加樣式。
:first-child	向元素的第一個子元素添加樣式。
:lang	向帶有指定 lang 屬性的元素添加樣式。

超連接例子：

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */

*7僞元素

屬性	描述
:first-letter	向文本的第一個字母添加特殊樣式。
:first-line	向文本的首行添加特殊樣式。
:before	在元素以前添加內容。
:after	在元素以後添加內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。