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>