2022.4.6 層次選擇器
層次選擇器
1、後代選擇器
在某個元素的後面 祖爺爺 爺爺 爸爸 你
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*後代選擇器:body後代的p標籤樣式*/
body p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!-- 無序列表-->
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
2、子選擇器
下一代的標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*子選擇器:body下一代的p標籤樣式*/
body>p{
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!-- 無序列表-->
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
3、相鄰兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*相鄰兄弟選擇器 名為name3的p標籤下面的一個p標籤修改樣式*/
.name3 + p{
background: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p class="name3">p2</p>
<p>p3</p>
<!-- 無序列表-->
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
4、通用兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*通用兄弟選擇器 同級別都變:名為name3的p標籤下面的所有同級p標籤修改樣式 */
.name3~p{
background: blue;
}
</style>
</head>
<body>
<p>p1</p>
<p class="name3">p2</p>
<p>p3</p>
<p>p4</p>
<!-- 無序列表-->
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
相關推薦
2022.4.6 層次選擇器
層次選擇器 1、後代選擇器 在某個元素的後面 祖爺爺 爺爺 爸爸 你 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>index</ti
2022.4.6 基本選擇器
基本選擇器 標籤選擇器 選擇一類標籤 ,格式 : 標籤{} <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>標籤選擇器</title>
2022.4.6 屬性選擇器
屬性選擇器(常用) id + 類 結合 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>屬性選擇器</title> <style&
2022.4.6 結構偽類選擇器
結構偽類選擇器 偽類:在選擇器後面加上一些條件 形式: 標籤名: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title&g
css層次選擇器
<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title>
Css選擇器-層次選擇器(關係選擇器)
1). E F 匹配 E 元素下所有的子元素 F(後代選擇器) .box a{ color: red; } 匹配 .box 下所有的子元素 a
CSS-6-屬性選擇器
技術標籤:CSScss3屬性選擇器 CSS -> 屬性選擇器 id選擇器+class選擇器的結合 <!DOCTYPE html>
【CSS】層次選擇器
技術標籤:前端css 後代選擇器 在某個元素的後面:祖爺爺 爺爺 爸爸 你 body p{ background: red;
CSS(4)屬性選擇器(常用)
屬性選擇器(常用) = -->絕對等於 *= -->包含 ^= -->以開頭 $= -->以結尾
層次選擇器
層次選擇器<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!--後代選擇器body p{background: lightseagreen;}--><!--子選擇
jQuery層次選擇器
層次選擇器 查詢子元素, 後代元素, 兄弟元素的選擇器 用法 1. ancestor descendant 在給定的祖先元素下匹配所有的後代元素, 是在這個標籤包裹下的所有符合條件的元素
陰陽師2022.4.6更新速覽:殘局得勝第三期上線;抽卡活動基本確定
(封面原圖:Pixiv@RADO -冉鶇)雙服公告,盡在掌握 更新時間:2022.4.5 正式服:殘局得勝、御魂自選上線
【今日陰陽師】2022.4.6更新內容速報:抽卡活動確定!
(封面原圖:Pixiv@Callarin)雙服公告,盡在掌握 更新時間:2022.4.5 正式服:殘局得勝、御魂自選上線
指甲油の作戰日記 #714 2022/4/6 完成100場作戰
今天是作戰記錄的第 714 天, 每日 100 次作戰小目標已完成 進行了 100 次作戰,
命運2週報 - 2022.4.6
命運2週報 - 2022.4.6 本週要聞 宗師日落已解鎖;本週掉落專家迴文及插頭一號
2022.4.6
洛谷p1305 看了題解後知道,想輸出前序遍歷就只需要先設string a用於儲存根節點及其左右節點,之後再依次輸入其他的,
2022.4.6(2)
洛谷p1827和p1030 本質上是同一問題。 /* 二叉樹由前序遍歷和中序遍歷推匯出後序遍歷。#include<cstring>#include<string>#include<iostream>using namespace std;void p(string q,string z){ if(
【Spring 框架(自學)】Day06(重點)--2022/4/6
Spring與Mybatis的整合 就是將spring與mybatis框架整合,整合的時候,以Spring為主,包住整個框架,通過IOC(控制反轉)=來實現Mybatis的物件建立,所以配置檔案也需要做出改變:
elasticsearch(v2.4.6)新增中文分詞器ik
一、 參考 ik github文件 將maven源改為國內阿里雲映象 二、 編譯安裝 analysis-ik 2.1 下載原始碼
JavaWeb8.4【CSS語法、基礎選擇器和擴充套件選擇器】
1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title>css基礎選擇器</title>