Skip to main content

选择器

1、标签选择器#

1.1、用标签名作为选择器#

  • 选择页面中指定元素名称的所有元素设置统一的css样式

在这里插入图片描述

2、类选择器 .class#

2.1、元素标签.类名作为选择器#

  • 每一个元素标签都可以添加class属性，该属性的值即为类名
  • 类名自己定义，不能为纯数字和汉字，见名知意
  • 类名前+ .点号

在这里插入图片描述

注意
类选择器可以重复多次使用，可以多个标签的class属性都引用同一个类选择器，即它们就拥有相同的样式

2.2、多类名选择器#

  • class属性可以指定多个类名

在这里插入图片描述

注意
（1）元素标签中class属性引入了多个类名，并在style样式中都声明了类选择器，此时该标签就拥有了两个样式表
（2）重复的样式属性后面的会覆盖前面的
（3）前后顺序是由style中类选择器声明的顺序而定的，和元素中class属性里的引用顺序无关

3、id选择器 #id#

3.1、元素标签的#id作为选择器#

  • 每一个元素标签都可以添加id属性，该属性的值即为id名
  • id名自己定义，不能为纯数字和汉字，见名知意
  • id名前要加上#号
  • 语法：#id { }

在这里插入图片描述

注意
#id选择器必须是唯一的（只能被一个标签的id属性引用与类选择器不同）

4、通配符选择器 *#

  • 所有的标签都会用通配符选择器里面的样式
    • 语法格式 * { }
      * {   margin-left:20px;   color:red;  }
注意
*选择器实际上只会用来清除浏览器元素默认的内外边距等样式，一般不建议它用

5、复合选择器#

5.1、交集选择器#

  • 由一个以上选择器写在一起组成（选择器之间不能有空格）

  • 表示既是又是的关系

  • 语法格式 选择器1选择器2 { }

      css代码    <!--p为标签选择器，.content为类选择器,两者之间没有空格-->        p.content { margin-left:20px;   color:red;   }
        html代码    <p class="content">这里的字是红色的</p>
    说明
    表示标签为 p 且类名为content的标签样式设置为左外边距20px，文字颜色为红色

5.2、并集选择器#

  • 用多个需要设置同一样式的选择器用逗号隔开组成
  • 表示谁和谁还有谁一起共用的关系（用逗号分隔开）
  • 语法格式选择器1,选择器2,选择器3，选择器4 { }
    css代码    p,.content,h1,#userid{ color:red;}
    html代码    <p>这里的字是红色的</p>    <h1>这里的字是红色的</h1>    <div  class="content">这里的字是红色的</div>    <div id="userid">这里的字是红色的</div>
    说明
    表示p元素标签、类名为content的元素标签，h1元素标签，id名为userid的选择器设置同一个样式文字颜色为红色

5.3、后代选择器#

  • 选择器的对应的元素发生嵌套有子父级关系(直接或间接包含)

  • 由多个选择器组成（用空格隔开）

  • 语法格式 选择器1 选择器2 { }

    css代码   .content p {color:red; }
    html代码<div  class="content">    <p>这里的字是红色的</p></div><div  class="content">    <div id="userid">        <p>这里的字是红色的</p>    </div></div>
    说明
    html中div和p两个元素是嵌套关系（div中直接或间接包含p），该选择器表示的是div下的p标签把文字颜色属性设置为red

5.4、子元素选择器#

  • 由两个选择器构成（使用>号分隔）
  • 选择器2必须直接被选择器1包含
  • 示例代码选择器1>选择器2 { }
    css代码 #user>.content{color:red;}
    html代码  <div id="user" >        <p class="content"></p>  </div>

5.5、选择器示例#

名称选择器示例示例说明
.class类选择器.intro{ }选择所有class="intro"的元素
#id选择器#firstname{ }选择所有id="firstname"的元素
*选择器*{ }选择所有元素
标签选择器p{ }选择所有<p>标签
并集选择器div,p{ }选择所有<div>元素和<p>元素
后代选择器div p { }选择<div>元素内的所有<p>元素
子代选择器div>p { }选择所有父级是 <div> 元素的 <p> 元素
element+element兄弟选择器 div+p { }选择所有紧接着<div>元素之后的<p>元素
属性选择器
==CSS3==		 选择器 [ 属性名 ] { }某选择器的标签含有某属性时进行样式设置
属性选择器
==CSS3==		 选择器 [ 属性名= 属性值 ] { }某选择器的标签含有某属性和某属性值时进行样式设置
属性选择器
==CSS3==		 选择器 [ 属性名^= F ] { }某选择器的标签含有某属性和属性值以F开头时进行样式设置
属性选择器
==CSS3==		 选择器 [ 属性名=$ F ] { }某选择器的标签含有某属性和属性值以F结尾时进行样式设置
属性选择器
==CSS3==		 选择器 [ 属性名*= F ] { }某选择器的标签含有某属性和属性值包含F时进行样式设置

6、伪类选择器#

6.1、超链接伪类选择器#

名称选择器示例示例说明
:linka:link{ }选择所有 未访问链接 设置样式
:visiteda:visited { }选择 已访问过的链接 设置样式
:hovera:hover{ }鼠标悬浮 在链接上的样式
:activea:active { }鼠标点击 链接时的样式

在这里插入图片描述

注意
:hover 其他元素也可以使用该伪类选择器

语法：选择器:hover{ }
:active 其他元素也可以使用该伪类选择器

语法：选择器:active{ }
在这里插入图片描述

6.2、其他#

名称选择器示例示例说明
:focusinput:focus{ }选择具有焦点的输入元素
:beforep:before{ }在每个<p>元素之前插入内容
使用content 属性来指定要插入的内容
:afterp:after { }在每个<p>元素之后插入内容
使用content 属性来指定要插入的内容
:enabled
==CSS3==		input:enabled { }选择每一个已启用的输入元素
:disabled
==CSS3==		input:disabled{ }选择每一个禁用的输入元素
:checked
==CSS3==		input:checked { }选择每个选中的输入元素元素
::selection
==CSS3==		::selection{ }匹配元素中被用户选中或处于高亮状态的部分

7、结构伪类选择器#

7.1、比较常用的结构伪类选择器#

名称选择器示例示例说明
:first-child
==CSS3==		p:first-child { }指定只有当<p>元素是其父级的第一个子级的样式。
:last-child
==CSS3==		p:last-child{ }选择每个p元素是其父级的最后一个子级。
:nth-child(n)
==CSS3==		p:nth-child(2) { }1选择每个p元素是其父级的第二个子元素
:nth-last-child(n)
==CSS3==		p:nth-last-child(2){ }1选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)
==CSS3==		p:nth-of-type(2){ }1选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)
==CSS3==		p:nth-last-of-type(2) { }1选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:not(selector)
==CSS3==		:not(选择器)选择每个并非指定的选择器元素的元素

8、CSS三大特性#

8.1、层叠覆盖性#

  • 优先级相同时，后来居上，以最后的样式为准
  • 优先级不同是，优先级高的覆盖优先级低的
注意
class属性引入多类名样式时，先后顺序和引入顺序无关和类选择器在<style>标签中的声明顺序有关

8.2、继承性#

  • 子标签对父标签样式有一定的默认继承性

    • 所有元素可继承：visibility和cursor

    • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

    • 块状元素可继承：text-indent和text-align

    • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

    • 表格元素可继承：border-collapse

8.3、优先级#

8.3.1、选择器优先级#

!important(非继承)>内联样式（1.0.0.0） > ID 选择器（0.1.0.0） > 类选择器 = 属性选择器 = 伪类选择器 （0.0.1.0）> 标签选择器 = 伪元素选择器（0.0.0.1）

注意：继承的权重为0.0.0.0

  1. 参数n可以为：整数（选择第几个） | 可以是 odd （选择奇数）| even（选择偶数）| 含n的计算公式（n从零开始 2n表示的就是选择第2个、第4个、第6个）↩
文章目录