文章目录
选择器
CSS 使用选择器来挑选HTML文档中的特定元素,并设置这些元素的属性。
1. 类型选择器 Type selector
又称为HTML元素/标签选择器,选择的是HTML元素或标签:
span {
background-color: yellow;
}
strong {
color: rebeccapurple;
}
em {
color: rebeccapurple;
}
2. 类选择器 Class selector
类选择器以点号开头,选择文档中应用了该类的一切元素。
可以选择特定的元素+特定的类,也可以选择具有多个类的某一元素:
<html>
<head>
<title>Test css selector</title>
<style>
.note {
border: solid;
}
.note.message {
background-color:white;
}
.note.warning {
background-color:yellow;
}
.note.danger {
background-color:red;
}
</style>
</head>
<body>
<p class = "note message">This is a note message </p>
<p class = "note warning">This is a warning message</p>
<p class = "note danger">This is a message about danger</p>
</body>
</html>
3. ID 选择器 ID selector
ID和类的不同:一个ID一个文档只能出现一次,ID选择器和类选择器的用法基本类似。
ID选择器以 #
开头,因为ID唯一,理论上#myId
的写法足够,但有时可以看到类似如下p#danger
的写法,这样的写法会更为具体:
<html>
<head>
<title>Test css selector</title>
<style>
p {
border: solid;
}
#message {
background-color:white;
}
#warning {
background-color:yellow;
}
p#danger {
background-color:red;
}
</style>
</head>
<body>
<p id = "message">This is a note message </p>
<p id = "warning">This is a warning message</p>
<p id = "danger">This is a message about danger</p>
</body>
</html>
4. 通用选择器 Universal selector
通用选择器使用 *
号,选择全部HTML元素,例如:
* {
margin: 0;
}
但是由于重置全部元素的浏览器默认属性,所以要自行全部重设全部元素属性,很麻烦,所以一般不会这样用。
一种用途例如,需要选择全部article
元素的第1个子元素first-child
, 可以这样写:
/* code 1 */
article :first-child {
}
但是容易与下面的写法混淆,下面的写法的含义是, 选择全部article
元素,假如这个article
是另一个元素的第一个子元素的话:
/* code 2 */
article:first-child {
}
两者的区别是,article
后者少了一个空格,为什么会有区别,暂时不知道。所以要改成下面这样:
/* code 3 */
article *:first-child {
}
code 1 与 code 3 等价, code 2 另一种含义。此处选择器冒号前后的空格很重要,不能多加,不能少加。
5. 属性选择器 Attribute Selector
HTML
有很多全局属性(global attribute),包括,id
, lang
, class
, style
,class
是全局属性之一,是众多属性中特殊的一种。class
绝大多数情况下用于css,但是,有时也用于JavaScript.
No. | 属性选择器 | 例子 | 含义 |
---|---|---|---|
1. | tag[attr] | p[class] | 标签有一个名为attr 的属性 |
2. | tag[attr=value] | a[href="https://example.com"] | 标签属性值为value ,完全匹配 |
3. | tag[attr*=value] | a[href*="example"] | 标签的属性值含有value 就可以 |
4. | tag[attr$=value] | a[href$=".com"] | 标签属性值以value 结尾 |
5. | tag[attr^=value | a[href^="https"] | 标签属性值以value 开头 |
6. | tag[attr|=value] | div[lang|="zh"] | 标签属性值为value ,或者以value 加连字符号开头,例如“zh-CN” |
7. | tag[attr~=value] | p[class~="special"] | 标签属性值为value , 或者class 属性值其中之一包含value |
例子:
<html>
<head>
<title>Test css selector</title>
<style>
p {
border: solid;
}
p[class] {
background-color:pink;
}
p[class~="a"] {
font-size: 150%;
}
p[class*="a"] {
padding-left:5em;
}
p[class="a"] {
color: red;
}
</style>
</head>
<body>
<p class = "ab">This is class ab </p>
<p class = "a b">This is class a b</p>
<p class = "a">This is class a</p>
</body>
</html>
要使属性值对大小写不敏感,就在结束的中括号前加值i
,例如li[class^="a" i]
6. 伪类选择器 Pseudo-class
伪类选择器选择处于特殊状态的元素,这些所谓的特殊状态包括 :hover
, :visited
, :first-child
; last-child
, :checked
, 等,共有大约50个,
关于伪类的例子:
<html>
<head>
<title>Test css selector</title>
<style>
p:hover {
color:aqua;
}
a:link {
color:rgb(0, 255, 64);
}
a:visited {
color:purple;
}
a:hover {
color:beige;
}
</style>
</head>
<body>
<p class = "ab">This is class ab </p>
<p class = "a b">This is class a b</p>
<p class = "a">This is class a</p>
<a href="https://www.baidu.com">Go to search</a>
</body>
</html>
7. 伪元素选择器 pseudo-element
伪元素选择器的行为好像加了新的HTML元素一样,不会使用class
。::first-line
, ::after
, ::before
等等,供7个。
通常,伪类选择器和伪元素选择器可以组合使用。
首字母大写的例子:
<html>
<head>
<title>Test css selector</title>
<style>
article p:first-child::first-letter {
font-size: 200%;
font-weight: bold;
}
</style>
</head>
<body>
<article>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<p>xxx</p>
<p>yyy</p>
</article>
</body>
</html>
8. 组合选择器 Combinator
组合选择器将其他选择器组合起来,指明相互之间的关系。
8.1 后裔选择器 Descendant selector
选择器之间加空格叫后裔选择器,例如:
body article p
只要是后裔就可以,没必要一定是直接的孩子。
8.2 子组合选择器 Child combinator
使用大于符号例如: article > p
,
8.3 相邻兄弟
使用符号 +
, 例如 p + img
, 这里相邻,是指紧随其后,前面的不算。
8.4 一般兄弟
使用符号 ~
, 例如: p ~ img
,后面的元素。
<html>
<head>
<title>Test css selector</title>
<style>
p ~ div {
background-color:black;
color:white;
font-size:150%;
}
</style>
</head>
<body>
<article>
<p>paragraph 1</p>
<div>division1</div>
<div>division2</div>
<div>division3</div>
</article>
</body>
</html>
8.5 使用组合器
可以使用非常具体的选择器,例如, ul > li[class="a"] { }
如果HTML由CMS生成,组合器将十分有用。