資訊專欄INFORMATION COLUMN
摘要：一基本選擇器二后代選擇器子元素選擇器三兄弟選擇器四交集選擇器與并集選擇器五序列選擇器六屬性選擇器七偽類選擇器八偽元素選擇器九三大特性一基本選擇器選擇器作用根據(jù)指定的名稱，在當(dāng)前界面中找到對(duì)應(yīng)的唯一一個(gè)的標(biāo)簽，然后設(shè)置屬性格式名稱屬性值注意點(diǎn)
1、id選擇器
#1、作用： 根據(jù)指定的id名稱，在當(dāng)前界面中找到對(duì)應(yīng)的唯一一個(gè)的標(biāo)簽，然后設(shè)置屬性 #2、格式 id名稱 { 屬性：值; } #3、注意點(diǎn)： 1、在企業(yè)開發(fā)中如果僅僅只是為了設(shè)置樣式，通常不會(huì)使用id，在前端開發(fā)中id通常是留給js使用的 2、每個(gè)標(biāo)簽都可以設(shè)置唯一一個(gè)id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一界面內(nèi)id絕不能重復(fù) 3、引用id一定要加# 4、id的命名只能由字符、數(shù)字、下劃線組成，且不能以數(shù)字開頭，更不能是html關(guān)鍵字如p，a，img等
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器title>
<style>
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
style>
head>
<body>
<p id="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥p>
<p id="p2">而多多，不僅具備外表帥，內(nèi)心更是帥了一逼p>
<p id="p3">多多就是我，我就是多多p>
body>
html>
id選擇器實(shí)例
2、類選擇器
#1、作用：根據(jù)指定的類名稱，在當(dāng)前界面中找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性 #2、格式： .類名稱 { 屬性：值; } #3、注意點(diǎn)： 1、類名就是專門用來給某個(gè)特定的標(biāo)簽設(shè)置樣式的 2、每個(gè)標(biāo)簽都可以設(shè)置一個(gè)或多個(gè)class（空格分隔），class就相當(dāng)于人/標(biāo)簽的名稱， 因此同一界面內(nèi)class可以重復(fù) 3、引用class一定要加點(diǎn). 4、類名的命名規(guī)則與id的命名規(guī)則相同
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類選擇器title>
<style>
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
style>
head>
<body>
<p class="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥p>
<p class="p2">而多多，不僅具備外表帥，內(nèi)心更是帥了一逼p>
<p class="p3">多多就是我，我就是多多p>
body>
html>
類選擇器實(shí)例
3、標(biāo)簽選擇器
#1、作用：根據(jù)指定的標(biāo)簽名稱，在當(dāng)前界面中找到所有該名稱的標(biāo)簽，然后設(shè)置屬性 #2、格式： 標(biāo)簽名稱 { 屬性：值; } #3、注意點(diǎn)： 1、只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器 2、標(biāo)簽選擇器選中的是當(dāng)前界面中的所有標(biāo)簽,而不能多帶帶選中某一標(biāo)簽 3、標(biāo)簽選擇器，無論嵌套多少層都能選中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽選擇器title>
<style type="text/css">
p {
color: red;
}
style>
head>
<body>
<p>多多美麗的外表下其實(shí)隱藏著一顆騷動(dòng)的心p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>這顆心叫做七巧玲瓏心，男人吃了會(huì)流淚，女人吃了會(huì)懷孕p>
li>
ul>
li>
ul>
li>
ul>
body>
html>
標(biāo)簽選擇器
4、通配符選擇器
#1、作用：選擇所有標(biāo)簽 #2、格式： * { 屬性：值； } #3、注意點(diǎn)： 1、在企業(yè)開發(fā)中一般不會(huì)使用通配符選擇器 理由是： 由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性， 所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽 如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會(huì)比較差
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符選擇器title>
<style type="text/css">
* {
color: red;
}
style>
head>
<body>
<h1 >我是標(biāo)題h1>
<p >我是段落p>
<a href="#">我是超鏈接a>
body>
html>
通配選擇器實(shí)例
1、后代選擇器
#1、作用：找到指定標(biāo)簽的所有后代（兒子，孫子，重孫子、、、）標(biāo)簽，設(shè)置屬性 #2、格式： 標(biāo)簽名1 xxx { 屬性：值; } #3、注意： 1、后代選擇器必須用空格隔開 2、后代不僅僅是兒子，也包括孫子、重孫子 3、后代選擇器不僅僅可以使用標(biāo)簽名稱，還可以使用其他選擇器比如id或class 4、后代選擇器可以通過空格一直延續(xù)下去
"en"> "UTF-8">后代選擇器實(shí)例后代選擇器 我是body下的段落1
"id1" class="part1">我是div下的段落1
我是div下的段落2
- class="aaa">
class="ccc">我是ul>li下的段落1
class="ffffd">我是ul>li下的段落
"">點(diǎn)我啊1- "#">點(diǎn)我啊2
我是body下的段落2
2、子元素選擇器
#1、作用：找到制定標(biāo)簽的所有特定的直接子元素，然后設(shè)置屬性 #2、格式： 標(biāo)簽名1>標(biāo)簽名2 { 屬性：值; } 先找到名稱叫做"標(biāo)簽名稱1"的標(biāo)簽，然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱叫做"標(biāo)簽名稱2"的元素 #3、注意： 1、子元素選擇器之間需要用>符號(hào)鏈接，并且不能有空格 比如div >p會(huì)找div標(biāo)簽的所有后代標(biāo)簽，標(biāo)簽名為">p" 2、子元素選擇器只會(huì)查找兒子，不會(huì)查找其他嵌套的標(biāo)簽 3、子元素選擇器不僅可以用標(biāo)簽名稱，還可以使用其他選擇器,比如id或class 4、子元素選擇器可以通過>符號(hào)一直延續(xù)下去
"en"> "UTF-8">子元素選擇器后代選擇器 我是body下的段落1
"id1" class="part1">我是div下的段落1
我是div下的段落2
- class="aaa">
class="ccc">我是ul>li下的段落1
class="ffffd">我是ul>li下的段落2
"">點(diǎn)我啊1- "#">點(diǎn)我啊2
我是body下的段落2
1、相鄰兄弟選擇器，CSS2推出
#1、作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性 #2、格式 選擇器1+選擇器2 { 屬性：值; } #3、注意點(diǎn)： 1、相鄰兄弟選擇器必須通過+號(hào)鏈接 2、相鄰兄弟選擇器只能選中你緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開的標(biāo)簽
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟選擇器title>
<style type="text/css">
h1+p {
font-size: 50px;
} /* 相鄰兄弟解釋器*/
style>
head>
<body>
<h1 >我是標(biāo)題1h1>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<h1>我是標(biāo)題2h1>
<p>我是段落p>
body>
html>
相鄰兄弟解釋器演示
2、通用兄弟選擇器，CSS3推出
#1、作用：給指定選擇器后面的所有選擇器中的所有標(biāo)簽設(shè)置屬性 #2、格式： 選擇器1~選擇器2 { 屬性：值; } #3、注意點(diǎn)： 1、通用兄弟選擇器必須用~來鏈接 2、通用兄弟選擇器選中的是指選擇器后面的某個(gè)選擇器選中的所有標(biāo)簽 無論有沒有被隔開，都可以被選中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟選擇器title>
<style type="text/css">
h1~p {
color: red;
}
/*通用兄弟選擇器*/
style>
head>
<body>
<h1 >我是標(biāo)題1h1>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
<h1>我是標(biāo)題2h1>
<p>我是段落p>
body>
html>
通用兄弟解釋器實(shí)例
1、交集選擇器
#1、作用：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性 #2、格式： 選擇器1選擇器2 { 屬性：值; } #3、注意： 1、選擇器與選擇器之間沒有任何鏈接符號(hào) 2、選擇器可以使用標(biāo)簽名稱、id、class 3、交集選擇器在企業(yè)開發(fā)中并不多見，了解即可 因?yàn)椋簆.part1 完全可以用.part1取代
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
style>
head>
<body>
<p class="part1">我是段落p>
<p id="p1">我是段落p>
<p class="part1">我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
body>
html>
交集選擇器實(shí)例
2、并集選擇器
#1、作用：給所有滿足條件的標(biāo)簽設(shè)置屬性 #2、格式： 選擇器1,選擇器2 { 屬性：值; } #3、注意： 1、選擇器與選擇器之間必須用逗號(hào)來鏈接 2、選擇器可以使用標(biāo)簽名稱、id、class
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集選擇器title>
<style type="text/css">
.part1,h1,a {
color: red;
}
style>
head>
<body>
<h1>哈哈啊h1>
<p class="part1">我是段落p>
<p id="p1">我是段落p>
<p class="part1">我是段落p>
<a href="#">我是我a>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
body>
html>
并集選擇器實(shí)例
#1、作用： css3中新推出的選擇器中，最具代表性的的9個(gè)，又稱為序列選擇器， 過去的選擇器中要選中某個(gè)必須加id或class，學(xué)習(xí)了這9個(gè)后，不用加id或class， 想選中同級(jí)別的第幾個(gè)就選第幾個(gè) #2、格式 #2.1 同級(jí)別 :first-child p:first-child 同級(jí)別的第一個(gè) :last-child p:last-child 同級(jí)別的最后一個(gè) :nth-child(n) 同級(jí)別的第n個(gè) :nth-last-child(n) 同級(jí)別的倒數(shù)第n個(gè) #2.2 同級(jí)別同類型 :first-of-type 同級(jí)別同類型的第一個(gè) :last-of-type 同級(jí)別同類型的最后一個(gè) :nth-of-type(n) 同級(jí)別同類型的第n個(gè) :nth-last-of-type(n) 同級(jí)別同類型的倒數(shù)第n個(gè) #2.3 其他 :only-of-type 同類型的唯一一個(gè) :only-child 同級(jí)別的唯一一個(gè)
#1、同級(jí)別的第一個(gè) #1.1 示范一 p:first-child { color: red; } 代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽 <p>我是段落1p> <p>我是段落2p> <p>我是段落3p> <p>我是段落4p> <p>我是段落5p> <div> <p>我是段落6p> div> 這樣的話第一個(gè)p和div中的第一個(gè)p都變成紅色， #1.2 示范二 p:first-child { color: red; } 代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽 <h1>w我是標(biāo)題h1> <p>我是段落1p> <p>我是段落2p> <p>我是段落3p> <p>我是段落4p> <p>我是段落5p> <div> <p>我是段落6p> div> 這樣的話只有div中的第一個(gè)p變紅，因?yàn)樵谟性赿iv內(nèi)同一級(jí)別的第一個(gè)才是p 注意點(diǎn)： :fist-child就是第一個(gè)孩子，不區(qū)分類型 #2、同級(jí)別的最后一個(gè) p:last-child { color: red; } 代表：同級(jí)別的最后一個(gè)，并且最后一個(gè)要求是一個(gè)p標(biāo)簽 <h1>我是標(biāo)題h1> <p>我是段落1p> <p>我是段落2p> <p>我是段落3p> <p>我是段落4p> <p>我是段落5p> <div> <
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/2220.html
摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...
摘要：語法基礎(chǔ)語法規(guī)則由兩個(gè)主要部分構(gòu)成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...
閱讀 739·2023-04-25 19:43
閱讀 3983·2021-11-30 14:52
閱讀 3811·2021-11-30 14:52
閱讀 3872·2021-11-29 11:00
閱讀 3806·2021-11-29 11:00
閱讀 3905·2021-11-29 11:00
閱讀 3584·2021-11-29 11:00
閱讀 6192·2021-11-29 11:00
