<div><p><span>p里面的span</span></p><span>div里的span</span></div><h1>首要素</h1><p class="p1">這是第一行</p><p class="p1 hello">這是第二行</p><p class="p1">這是第三行</p><p class="p1">這是第四行</p><p id="p1">這是第五行</p><p>這是第六行</p><p class="p2">這是第七行</p><span class="p2">這是span</span>復制代碼

• 通用選擇器，選擇所有元素

* {font-size: 20px;}復制代碼

• 元素選擇器，直接寫標簽名即可，選中所有指定元素

h1 {color: violet;}復制代碼

• id選擇器，標簽名之前加#號，對應唯一id即可

#p1 {color: brown;}復制代碼

• class選擇器，加 “.” 后接對應的class

.p1 {color: green;}.hello {color: blanchedalmond;}復制代碼

• 集選擇器，元素，id，class選擇器都可以一起被選擇，使用逗號分隔

h1, #p1, .p1, .hello {background-color: rgb(44, 228, 228);}復制代碼

• 子元素選擇器

div > span {color: blueviolet;}復制代碼

• 交集選擇器

span.p2 {color: rgb(106, 240, 16);}復制代碼

????????????????????????????????

• 兄弟元素選擇器，選擇元素后的一個元素

span + p {color: aqua;}復制代碼

• 屬性選擇器：指定元素選擇：

p[title="3"] {font-size: 49px;}復制代碼

• 屬性選擇器：開頭元素選擇：

p[title^="aa"] {font-style: oblique;}復制代碼

• 屬性選擇器：結尾元素選擇

p[title$="c"] {color: brown}復制代碼

• 屬性選擇器：指定元素選擇

p[title*="a"]{background-color: blueviolet;}復制代碼

• 否定選擇器

p:not(.io){color: lightblue; }復制代碼

• 偽類選擇器
• a的偽類選擇器 a:link 未訪問的鏈接 a:visited 已訪問過的鏈接 a:hover 鼠標移動到鏈接 a:active 選定鏈接 特定順序 可以和類配合使用 hover,active可以配置任意標簽

p::selection {background-color: brown;}a:visited {color: red;}a:hover {color: rgb(250, 6, 197);}p:hover {font-size: 20px;}p:active {font-size: 30px;}復制代碼

• first-letter 第一個元素 first-line 第一行

p::first-letter {font-size: 50px;}p::first-line {background-color: blue;}復制代碼

轉載于:https://juejin.im/post/5ce3e6f6f265da1bb31c0dd8

總結

以上是生活随笔為你收集整理的从零开始的自学之路——css选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。