devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS 选择器（超级详细，欢迎补充）_css选择器

作者：菜鸟追梦旅行 | 2024-03-27 16:35:17

赞

踩

css选择器

目录

1、导语

 2、css基本选择器

1）、标签选择器

 2）类选择器

 3）ID选择器

 4）通配符选择器

 3、css组合选择器

1）标记类别选择器（交集选择器）

 2）后代选择器

 3）子选择器

 4）兄弟选择器

 Ⅰ、相邻兄弟选择器

 Ⅱ、普通兄弟选择器

 4、css其他选择器

1）、根据属性名称选择元素

 2）根据属性值来选择元素

Ⅰ、简单匹配元素

Ⅱ、通过通配符匹配

 5、css伪类

 1）状态伪类

Ⅰ、锚伪类

 Ⅱ、focus伪类

 2）结构性伪类

 6、css伪元素

 7、css两大特性

 1）继承性

2）层叠性

 8、选择器的优先级

1、导语

css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。

选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）

声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。

今天我们重点来介绍css中的选择器。

  1. //基本语法
  2. selector{
  3. property1:value1;
  4. property2:value2;
  5. property3:value3;
  6. ...
  7. }

 2、css基本选择器

1）、标签选择器

可以看这篇博客链接HTML的标签HTML的常用标签

HTML文档的标签是css样式规则中非常常见的选择器。我们可以直接将HTML的标签作为选择器的名称，如p、h1、em，设置html本身。

 示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.       /*   p{        //p标签选择器
  10.             border: 1px salmon solid;
  11.             height: 100px;
  12.             width: 100px;
  13.             text-align: center;
  14.             line-height: 100px;
  15.         }
  16.         h5{         //h5标签选择器
  17.             border: 1px red solid;
  18.             height: 100px;
  19.             width: 100px;
  20.             text-align: center;
  21.             line-height: 100px;
  22.         } */
  23.     </style>
  24. </head>
  25. <body>
  26.     <p>段落标签</p>
  27.     <h5>文章标题标签</h5>
  28. </body>
  29. </html>

 未 加标签选择器

 963dec3d2d7547bf95f8db20044f5fa0.png

 加 标签选择器

e1977c53a077420ea5c87222efdfb1a2.png

 2）类选择器

网页中通过使用标签选择器控制文档中所有该标签的样式，但是在实际设计过程中，有些由相同标签定义的不同对象需要显示不同的样式，这时就需要利用其他选择器来实现差异化的样式定义，例如可以利用类选择器轻松地将文档中多个<p>段落设置成不同的样式。

CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

 语法： .类名 {样式声明 }

示例

 就比如上一个代码只需一个类选择器就可以实现和上述代码一样的效果，因此，灵活运用各种选择器是我们写好代码的关键。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .class{      
  10.             border: 1px red solid;
  11.             height: 100px;
  12.             width: 100px;
  13.             text-align: center;
  14.             line-height: 100px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <p class="class">段落标签</p>
  20.     <h5 class="class">文章标题标签</h5>
  21. </body>
  22. </html>

 19fdf091a08f4efb9a39ec53b4d5f8c8.png

 3）ID选择器

 ID选择器的使用方法和类选择器基本相同，定义了样式规则之后，通过标签的id属性来引用。

 语法：#id 属性值 {样式声明 }

 示例

还是上面那个代码，只要稍微改动即变成了ID选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #class{
  10.             border: 1px red solid;
  11.             height: 100px;
  12.             width: 100px;
  13.             text-align: center;
  14.             line-height: 100px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <p id="class">段落标签</p>
  20.     <h5 id="class">文章标题标签</h5>
  21. </body>
  22. </html>

 4556537350394236b84b18a4242bf498.png

 那这个时候就有人会问那ID选择器和类选择器有什么区别吗？

答：有。正常情况下，ID属性值在文档中是具有唯一性的，所以ID选择器和类别选择器最大的区别就是:一个ID选择器只能被引用一次，针对性强;一个元素只能引用一个ID选择器。因此一般大结构用ID选择器，如标志、导航、主体内容、版权等，结构内部用类别选择器。

 4）通配符选择器

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如*.class 和.class 的效果完全相同。

在 CSS3 中，星号 (*) 可以和命名空间组合使用：

1、ns|*    会匹配ns命名空间下的所有元素

2、*|*     会匹配所有命名空间下的所有元素

3、|*       会匹配所有没有命名空间的元素

 

 3、css组合选择器

1）标记类别选择器（交集选择器）

这是由两个选择器直接连接构成，其指点的对象是两个基本选择器所指向的交集。其中第一个选择器必须是标签选择器，第二个选择器是类别选择器或者ID选择器。

语法： 标签名.类目(#ID名){样式声明 }   （两个选择器之间不能有空格，必须连写）

 示例

当你希望两个基本选择器所指向的交集有所不同时，就可以使用该选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #class{
  10.             border: 1px red solid;
  11.             height: 100px;
  12.             width: 100px;
  13.             text-align: center;
  14.             line-height: 100px;
  15.         }
  16.         p{
  17.             border: 2px gold solid;
  18.             height: 100px;
  19.             width: 100px;
  20.             text-align: center;
  21.             line-height: 100px;
  22.         }
  23.         /*标记类别选择器*/
  24.         p#class{    
  25.             border: 3px black solid;
  26.             height: 100px;
  27.             width: 100px;
  28.             text-align: center;
  29.             line-height: 100px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <h5 id="class">文章标题标签</h5>
  35.     <p>段落标签1</p>
  36.     <p id="class">段落标签</p>
  37. </body>
  38. </html>

 0c71cba40174485f938de3acc63138f2.png

 2）后代选择器

 通常用单个空格（" "）字符表示 组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。后代选择器有利于表现文档结构的上下文关系。

 语法：选择器1 后代选择器2{样式声明}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p{
  10.             border: 1px red solid;
  11.             text-align: center;
  12.             line-height: 100px;
  13.         }
  14.         /*后代选择器*/
  15.         p span{    
  16.             border: 3px black solid;
  17.             text-align: center;
  18.             line-height: 100px;
  19.         }
  20.         /*span{     //与后代选择器作用相同
  21.             border: 3px black solid;
  22.             text-align: center;
  23.             line-height: 100px;
  24.         }*/
  25.     </style>
  26. </head>
  27. <body>
  28.     <p>段落标签
  29.         <span>spanspan</span>
  30.     </p>
  31. </body>
  32. </html>

47f85401503e46fb8da25f0f77a25660.png

 3）子选择器

描述的是某个元素的子元素，在两个选择器之间用">"来连接。

 语法：元素 1 > 元素 2 {样式声明 }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p{
  10.             border: 2px gold solid;
  11.             height: 100px;
  12.             width: 100px;
  13.             text-align: center;
  14.             line-height: 100px;
  15.         }
  16.          /* 子元素选择器 */
  17.         p>span{   
  18.             border:3px black solid;
  19.             height:100px;
  20.             width:100px;
  21.             text-align:center;
  22.             line-height: 100px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <p >段落标签1
  28.         <span>spanspan</span>
  29.     </p>
  30. </body>
  31. </html>

3b1c4034abcf4f2ea89504d440171a18.png

 4）兄弟选择器

 兄弟选择器主要包括两类：相邻兄弟选择器和普通兄弟选择器

 Ⅰ、相邻兄弟选择器

当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

语法：选择器1+选择器2{样式声明 }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         li:first-of-type + li {
  10.              color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>One</li>
  17.         <li>Two!</li>
  18.         <li>Three</li>
  19.       </ul>
  20. </body>
  21. </html>

2b0336679af04622a1c0f0afa3bb0e84.png

 Ⅱ、普通兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素

 语法：选择器1~选择器2{样式声明 }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p ~ span {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <span>span11</span>
  16.     <p>pppp</p>
  17.     <span>span22</span>
  18.     <p>pppp</p>
  19.     <span>span33</span>
  20. </body>
  21. </html>

 941671f8755f4464b15e8a655af4f50e.png

 4、css其他选择器

1）、根据属性名称选择元素

根据元素的属性名称及属性值来选择元素

 语法： [attribute]{样式声明}     （将具有"attribute"属性的元素作为选择器的选的对象）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         [class]{
  10.             font-size: 20px;
  11.         }
  12.         /* 属性名称也可以和标签结合起来用 */
  13.         span[class]{
  14.             font-size: 10px;
  15.             color: red;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <p>根据属性名称选择元素11</p>
  21.     <p>根据属性名称选择元素22</p>
  22.     <p class="class">根据属性名称选择元素33</p>
  23.     <span class="class">根据属性名称选择元素44</span>
  24. </body>
  25. </html>

 1975de7beb06473eaf8d51bdece4c104.png

 2）根据属性值来选择元素

Ⅰ、简单匹配元素

语法：[attribute=value]   (表示匹配某个属性为value的元素)

如：[class=one]{font-size:15px}

Ⅱ、通过通配符匹配

我们先来看看个个通配符的含义（我只列出来部分常用的通配符）

字符说明字符说明
[]用来匹配所包含字符集合中的任意一个字符匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。
例如，[abcd] 和 [a-d] 是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。		x|y匹配‘x’或者‘y’。
例如，/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’
.匹配除换行符以外的任意一个字符
例如，/.n/ 将会匹配 "nay, an apple is on the tree" 中
的 'an' 和 'on'，但是不会匹配 'nay'。		[\b]匹配一个退格 (U+0008)。（不要和\b混淆了。）
\w匹配任意—个字母或数字或下划线，等价于[O-9a-zA-Z]\B匹配一个非单词边界。匹配如下几种情况：
字符串第一个字符为非“字”字符
字符串最后一个字符为非“字”字符
两个单词字符之间
两个非单词字符之间
空字符串
\W匹配除了字母或数字或下划线或汉字以外的任意一个字
符，等价于[AO-9a-ZA-Z]		\r回车符
\s匹配任意一个空白符，等价于[Hfnritlv]\v垂直制表符
\S配任意—个空白字符，等价于[^Ifnlritiv]*重复0次或更多次。
例如，/bo*/ 会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中不会匹配任何内容。
\d匹配一个数字字符，等价于[O-9]或[0123456789]+重复一次或更多次
\D匹配一个非数字字符，等价于[AO-9]或[^0123456789]?重复0次或1次,等价于 {0,1}。
\b匹配单词的开始或结束{n}重复n次
^匹配字符串的开始。
例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。		{n,}重复n次或更多次。
例如，/a{2,}/ 匹配 "aa", "aaaa" 和 "aaaaa" 但是不匹配 "a"。
$匹配字符串的结束
例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。		{n,m}重复n到m次

 5、css伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。伪类主要分成为两种：状态伪类和结构性伪类

 想看更加详细的伪类请点击这里

 1）状态伪类

Ⅰ、锚伪类

锚伪类是与超级链接有关的伪类。

link：为被访问过的状态

hover：鼠标悬停状态

active：活动状态

visited：已被访问过的状态，与link互斥

需要注意的是：hover必须置于link和visited之后才有效，active必须置于hover之后才有效

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         a:link{
  10.            color: red;
  11.         }
  12.         a:hover{
  13.             color: black;
  14.         }
  15.         a:active{
  16.             color: aqua;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <a href="###">空链接</a>
  22. </body>
  23. </html>

 未被访问：

bcb8b982a3d44ce4b8554b380511533b.png

鼠标悬停：

2d2b0f4fab03469fae42d6ade744c7e7.png

 活动状态：

242993361f484062b98f5d4c9d37a5ff.png

 Ⅱ、focus伪类

focus 伪类应用于拥有键盘输入焦点的元素,比较常见的是表单中的一些控件,例如<input type = "text"/>这样的文本输入控件,用户向这个控件中输入数据之前，要使该控件获得焦点,可以通过伪类对获得焦点这一状态下的元素设置样式。

 2）结构性伪类

元素名描述
:first-child匹配父元素的第一个子元素
: last-child匹配父元素的最后一个子元素
: only-child匹配父元素有且只有一个子元素
: only-of-type匹配父元素有且只有一个指定类型的元素
: nth-child (n)匹配父元素的第n个子元素
: nth-last-child (n)匹配父元素的倒数第n个子元素
:nth-of-type (n匹配父元素定义类型的第n个子元素>
: nth-last-of-type(n)匹配父元素定义类型的倒数第n个子元素
: first-of-type匹配一个上级元素的第一个同类子元素
: last-of-type匹配一个上级元素的最后一个同类子元素 

 使用号结构性伪类可以减少class和ID属性的定义，使文档结构更简洁，代码更有观赏性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul li:nth-child(2n){
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>1111</li>
  17.         <li>2222</li>
  18.         <li>3333</li>
  19.         <li>4444</li>
  20.         <li>5555</li>
  21.         <li>6666</li>
  22.     </ul>
  23. </body>
  24. </html>

 39f666d8fda5459c90bb0101c39ba0fb.png

 6、css伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

想看更加详细的伪元素请点击这里

常见伪元素选择器有：

：first-letter       （选择元素文本的第一个字或者字符）

：first-line         （选择元素文本的第一行）

：before           （在元素内容的最前面添加新元素）

：after              （在元素内容的最后面添加新元素）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul li:nth-child(2n){
  10.             color: red;
  11.         }
  12. /*在第一个li的第一个字符添加新的样式*/
  13.         li:first-child:first-letter{
  14.            font-size: 25px;
  15.            color: green;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <ul>
  21.         <li>1111</li>
  22.         <li>2222</li>
  23.         <li>3333</li>
  24.         <li>4444</li>
  25.         <li>5555</li>
  26.         <li>6666</li>
  27.     </ul>
  28. </body>
  29. </html>

bffcab28ccc641fdb763eb20ba7a6aa7.png

 7、css两大特性

 1）继承性

文档的上下文关系，在HTML结构中大多使通过嵌套来表现的，继承性就是基于这种嵌套关系的子元素对于父元素样式的继承。继承性的特点主要包括两方面：

1、子元素继承父元素部分的css样式风格

2、子元素可以产生新的css样式，不会影响父元素

但是并不是所以的css属性都会被继承，父元素的以下属性不会被子元素所继承

·边框属性

·外边距属性、内边距属性

·背景属性

·定位属性、布局属性

·元素的宽、高属性

2）层叠性

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p{
  10.             color: red;
  11.         }
  12. /*p样式重叠就会使用下面这样式*/
  13.         p{
  14.             color: black;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <p>1111</p>
  20.     <p>2222</p>
  21.     <p>3333</p>
  22. </body>
  23. </html>

 7761cde36acc4088898a78cc26f11740.png

 8、选择器的优先级

继承样式通配符选择器标签选择器类选择器ID选择器内联样式！important
无0110100100010000+

说明：

  1. 继承的样式没有权值
  2. 通配符、子选择器、相邻选择器等。如* > +，权值为0000。
  3. 类型选择器、伪元素选择器，如div p，权值为0001。
  4. 类，伪类、属性选择器，如.class，权值为0010。
  5. ID选择器，如：#class，权值为0100。
  6. 内联样式，如: style="..."，权值为1000。
  7. !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

比较规则：

一、 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。

二、无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。

三、在权重相同的情况下，后面的样式会覆盖掉前面的样式。

四、通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0 权值比无权值优先。

 看到这里了点个赞吧！！！！

 cb04ffdb246642f6b4f2f62a3a7f450c.png

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/325499
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号