前端学习日志 DAY4 选择器

最新推荐文章于 2023-01-10 12:09:36 发布

qq_51068622

最新推荐文章于 2023-01-10 12:09:36 发布

阅读量270

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_51068622/article/details/123950073

版权

1.交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3...选择器n{ }

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

如：

div.red{

font-size:30px }

这个选择器是为既是div元素而class属性值为red的元素设置样式

2.并集选择器（选择器分组）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，....选择器n{ }

如：

h1,p{

color:red; }

这个选择器是为h1元素和p元素设置样式

3.关系选择器

父元素：直接包含子元素的元素叫做父元素

子元素：直接被父元素包含的元素是子元素

祖先元素：直接或间接包含后代元素的元素叫做祖先元素（一个元素的父元素也是他的祖先元素）

后代元素：直接或间接被祖先包含的元素叫后代元素（子元素也是后代元素）

兄弟元素：拥有相同父元素的元素是兄弟元素

如：

<div>

div1

<p> p1

</p>

</div>

<div>是<p>和<span>的父元素和祖先元素（同理，<p>和<span>是<div>的后代元素），是<span>的祖先元素；<p>和<span>是兄弟元素，<p>是<span>的父元素和祖先元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素 { }

如： div.box>span{ color:red; }

后代选择器

作用：选中指定元素内的指定后代元素

语法： 祖先后代 { }

如： div span { color:green; }

兄弟选择器

选择紧挨着的下一个兄弟：

语法：前一个 + 下一个

选择后面的所有兄弟：

语法：指定元素 ~ 兄弟元素

4.属性选择器

[属性名] 选择含有指定属性的元素

[属性名=属性值] 选择含有指定属性和属性值的元素

[属性名^=属性值] 选择属性名以指定属性值开头的元素

[属性名$=属性值] 选择属性名以指定属性值结尾的元素

[属性名*=属性值] 选择属性值中含有某值的元素

如：

p [title ] 选择含有title的p元素

p [title=a ] 选择title属性值为a的p元素

p [title ^=a] 选择title属性值以a开头的p元素

p [title $=a] 选择title属性值以a结尾的p元素

p [title*=a ] 选择title属性值含有a的元素

5.伪类选择器

伪类（不存在的类，特殊类）：用来描述一个元素的特殊状态。如，第一个元素、被点击的元素、鼠标移入的元素

伪类一般使用：开头

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(n) 选中第n个子元素

:nth-child( )特殊值

n 第n个

2n(even) 选中偶数位的元素

2n+1(odd) 选中奇数位的元素

以上这些伪类都是根据所有子元素进行排序

<head>
   <style>
       
     ul>li:first-child{
         color:red;
          }

   
   </style>


</head>

<body>

   <ul>
      <span> 我是span </span>
      <li>  第一个  </li>
      <li>  第二个  </li>
      <li>  第三个  </li>
      <li>  第四个  </li>
      <li>  第五个  </li>
      <li>  第六个  </li>
    </ul>

</body>

如上图设置的样式，第一个<li>标签并不会应用上面设置的样式，因为在<ul>所有子元素中第一个<li>并不是所有子元素中的第一个

:first-of-type

:last-of-type

:nth-of-type( ）

这三个和上面三个伪类功能一样，不同点是这三个是在同类型元素中进行排序

如

<head>
   <style>
       
     ul>li:first-child{
         color:red;
          }

   
   </style>


</head>

<body>

   <ul>
      <span> 我是span </span>
      <li>  第一个  </li>
      <li>  第二个  </li>
      <li>  第三个  </li>
      <li>  第四个  </li>
      <li>  第五个  </li>
      <li>  第六个  </li>
    </ul>

</body>

上图设置的样式，第一个<li>标签会应用上面设置的样式，而<span>不会应用，因为它不是<li>这个类型

:not() 否定伪类，将符合条件的元素从选择器中去除

元素<a>的伪类（专属）

:link 用来表示没访问过的链接（正常的链接）

:visited 用来表示访问过的链接，由于隐私原因，这个伪类只能修改链接的颜色而不能修改链接字体大小

a:link{   color:red;}    /*没访问过的超链接设置为红色 */

a:visited{  color:purple; }    /* 访问过的超链接设为紫色 */

元素<a>相关伪类

:hover 用来当鼠标移入（防置）的状态

:active 用来表示鼠标点击时的状态

a:hover{ color:blue; }  /* 当鼠标放置（移入）超链接上时，将超链接设置为蓝色 */

a:active{ color:green; }  /*当鼠标点击超链接时，将超链接设置为绿色 */

6.伪元素选择器

伪元素 ：表示页面中一些特殊的并不真实的存在的元素（特殊位置），伪元素使用：：开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 表示元素的开始

::after 表示元素的最后

注意：before和after必须结合content属性来使用

p::first-letter{ font-size:20px;} /* 设置p元素内容中第一个字母的字体大小 */

p::first-line{ background-color:blue; }  /* 设置p元素内容第一行的背景颜色 */

p::selection{ background-color:yellow;} /* 设置鼠标选中p元素的内容时的背景颜色 */

div::before{ content:'abc';color:red;}  /* 在div元素内容前添加红色的abc字符串 */

div::after{ content:'h';color:blue;}  /* 在div元素内容后添加蓝色字符h */