CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时,会根据 CSS 规则中的选择器定位 HTML 页面的元素,并为对应的元素设定样式。
div {
color: lightcoral;
font-size: 24px;
}
.
区分,对应的名称是标签中指定的class
名
.demo {
color: lightcoral;
font-size: 24px;
}
#
区分,一个html文件中id只允许出现一次
#Demo {
color: lightcoral;
font-size: 24px;
}
#Demo {
color: lightcoral;
font-size: 24px;
}
[attr]
属性选择器:通过 HTML 元素的 attr 属性名来定位具体 HTML 元素,而不关注 attr 属性的值是什么。
[lang]{
color: red;
}
<div lang="pt">哈哈哈哈</div>
[attr=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。
[lang="pt"] {
color: green;
}
[attr~=value]
属性选择器:通过 HTML 元素的 attr 属性名,属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一,来定位具体 HTML 元素。
[lang~='pt']{
color: red;
}
<div lang="pt pp">pt加空格</div>
<div lang="pt">pt不加空格</div>
[attr|=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value-
为前缀来定位具体 HTML 元素。
[lang|='zz']{
color: blue;
}
[attr^=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。
[lang|='zz']{
color: blue;
}
[attr$=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。
与上一个类似
[attr*=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。
包含即可,不会因为位置而无法匹配
计算法则(后定义的覆盖先定义的)
内联样式总会覆盖内嵌样式表和外联样式表的任何样式。
破坏优先级,被修饰的成为最高级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!important规则</title>
<style>
div {
color: blue !important;
}
.demo {
color: red;
}
</style>
</head>
<body>
<div class="demo">这是一个测试内容.</div>
</body>
</html>
最终的颜色为blue
!important
。!important
。!important
。!important
。类似于套娃,层与层之间的关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML元素之间的关系</title>
</head>
<body>
<div id="ancestor1">
<div id="parent1">
<div id="child11"></div>
<div id="child12"></div>
</div>
<div id="parent2">
<div id="child2"></div>
</div>
</div>
<div id="ancestor2"></div>
</body>
</html>
div span {
background-color: lightcoral;
}
<div>
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<span>Span 3.</span>
这样只会影响到div里的span标签,而div外的标签则不会受到影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span{
color: teal;
}
div>span{
color: violet;
}
</style>
</head>
<body>
<div>
<span>
哈哈哈
<span>hahah </span>
<a href="http://antmoe.com">ce </a>
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#a+li{
color: red;
}
</style>
</head>
<body>
<ul>
<li id="a">1sadsada</li> <!-- 不会变色 -->
<li>555555</li><!-- 变色 -->
</ul>
</body>
</html>
p~code
p元素之后的元素
定位与该目标元素拥有同一个父级元素的之后任意指定元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>普通兄弟选择器</title>
<style>
span {
background-color: lightgreen;
}
p~code {
background-color: lightcoral;
}
</style>
</head>
<body>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code> 会变色
<span>And here is a span.</span>
</body>
</html>
h1, h2, h3, h4, h5, h6 { color:blue; }
同时定义多个标签的属性。
p.cls {
color: blueviolet;
}
表示把所有class名为cls的p标签都设置成blueviolet颜色
伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的 HTML 元素的状态信息。
/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}
:not(selector) {
属性 : 属性值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类选择器</title>
<style>
.fancy {
text-shadow: 2px 2px 3px gold;
}
p:not(.fancy) { /*匹配class名不是fancy的p标签*/
color: green;
}
body :not(p) { /*匹配body中不是p标签的标签*/
text-decoration: underline;
}
</style>
</head>
<body>
<p>我是一个段落。</p>
<p class="fancy">我好看极了!</p>
<div>我不是一个段落。</div>
</body>
</html>
注意:
#foo:not(#bar)
和 #foo
会匹配相同的元素。 但是前者的优先级更高。:not(foo)
将匹配任何非 foo 元素,包括 html 和 body 元素。CSS 中伪元素选择器的用法与伪类选择器的用法类似,都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同,伪类选择器是用来描述某个指定元素的状态信息,而伪元素选择器是用来描述某个指定元素的特定部分设定样式。
/* CSS3 语法 */
选择器::伪元素 {
属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
属性 : 属性值;
}
伪元素选择器的语法格式为 ::伪元素
,一定不要忘记 ::
。伪元素选择器只能和基本选择器配合使用,并且一个选择器只能使用一个伪元素选择器,如果要为一个选择器增加多个伪元素选择器需要分别编写。
::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素,::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a::after{
content: "→";
}
a::before{
content: "♥";
}
</style>
</head>
<body>
<div>
<a href="https://antmoe.com">这是一个测试内容</a>
</div>
</body>
</html>
::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容。 如下示例代码展示了**::first-letter 伪元素**的用法:
p::first-letter {
font-size: 130%;
}
::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容。 如下示例代码展示了**::first-line 伪元素**的用法:
.line::first-line{
background-color: tomato;
}
::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容(比如使用鼠标或其他选择设备选中的部分)设置高亮效果。如下示例代码展示了**::selection 伪元素**的用法:
p::selection {
color: gold;
background-color: red;
}
只有一小部分 CSS 属性可以用于::selection
伪元素: