搜尋
首頁web前端html教學CSS学习笔记(1):选择器_html/css_WEB-ITnose

一、元素选择器

HTML文档元素就是最基本的选择器

如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    p {color:blue;}</style></head><body>    <p>这一段话是蓝色的。</p></body></html>

示例将

元素的字体颜色设置为了蓝色,元素选择器将作用于文档内所有的

元素。同样,我们也能够同时为多个元素应用一种样式,如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    h1,p {color:blue;}</style></head><body>    <h1 id="标题颜色">标题颜色</h1>    <p>这一段话是蓝色的。</p></body></html>

为多个元素应用样式时,用逗号分隔。

*作为通配选择器,可以与任何元素匹配。

格式:元素|通配符

二、类选择器

类选择器的样式与元素关联,需要为class属性指定一个适当的值,如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    .one {color:blue;}</style></head><body>    <p class="one">第一段。</p>    <p>第二段</p>    <p class="one">第三段</p></body></html>

格式:.类名

代码中有3个

元素,其中有两个指定了class属性,即class="one",在

三、多类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        .one {color:blue;}        .two {color:red;}        .one.two {color:green;}    </style></head><body><p class="one two">第一段。</p><p class="two">第二段</p><p class="one">第三段</p></body></html>

 

效果:

格式:.类名1.类名2……

多类的概念在于可以对class指定多个属性值,如我们为

指定了class="one two",那么这个

元素的class属性就包含了两个属性值"one"和"two",中间空格作为分隔符。在样式表中则使用[.属性值1.属性值2|……]来指向元素。上面的代码中,我们对class值为"one"的元素颜色应用蓝色,class值含有"two"的元素应用红色,为class值同时含有"one"和"two"的元素颜色应用为绿色。如果在样式表中没有为指定.one.two{color:green;},那么

第一段。

呈现出来的效果是什么呢?答案是红色。因为.one和.two都会指向满足条件的

第一段。

,这时候样式就会依照层叠来应用样式了。

四、ID选择器

同类选择器类似,但匹配的是id属性,而不是类选择器的class属性。与类选择器不同的是,在一个HTML文档中,ID选择器会使用一次,而且仅一次,虽然在很多浏览器中指定id属性值能够出现多次,但这是不正确的,而且如果在JavaScript中使用getElementById()方法时,会造成不必要的错误。通过#元素ID属性值来指向元素。如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        #p1 {color:blue;}    </style></head><body><p id="p1">第一段。</p><p>第二段</p><p>第三段</p></body></html>

格式:#ID属性值

五、属性选择器

注意:Safari、Opera和所有基于Gecko的浏览器都支持属性选择器,在IE5/Mac和IE6/Win之前,IE并不支持属性选择器。

1.简单属性选择器

  使用情况:如果希望有某个属性的元素,不在乎属性的值是什么。可以使用简单属性选择器。

  

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        p[class] {color:blue;}         </style></head><body><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

效果:

格式:元素|通配符[属性]

可以看到含有class属性的

元素的颜色变成了蓝色,并且对class的值并不关注。

还可以根据多个属性进行选择,如:a[href][title]{font-weight:bold;}     //对同时具有href属性和title属性的元素变成粗体。

2.根据具体属性值选择

上面的例子是不关注属性值的选择器,那么现在我们要讲的就是需要关注属性值的选择器了。我们将上面的例子改变一下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        p[class="one"] {color:blue;}    </style></head><body><h1 id="">123</h1><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

效果:

格式:元素|通配符[属性=属性值]

我们可以看到p[class="one"]等同于p.one,但是使用属性选择器可以针对其它属性值来选择元素,而不单单是达到类选择器的效果。

3.根据部分属性值选择

如果属性能接受词列表(词之间用空格分隔),可以根据其中任意一个词进行选择,如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        h1[class~="box"]{color:blue;}    </style></head><body><h1 id="">123</h1></body></html>

效果:

格式:元素|通配符[属性~=属性部分值]

更高级的css选择器(CSS2):

[foo^="bar"]    选择foo属性值以"bar"开头的所有元素

[foo$="bar"]    选择foo属性值以"bar"结尾的所有元素

[foo*="bar"]    选择foo属性值中包含字串"bar"的所有元素

4.特定属性选择类型

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        p[lang|="en"]{color:blue;}    </style></head><body><p lang="en">段落1</p><p lang="en-a">段落2</p><p lang="en-b">段落3</p><p lang="cn-en">段落3</p><p lang="encn">段落4</p></body></html>

这个规则会匹配lang属性等于en或者以en-开头的所有元素,encn也不会起作用,因为不是en-开头,效果:

格式:元素|通配符[属性|="属性值"

六、后代选择器

h1 em{color:blue;}

可以看作对作为h1后代元素的em元素颜色改为蓝色,用代码展示就是:

<h1 id="em-em"><em>123</em></h1>

需要注意的是,这里是后代元素,而不只是子元素,如下面的代码也是有效的:

<h1 id="b-em-em-b"><b><em>123</em></b></h1>

如果只想缩小范围,选择子元素而不是后代元素,则可以使用下面的方式:

h1 > em{color:blue;}

选择相邻兄弟元素,如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        h1+p{color:blue;}    </style></head><body><p>段落1</p><h1 id="段落">段落2</h1><p>段落3</p><p>段落3</p><p>段落4</p></body></html>

效果:

通过h1+p匹配了之前的兄弟元素是

的所有符合要求的

元素,如果

元素之前元素隔着其它元素,则不符合匹配要求,但中间只隔着文本内容并不会影响匹配。

接下来我们要讲的就是更有意思伪类和伪元素了。

伪类

1.链接伪类

:link           指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。有些链接会不正确的解释

:visited      指示作为已访问地址超链接的所有锚

例子:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        a:link {color:blue;}        a:visited{color:red;}    </style></head><body><a href="#1">被点击过了了</a><a href="#2">未被点击</a></body></html>

结果:

链接伪类也适用于ID选择器,如:

a#one:link{color:yellow;}

2.动态伪类

:focus             当前拥有输入焦点的元素

:hover             指示鼠标停留元素

:active             指示被用户输入激活的元素

例子:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        input:focus{background-color:black;}        a:hover {background-color:yellow;}        a:active{background-color:red;}    </style></head><body><input type="text"><a href="#6">例子</a></body></html>

无操作效果:

文本框获得焦点效果:

鼠标在文字上停留效果:

鼠标在文字上按下左键时效果:

伪元素

1.设置首字母样式

如将

元素中第一个字母变成红色:

p:first-letter{color:red;}

效果:

2.设置第一行的样式

如:

p:first-line{color:red;}

效果:

3.设置之前和之后元素的样式

如:

h2:before{content:"<<";color:blue;}h2:after{content:">>";color:red;}

效果:

 

 

第一次写博客,免不了诸多错误,仅作为个人学习笔记。作为一名在校学生,希望大家多多指教。

 

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML和代碼:仔細觀察術語HTML和代碼:仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web開發人員的基本工具HTML,CSS和JavaScript:Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML,CSS和JavaScript的角色:核心職責HTML,CSS和JavaScript的角色:核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML容易為初學者學習嗎?HTML容易為初學者學習嗎?Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼?HTML中起始標籤的示例是什麼?Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊?如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊?Apr 05, 2025 pm 01:24 PM

如何設計菜單中的虛線分割效果?在設計菜單時,菜名和價格的左右對齊通常不難實現,但中間的虛線或點如何...

在線代碼編輯器究竟用什麼HTML元素實現代碼輸入?在線代碼編輯器究竟用什麼HTML元素實現代碼輸入?Apr 05, 2025 pm 01:21 PM

網頁代碼編輯器中的HTML元素分析許多在線代碼編輯器允許用戶輸入HTML、CSS和JavaScript代碼。最近,有人提出了一...

React靜態頁面構建:如何用react-app-rewired避免代碼壓縮?React靜態頁面構建:如何用react-app-rewired避免代碼壓縮?Apr 05, 2025 pm 01:18 PM

關於使用react-app-rewired構建靜態頁面時如何避免代碼壓縮許多開發者在使用React構建靜態頁面時,希望在交付給�...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中