CSS选择器
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、元素选择器
是最常见最基本的选择器
如果设置HTML样式，选择器通常是某个HTML元素
<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>
通配符选择器
- {color:red;}
即所有元素都变为红色
选择器分组
以下两组选择器的规则效果相同
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
声明分组
为同一元素设置多个属性，以下两种写法效果相同
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
h1 {font: 28px Verdana; color: white; background: black;}
声明分组和选择器分组结合使用
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
二、类选择器
- 类名前面有. 然后结合通配选择器
方式1：*.important {color:red;}
方式2：.important {color:red;}（忽略通配选择器）
<html>
<head>
<style type="text/css">
.important {color:red;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
</body>
</html>
- 类选择器与元素选择器一起使用
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素 - 多类选择器1
一个 class 值中可能包含一个词列表，各个词之间用空格分隔
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>
<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>
</body>
</html>
三、ID选择器
方式1：*#intro {font-weight:bold;}
方式2：#intro {font-weight:bold;} （忽略通配选择器）
<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
</body>
</html>
- ID选择器与类选择器区别：
- 一个HTML文档中，ID选择器只会使用一次
2.ID选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表
四、属性选择器
- 简单属性选择
希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
1：*[title] {color:red;}
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>
2：可以只对有 href 属性的锚（a 元素）应用样式
a[href] {color:red;}
3：还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
a[href][title] {color:red;}
4：根据具体属性值选择
a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;}
多个属性-值
a[href=“http://www.w3school.com.cn/”][title=“W3School”] {color: red;}
5：根据部分属性值选择（～）
（以下两个p均生效）
<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
</body>
</html>
选择 title 文本包含 “Figure” 的所有图像
img[title~="Figure"] {border: 1px solid gray;}
- 子串匹配属性选择器
[abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素 - 特定属性选择器
*[lang|=“en”] {color: red;}
五、后代选择器
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
六、子元素选择器
如果您希望选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
七、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {margin-top:50px;}
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
