1. 程式人生 > >CSS基本知識2-CSS選擇

CSS基本知識2-CSS選擇

選擇就是CSS定義的第一部分,可以用面向物件的模式來理解,或者宣告式的面向物件。

標準選擇:

#.E

進階選擇:“,”分隔多個相同項,相當於類的例項。 如:#btn1,#btn2,.btn {...}

後代元素選擇,相當於子類:

空格分隔: .nav p {...}    #header .nav span {...}

子類在DOM中,是沒有層級的。

子元素選擇,只選一級, >

例如: nav > p {...}

相鄰選擇使用+,如h1 + p {margin-top:50px;}

屬性選擇器:按屬性選擇:[屬性=值]

例如:input[type=text] 

以上選擇器,可以做And運算,就是結合起來使用

可見,CSS選擇器,和Sql語言也很相似了。是宣告式的。屬性選擇器還有更多的條件,但很少被使用(當然如果用來做應用,或許能派上大用場)

CSS媒體查詢,也是類似Sql的查詢,原理是一樣一樣的。

偽類

W3C:"W3C" 列指示出該屬性在哪個 CSS 版本中定義(CSS1 還是 CSS2)。

屬性描述CSS
向被啟用的元素新增樣式。 1
向擁有鍵盤輸入焦點的元素新增樣式。 2
當滑鼠懸浮在元素上方時,向元素新增樣式。 1
:link 向未被訪問的連結新增樣式。 1
向已被訪問的連結新增樣式。 1
:lang 向帶有指定 lang 屬性的元素新增樣式。

 更多的偽類,其實原理就是從Dom中查詢某些特定的節點以代替程式設計,比如找第一個子,最後一個子,交替查詢子,找為空的等等,總之,CSS選擇器,就是類Sql的一個宣告式程式設計。

相關推薦

CSS基本知識2-CSS選擇

選擇就是CSS定義的第一部分,可以用面向物件的模式來理解,或者宣告式的面向物件。 標準選擇: #.E 進階選擇:“,”分隔多個相同項,相當於類的例項。 如:#btn1,#btn2,.btn {...} 後代元素選擇,相當於子類: 空格分隔: .nav p {...}    #header .nav

CSS基本知識3-CSS盒模型

box-sizing: content-box|border-box|inherit; 值描述 content-box 這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。 border-box

CSS基本知識1-CSS基本概念

CSS基本概念: 選擇器{屬性:值;屬性:值} CSS繼承:子元素繼承父元素樣式,父子關係看DOM結構。 CSS覆蓋: 瀏覽器預設設定 外部樣式表 內部樣式表(位於 <head> 標籤內部) 內聯樣式(在 HTML 元素內部) CSS優先: A:文字從上到下,後宣告的樣式

CSS基本知識5-CSS對齊

要對齊的關鍵,在於理解塊,行的概念,塊的對齊主要靠自動計算定位,比如margin:auto,及浮動,所以最好的辦法是儘量使用行來對齊。 例項: .box { border: 1px solid #808080; height: 200

CSS基本知識6-CSS字型

    首先要考慮的是文字的排版,實際上有這玩意,Word還需要嗎?不需要了。我們列下文字所涉及的操作: CSS 文字屬性 可見,以上的這些CSS文字屬性,主要就是操作文字的顯示,當然對於網頁來說,大多數不常用。但如果想做個網頁編輯器,那就都可以派上用場了。 有了文字,我們還要設下字型,先看

CSS基本知識4-CSS行模型

display:inline、block、inline-block block元素的特點是:  總是在新行上開始;  高度,行高以及頂和底邊距都可控制;  寬度預設是它的容器的100%,除非設定一個寬度 inline元素的特點是:   和其他元素都在一行上;  高,行高及頂和底邊距不可改變;  寬度就是它

CSS基礎知識2

empty int align import 文件中 lean tex 文檔 nbsp 1 基本規範1.1 文件命名規範基本樣式:base.css全局樣式:global.css框架布局:layout.css字體樣式:font.css鏈接樣式:link.css打印樣式:pri

CSS基本知識

分開 col tle -- body 定義 type text 參考 CSS規則有兩個主要部分組成:選擇器,一條或多條聲明 選擇器通常是需要改變樣式的HTML元素 每條聲明由一個屬性和一個值組成 屬性是希望設置的樣式屬性。每個屬性有一個值。屬性和值之間用冒號分開。 CSS

Java基本知識(運算符/選擇結構語句/循環結構語句/方法/標識符)

java基礎知識 運算符 選擇結構語句和循環結構語句 標識符 方法(函數) Java基本知識(運算符/選擇結構語句/循環結構語句/方法/標識符)一、Java標識符給類、接口、方法等命名的字符序列。1、標識符組成(1)英文字母大小寫;(2)數字(不能以數字開頭);(3)$和_。2、命名規則常

計算機網路基本知識2

3.  IP        1)網路地址   IP地址由網路號(包括子網號)和主機號組成,網路地址的主機號為全0,網路地址代表著整個網路。   2)廣播地址   廣播地址通常稱為直接廣播地址,是為了區分受限廣播地址。   廣播地址與網路地址的主機號正好相反,廣播地址

CSS——NO.2CSS樣式的基本知識

*/ * Copyright (c) 2016,煙臺大學計算機與控制工程學院 * All rights reserved. * 檔名:text.cpp * 作者:常軒 * 微信公眾號:Wor

7. CSS樣式基本知識選擇器、繼承、層疊和特殊性

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成   p{ color: blue }   p_選擇符   {}_宣告   color_屬性   blue_值 第7章 CSS樣式基本知識     內聯式、嵌入式和外部式三種   三種方法的優先順序:內聯式 >

Z 2. CSS選擇基本語法

CSS選擇器的語法比XPath更簡單一些,但功能不如XPath強大。實際上,當我們呼叫Selector物件的CSS方法時,在其內部會使用Python庫cssselect將CSS選擇器表示式翻譯成XPath表示式,然後呼叫Selector物件的XPATH方法。

python--前端之CSScss頁面引入方法、選擇器之基本選擇器、組合選擇器)

gin 如果 優點 選擇器 alt 前端 設置字體 行高 常用 CSS產生背景: 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生,CSS是 Cascading Style Sheets 的首字母縮寫,意思是層疊樣式表。 有了CSS,ht

CSS-基本語法/引用/文本設置/選擇器/

樣式 indent 12px 常用 字號 before 設置 css代碼 結合 CSS-基本語法/引用/文本設置 css基本語法及頁面引用 css基本語法 css的定義方法是: 選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁面元素關聯起來的

css布局基本知識

pad ati 窗口 htm type 適應 ant ans webkit 一,. 頁面導入樣式時,使用link和@import有什麽區別? 語法的角度: link屬於XHTML標簽,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用; 而@import是CS

css選擇器(2)——屬性選擇器和基於元素結構關系的選擇

tro 性能 border end 元素 接受 span div word 在有些標記語言中,不能使用類名和id選擇器,於是css2引入了屬性選擇器。 3.屬性選擇器   a)根據是否存在該屬性來選擇     如果希望選擇有某個屬性的元素,例如要選擇有class屬性的所有h

CSS簡介及基本知識

htm 線型 行內樣式 HR 註意 長春 cell 設置方法 GC (CSS)cascading style sheets:層疊樣式表。級聯式樣式表,簡稱:樣式表。 Sheets :就是一個樣式文件,它的擴展名為.css Style:外觀,個性化 樣式表的位置 為了學習

(1)css語法和基本知識

href size 聯網 mar bubuko clas content ont 加粗 1、CSS全稱為“層疊樣式表”,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。     註:使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網

html+css基礎知識總結2

一、css簡介 css---層疊樣式表(Cascading Style Sheets) 二、css特點 css實現了結構與表現相分離 三、樣式表的建立 內聯樣式(行間樣式,行內樣式)、內部樣式(嵌入式樣式)、外部樣式 1.內聯樣式 通過style屬性直接將樣式寫在標籤上 <h1 styl