2. 程式人生 > >CSS選擇器的宣告和巢狀

CSS選擇器的宣告和巢狀

阿新 • • 發佈：2018-12-26

前言

　　在利用CSS選擇器控制HTML標記時，除了每個選擇器可以一次宣告多個，選擇器本身也可以同時宣告多個。

集體宣告

　　在宣告各種CSS選擇器時，如果某些選擇器的風格是完全相同或部分相同，這時便可以利用集體宣告的方法，將風格相同的CSS選擇器同時宣告。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head
 
>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style>
    h1,h2,h3{
        color:#CC3333;
        font-size:15px;
    }
</style>
</head>
<body>
    <h1>集體宣告1</h1>
    <h2>集體宣告2</h2>
    <h3
 
>集體宣告3</h3>
</body>
</html>

　　如果希望頁面中所有的標記都使用同一種CSS樣式，但又不希望逐個來加入集體宣告列表，這時可以利用全域性宣告符號*來實現。

選擇器的巢狀

　　在CSS選擇器中，還可以通過巢狀的方式，對特殊位置的HTML標記進行宣告，例如p標記之間包含b標記，就可以使用巢狀選擇器進行相應的控制。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 
 />
<title>無標題文件</title>
<style>
    p b{
        color:#CC3333;
        text-decoration:underline;
    }
</style>
</head>
<body>
    <p>質勝文則<b>野</b>，文勝質則<b>史</b>。</p>
    巢狀之外的<b>標記</b>不生效
</body>
</html>

效果圖

這裡寫圖片描述

　　巢狀選擇器的使用非常廣泛，不只是巢狀的標記本身，類別選擇器和ID選擇器都可以進行巢狀。 
.special i{ color:red;}  /*使用了屬性special的標記裡面包含的i標記*/
#one li{ padding-left:5px;}   /*ID為one的標記裡面包含的li標記*/
td.top .top1 strong { font-size:16px;}  /*多層巢狀，同樣實用*/

　　其中，第三個表示使用了.top類別的td標記中包含的.top1類別的標記，其中包含了strong標記所宣告的風格樣式，有點繞，還是看一個程式碼示例。

<td class="top">
    <p class="top1">
        其他內容<strong>Css控制的樣式</strong>其他內容
    </p>
</td>

總結

　　選擇器的巢狀在CSS的編寫中可以大大減少對class和id的宣告。因此在構建頁面HTML框架時通常只給外層標記定義class或者id，內層標記能通過巢狀表示的方式找到，不需要再定義新的class或者專用id。只有多個相同子標記要單獨設定時才需要給其定義新的class或者專用id。

相關推薦

CSS選擇器的宣告和巢狀

前言 　　在利用CSS選擇器控制HTML標記時，除了每個選擇器可以一次宣告多個，選擇器本身也可以同時宣告多個。 集體宣告 　　在宣告各種CSS選擇器時，如果某些選擇器的風格是完全相同或部分相同，這時便可以利用集體宣告的方法，將風格相同的CSS選擇器同時

css選擇器位置和數量技巧

clas 以及 code blog color 和數 ble 子元素 child 1. 除去首個元素 li:not(:first-child) li + li li:first-child ~ li 2. 第1-3個元素 li:nth-child(-n+3) 3.

【選擇器小結】正則表示式、XPath選擇器、CSS選擇器小結和使用場景

$&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&

CSS選擇器樣式和style屬性樣式優先順序

標籤選擇器 tag{} priority = 1； 類選擇器 .class{} priority = 10； Id選擇器 #id{} priority = 100； style屬性樣式 priority = 1000； priority值可以疊加，例如：.class{}的p

CSS之分組選擇器和巢狀選擇器

分組選擇器， 將一個樣式應用於多個類，或者標籤啥的 每個選擇器用逗號隔開 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.c

CSS 分組和巢狀 選擇器

Grouping Selectors在樣式表中有很多具有相同樣式的元素。h1{color:green;}h2{color:green;}p{color:green;}   為了儘量減少程式碼，你可以使用

CSS 分組 和 巢狀 選擇器

在樣式表中有很多具有相同樣式的元素。 h1{color:green;} h2{color:green;} p{color:green;} 分組選擇器：(相同樣式不同元素可使用分組選擇器) h1,h2,p{color:green;} 巢狀選擇器 它可能適用於選擇

css選擇器(1)——元素選擇器、類名和id選擇器

span pan 包含 最重要的 通過 font 給定 情況 但是 css的主要優點之一就是它能很容易地向所有同類型的元素應用一組樣式。當然它是通過選擇器來實現這一點的。 基本規則結構： 語法= 選擇器 +聲明塊 1.元素選擇器——直接使用html元素名，指向文檔元素

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

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

CSS後代選擇器“空格”和“>”的使用辨析

src HR ros div 選擇器 str htm red ren 要點： 　　1. “空格”：包含子孫 　　2. “>”：含子不含孫 舉個栗子： 　　html代碼如下 1 <body> 2 <div class="parent"&

CSS選擇器之兄弟選擇器（~和+）

spa 例子 inf 代碼 但是 info 發現 效果 說話 　　今天在改以以前人家寫的網頁的樣式的時候，碰到這個選擇器，‘~’，當時我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是

CSS 基礎-選擇器-邊框和背景-文本樣式

borde bcb 元素屬性 default bstr 想要 指定 -c mon CSS3 選擇器 本文內容部分來自於https://developer.mozilla.org/zh-CN/docs/Learn/CSS 選擇器可以被分為以下類別： 簡單選擇器（Simple

CSS概述、CSS語法、CSS選擇器、CSS宣告

一、HTML表單   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</ti

css編輯與檢視之選擇器宣告

選擇器宣告 集體宣告 在HTML頁面中，有時如果存在多種型別的標籤同時具備相同的樣式宣告時，我們可以採用集體宣告。它們是同級關係。   例如： <style>   div,p{     colo

CSS選擇器和CSS權重

一 、CSS作用 CSS 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。 它主要用來修飾網頁。對網頁中元素位置的排版進行畫素級精確控制

pyspider 爬蟲教程（一）：HTML 和 CSS 選擇器

    雖然以前寫過 如何抓取WEB頁面 和 如何從 WEB 頁面中提取資訊。但是感覺還是需要一篇 step by step 的教程，不然沒有一個總體的認識。不過，沒想到這個教程居然會變成一篇譯文，在這個爬蟲教程系列文章中，會以實際的例子，由淺入深討論爬取（抓取和解析）的一些關鍵

css 選擇器和屬性

css概述:  css(Cascading Style Sheet)層疊樣式表，是對html進行樣式修飾的語言。 css即樣式定義如何顯示 HTML 元素 樣式通常儲存在css檔案中,解決了內容(html)與表現(css)分離的問題 如果有多個css同時修飾一個h

CSS選擇器和其優先順序的簡單介紹

CSS的簡單語法: ​ 在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中 <style> 選擇器{   屬性名稱:屬性的值;   屬性名稱2: 屬性的值2; } </style> CSS選

第五十六 css選擇器和盒模型

1.組合選擇器 群組選擇器 #每個選擇為可以位三種基礎選擇器任意一個，用逗號隔開，控制多個。 div,#div,.div{     color:red } 後代（子代）選擇器 .sup .sub{     後代 } .sup .sub{  

樣式單和CSS選擇器

一、這一節我們先講樣式單 簡單來說，網頁的製作實現分為三種，HTML、CSS和JavaScript  HTML主要用來對網頁進行文字域圖片相結合，對網頁進行分塊（div），而對文字圖片位置進行佈局 而樣式表是專門描述結構文件表現方式的文件。比起傳統方式他更具有優勢。