インポートCSS - セレクタ - ウェイト

カスケーディングスタイルシート

ページスタイルを制御するために使用され、孤立したマークアップ言語のページの内容やスタイルのコードを許可されます

CSSの構文構造

{}宣言セレクタ属性名：プロパティ値

CSSは、さまざまな方法の3種類を紹介しました

内嵌式

<p style='color:red;'>文字颜色为红色</p>

埋め込み

<style type='text/css'>
    p{
        color:red;
    }
</style>

外部式

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

優先順位

組み込み>組込み>外部スタイル

しかし、嵌入式>外部式特定のスタイル外の背中に埋め込まれた場所のCSSスタイル：前提があります。

CSSセレクタ

財団セレクタ

タグセレクタ

p{
    color:red;
}

クラスセレクタ

.class{
    color:red;
}

IDセレクタ

#id{
    color:red
}

シニアセレクタ

子孫セレクタ

全てのpの内側のdiv

div p{
    css代码样式;
}

子孫セレクタ

唯一の子孫のために有効です

div>p{
    css代码样式;
}

コンビネーションセレクタ

h1,span,p{
    color:red;
    font-size:14px;
}

擬似要素セレクタ

それは「愛憎のガイドライン」に続く、いわゆる憎悪は、「愛のHATE」であります

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

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

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

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

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

疑似クラスセレクタ

一般的に特定のスタイルの最初の文字を設定するために使用：

p:first-letter {
  font-size: 48px;
  color: red;
}

前

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

後に

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

前と浮動を削除するために使用されるよりも多くの後。

のCSSの継承

Webアプリケーション：例えば、我々はウェブサイトのデザインに行くとき、ウェブサイトの統一されたフォントの色が灰色で、フォントサイズが14pxです。その後、我々は、継承の有効利用のCSSにこの効果を達成することができます。しかし、すべてのプロパティを継承することができません

コードは以下の通りであります：

body{
    color:gray;
    font-size:14px;
}

CSSの重み

継承重量は、ほぼ0であります

要素セレクタ1

クラスセレクタ10

IDセレクタ100

インラインスタイル1000年

重量計算を運ぶことはありません！

！重要な重量の最大

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/