CSS选择器总结

CSS中的选择器规则非常重要，种类也比较多，而jquery中的元素选择器与之也非常类似，所以很有必要进行学习总结一番。

1.元素选择器：

例：选择所有p元素

?
1
p {background-color:gray}

 以上p可以是任意的html元素名字，如body,h1,h2,div,span等。

2.选择器分组

例：选择所有p元素和h2元素

?
1
p,h2 {background-color:red}

3.类选择器

例：选择所有class='demo'的元素

?
1
.demo {background-color:gray}

4.类结合元素选择器

例：选择所有class='demo'的h1元素

?
1
h1.demo {background-color:red}

5.多类选择器

例：选择同时class标记为demo1,demo2的元素

?
1
.demo1.demo2{background-color:red}

6.ID选择器

例：选择ID=demo的元素

?
1
#demo {background-color:red}

  这里需要注意的是：（1）ID在整个html文档中是唯一的，而class不唯一（2）类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

7.属性选择器

（a)简单属性选择器

例：选择含有demo的属性的所有元素

?
1
*[demo] {color:red}

  例：只选择有 href 属性的锚（a 元素）

?
1
a[href] {color:red}

  例：选择同时有 href 和 title 属性的 HTML 超链接

?
1
a[href][title] {color:red}

 (b)根据具体属性值选择

例：选出title是'demo1'，href是'#'的超链接

?
1
a[title='demo'][href='#'] {color:red}

  需要注意的是title必须是'demo',不能多也不能少。

(c）根据部分属性值进行选择

例：选出title属性里包含'demo'的超链接，比如title本来是'demo1'

?
1
a[title~='demo'] {color:red}

  需要注意的是省略了‘~’，将找出'title‘属性值只能是'demo'的超链接。

（d)字串匹配属性选择器

 利用几个正则符号来表示如下：

[abc^="def"]   表示选择 abc 属性值以 "def" 开头的所有元素；

[abc$="def"]   表示选择 abc 属性值以 "def" 结尾的所有元素；

[abc*="def"]    表示选择 abc 属性值中包含子串 "def" 的所有元素；

（e)特定属性类型

例：选择 lang 属性等于 en 或以 en- 开头的所有元素

?
1
*[lang|="en"] {color: red;}

  所以，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

?
1
2
3
4
5
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>   
<p lang="cy-en">Jrooana!</p>

8.后代选择器

?
1
h1 em {color:red;}

例：上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

?
1
2
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

需要注意的是，后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

9.子元素选择器

如果希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

例：把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响，因为第二个h1的子元素只有em，而strong是其孙子元素。

?
1
2
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

　

?
1
h1 > strong {color:red;}

10.相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

例：如果要增加紧接在 h1 元素后出现的段落的上边距

?
1
h1 + p {margin-top:50px;}

请看下面这个文档树片段：

?
1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <ul>
    <li>List item 1</li>
    <li><strong>List item 2</strong></li>
    <li><strong>List item 3</strong></li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li><strong>List item 2</strong></li>
    <li><strong>List item 3</strong></li>
  </ol>
</div>

　在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

?
1
li + li {font-weight:bold;}

  因此，上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。

11.伪类

（a)锚伪类

?
1
2
3
4
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

　需要注意的是：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。

（b）first-child类

例：给定以下规则

?
1
2
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的 p 元素(如果不是p元素就是没找到）设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的li 元素(如果不是i元素就是没找到）变成大写。

?
1
2
3
4
5
6
7
8
9
<div>
<p><strong>These are the necessary steps</strong>:</p>  <--!>是<div>第一个元素，并且还是<p>元素。
<ul>
<li><strong>Intert Key</strong></li>  <--!>是<ul>第一个元素，并且还是<li>元素
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p> 
</div>

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

又例如：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  }
</style>
</head>
 
<body>
<p>some <i><strong>text</strong></i>. some <i>text</i>.</p>
<p>some <i><strong>text</strong></i>. some <i>text</i>.</p>
</body>
</html>

　首先p>i是p元素下的所有子元素i, 然后first-child，即图中加粗的部分。

再例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
} 
</style>
</head>

<body>
<h1>kdsk</h1>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
<div>
<p>some<i>text</i><span><i>test</i></span></p>
<p>some<i>text</i></p>
</div>
</body>
</html>

　首先p:first-child是某元素第一个<p>元素,所有<body>下没找到，而<div>找到了，因为它第一个子元素就是p；然后再在该p元素下找出所有后代子元素i，即上面代码块中标蓝色的两个text。

12.伪元素

（a)：first-line

用于向文本的首行设置特殊样式，注意只能用于块级元素，下面的属性可应用于:first-line.

?
1
2
3
4
5
6
7
8
9
10
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

　例：根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

?
1
2
3
4
5
p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

（b) ：first-letter

用于向文本的首字母设置特殊样式，只能用于块级元素。下面属性可应用于:first-letter.

?
1
2
3
4
5
6
7
8
9
10
11
12
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

  例：向文本的首字母设置特殊样式

?
1
2
3
4
5
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

  （c)：before

可以在元素的内容前面插入新内容.

例：在每个 <h1> 元素前面插入一幅图片

?
1
2
3
4
h1:before
  {
  content:url(logo.gif);
  }

　(d):after

以在元素的内容之后插入新内容

例：在每个 <h1> 元素后面插入一幅图片

?
1
2
3
4
h1:after
  {
  content:url(logo.gif);
  }

　　

 

posted @   JohnYang819  阅读(248)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示