CSS-其他选择器
2022-06-06 本文已影响0人
测试探索
一、其他选择器
image.png
二、目录代码
image.png
2-1 id选择器
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p>http://www.baidu.com</p>
<p class = "p1" id="name1">test</p>
<p class = "p1" id="name2">test1</p>
<h1>大标题</h1>
<p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1] 三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>
<table border="1" width = "500px">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
index.css
#name1{
color:red;
}
#name2{
color:blue;
}
image.png
2-2 逗号选择器
index.css
#name1,#name2,p,#td1{
color:red;
background-color: yellow;
}
image.png
2-3空格选择器,子孙（后代）选择器
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2">
<p>http://www.baidu.com</p>
</div>
<div id="div3">
<p class = "p1" id="name1">test</p>
<p class = "p1" id="name2">test1</p>
</div>
<h1>大标题</h1>
<p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1] 三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>
</div>
<p>我在div1的外面</p>
<table border="1" width = "500px">
<tr>
<td id = "td1">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
index.css
#div1 p{
color: red;
}
image.png
2-4子选择器
index.css
#div1>p{
color: red;
}
2-5 相邻兄弟选择器
index.css
#div2 + div{
color: red;
}
image.png
2-6 属性选择器
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div1">
<div id="div2">
<p>http://www.baidu.com</p>
</div>
<div id="div3">
<p class = "p1" id="name1">test</p>
<p class = "p2" id="name2">test1</p>
</div>
<h1>大标题</h1>
<p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1] 三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>
</div>
<p>我在div1的外面</p>
<table border="1" width = "500px">
<tr>
<td id = "td1">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
index.css
p[class=p1]{
color: red;
}
image.png
