1.CSS选择器都有哪些?
·元素选择器
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
·类选择器
<h1 class="important">
This heading is very important.
</h1>
.important {color:red;}
注:类选择器的灵活性
1.可结合元素选择器
可能希望只有段落显示为红色文本:
p.important {color:red;}
2.可多个类选择器(允许有以空格分隔的词列表)
<p class="important warning">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
·ID选择器
<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;}
注:ID选择器的局限性
1.类选择器可多处使用,而ID选择器只能使用一次
2.ID选择器不允许有以空格分隔的词列表
PS:在HTML和XML语言中,类选择器和ID选择器是区分大小写的
·属性选择器
把包含标题(title)的所有元素变为红色
*[title] {color:red;}
只对有 href 属性的锚(a 元素)应用样式
a[href] {color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}
对所有带有 alt 属性的图像应用样式
img[alt] {border: 5px solid red;}
由于属性选择器较少用,就不在这里占较大篇幅啦,可点链接学习
XML语言的属性选择器知识点:CSS属性选择器详解
·后代选择器(包含选择器)
把作为 h1 元素后代的 em 元素的文本变为 红色
<h1>This is a <em>important</em> heading</h1>//会应用到样式
<p>This is a <em>important</em> paragraph.</p>//不会应用到样式
h1 em {color:red;}
·子元素选择器
注:与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
把第一个 h1 下面的两个 strong 元素变为红色
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>//受影响
<h1>This is <em>really <strong>very</strong></em> important.</h1>//不受影响
h1 > strong {color:red;}
·相邻兄弟选择器
可选择紧接在另一元素后的元素,且二者有相同父元素
增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
//选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素
·伪类
A.锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
注:
1.在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2.在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
3.伪类名称对大小写不敏感。
4.可与CSS类配合使用
//链接被访问过,则显示为红色
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
B. :first-child伪类
匹配第一个<p>
元素
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>//应用样式
<p>some text</p>//不会应用样式
</body>
</html>
匹配所有 <p>
元素中的第一个 <i>
元素
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
匹配所有作为第一个子元素的 <p>
元素中的所有 <i>
元素
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
C. :lang伪类
:lang 类为属性值为 no 的 q 元素定义引号的类型
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
·伪元素
A. :first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式
注:“first-line” 伪元素只能用于块级元素。
注:下面的属性可应用于 “first-line” 伪元素:
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
B. :first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注:“first-letter” 伪元素只能用于块级元素。
注:下面的属性可应用于 “first-letter” 伪元素:
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
C. :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(logo.gif);
}
D. :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(logo.gif);
}
注:
1.伪元素可与类配合使用
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
2.可多个伪元素一起使用
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
//段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示
2.CSS选择器的权重关系,优先级?
1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
5.那么后代选择器的优先级就可以计算了
比如 .divClass span { color:Red;}
优先级别就是:10+1=11
如果此篇博客能帮得到你,欢迎大家关注,点赞,评论,收藏,转发呀~
如有不足也请在评论区提出批评指正!多多指教!