【面试】细谈CSS选择器以及它们的权重关系？

最新推荐文章于 2022-05-13 17:37:26 发布

Danli.

最新推荐文章于 2022-05-13 17:37:26 发布

阅读量225

点赞数

分类专栏： css 面试文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45680114/article/details/113931174

版权

面试同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

文章目录

1.CSS选择器都有哪些？
2.CSS选择器的权重关系，优先级？

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

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！

Danli.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【面试】细谈CSS选择器以及它们的权重关系？

文章目录1.CSS选择器都有哪些？**·元素选择器****·类选择器**·ID选择器·属性选择器·后代选择器（包含选择器）·子元素选择器·相邻兄弟选择器·伪类·伪元素2.CSS选择器的权重关系，优先级？1.CSS选择器都有哪些？·元素选择器html {color:black;}h1 {color:blue;}h2 {color:silver;}·类选择器<h1 class="important">This heading is very important.</h1&
复制链接

扫一扫

专栏目录