css选择器

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

已于 2022-08-03 21:59:39 修改

阅读量347

点赞数 2

文章标签： css html css3

于 2022-07-27 21:43:08 首次发布

本文链接：https://blog.csdn.net/weixin_68531139/article/details/126022767

版权

选择器

基本选择器

CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始
CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
选择器可以分为基础选择器、复合选择器

基本选择器

1、通配（通用）选择器

语法 *{ 样式声明 }
作用：匹配任意类型的HTML元素

<style>        
    /* 页面上所有元素都被选择 */
    *{
        background-color:green;
    }
        
</style>
<body>
    <p>p</p>
    <div>div1</div>
    <div>div2
        <div>div3</div>
    </div>
    
</body>


   /* 一般用于清除浏览器的默认样式 */
            margin: 0;
            padding: 0;
权重是0

2、元素名称（标签）选择器

语法：元素名称{ 样式声明 }
作用：选择所有同一元素名称的所有元素

/* 选择body */
body{
	background-color:green;
}
/* 选择页面上所有的div */
div{
	width:100px;
	height:100px;
	background-color:red;
}
/* 选择页面上所有的p */
p{
	background-color: pink;
}

3、类选择器

语法

HTML中通过class属性定义
```
<div class="box"></div>
```

css中以点进行标识:.

.类名 {
    样式声明;
}
.box{
	background-color:red;
}

作用:选择所有带有指定类名的元素
多类名的使用（词列表）
- 语法：空格隔开
- ```
    <p class="box box1 box2">p</p>
```

4、id选择器

语法

HTML中通过id属性定义

如：
```
<div id="box"></div>
```

css中以点进行标识:#

#id名称 { 
    样式声明;
}


#box{
	background-color:red;
}

作用:选择所有带有指定类名的元素

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

5、群组选择器

群组选择器是在样式表中有很多具有相同样式的元素，为了尽量减少代码，我们可以用群组选择器
群组选择器是将任意多个选择器分在一组，每个选择器之间用逗号隔开

语法
```
E，F { 
    样式声明;
}
```
描述：【逗号】连接一个或多个选择器
作用：使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式

      选择器1，选择器2，选择器3{}；
    选择器1和选择器2选择器3是都具有相同的样式的
    选择器1和选择器2选择器3中间以逗号来隔开: 选择器1，选择器2，选择器
    注意：最后一个选择器后面不用加逗号
        h2,
        h3,
        h6,
        div,
        .box,
        #box2 {
            color: blue;
        }
    <h2>h2h2h2h2h2h</h2>
    <h3>h3h3h3h3h3</h3>
    <h6>h6h6h6h6h6h</h6>
    <div>divdivdiv</div>
    <div class="box">box111</div>
    <p id="box2">ppppp</p>

6、层次选择器

后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 当前M下面的所有兄弟N标签
相邻 M + N { } 当前M下面相邻的N标签

1.后代选择器

后代选择器又称包含选择器，可以选择某元素后代的元素

语法：
```
E F {
    样式声明;

}
```
描述：【空格】连接一个或多个选择器
作用：选择E元素内部包含的所有F元素

 /* .warp 范围内所有的span都有效 */
.wrap span {
            color: tomato;
        }
 <div class="wrap">
        <span>我是第一个span</span>
        <ul>
            <li>
                <span>我是第a二span个</span>
            </li>
        </ul>
        <span>我是第三个span</span>
        <div class="txt">div文本</div>
    </div>

2.子代选择器

子代选择器他只能选择他的子代范围内的选择器，也就是父子关系

语法
```
E > F {
    样式声明; 
}
```
描述：【大于】号连接一个或多个选择器
作用：选择E元素内部包含的所有直接子元素F（第一嵌套层级）

父类选择器与子代选择器之间与大于号隔开
 /* .warp 范围内所有的子元素span都有效 */
.wrap>span {
            color: tomato;
        }
 <div class="wrap">
        <span>我是第一个span</span>
        <ul>
            <li>
                <span>我是第a二span个</span>
            </li>
        </ul>
        <span>我是第三个span</span>
        <div class="txt">div文本</div>
    </div>
    </div>

3.相邻选择器

示例：E+F{ 样式声明 } 用加号连接
描述：【加号】连接一个或多个选择器
作用：E元素之后紧跟着的兄弟元素F

代码示例：

p+a { /* 紧跟在p标签之后的a标签 */
color: black;
}

当两个兄弟元素相同时，会实现一次循环查找：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    li + li {
        color:red;
    }
</style>
</head>
<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
</body>
</html>

4.兄弟选择器

而~ 选择器：作用是查找某一个指定元素的后面的所有兄弟结点。

.des~p { /* .des同父级下排在.des之后的所有p 和+不同 并不需要紧跟*/
color: red;
}

element+element : 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。
element1~element2: 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒
注：一般的网站都只设置  ： a{}   ( link visited active )    a:hover{}
:after、:before    通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled 、:focus 都是针对表单元素的

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式
nth-of-type(n): 匹配同类型中的第n个同级兄弟元素 n可以是一个数字，一个关键字，或者一个公式
:first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数
:last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数
:only-of-type 匹配同类型中的唯一一个指定类型元素 没有() 参数
:not(s) 匹配每个元素是不是指定的元素/选择器 s为选择器 selector的缩写

li:first-child { /* 选择第一个孩子 */
color: pink;
}
 li:last-child { /* 最后一个孩子 */
color: purple; 
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue; 
}
p:nth-of-type(3) { /* 选择第3个同类别的兄弟元素 n 代表 第几个的意思 */
background-color: #f00; 
}
p:first-of-type { /* 选择每个p元素是其父级的第一个p元素*/
color: skyblue; 
}
p:last-of-type { /* 选择每个p元素是其父级的最后一个p元素 */
color: pink; 
}
p:only-of-type { /* 选择每个p元素是其父级的唯一p元素 */
color: yellow; 
}
p:not(.desc) { /* 选中除了类名为desc的其他p标签*/
color: green 
}

属性选择器（CSS3)

M[attr] {}
= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[] : 组合匹配
选取标签带有某些特殊属性的选择器我们成为属性选择器规定值都加引号

/* 获取到 拥有 该属性的元素 */
div[class^='font'] { /* class^=font 表示 font 开始位置就行了 */
color: pink; 
}
div[class$='footer'] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue; 
}
div[class*='tao'] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green; 
}

<div class="font12">属性选择器</div> 
<div class="font12">属性选择器</div> 
<div class="font24">属性选择器</div> 
<div class="font24">属性选择器</div> 
<div class="font24">属性选择器</div> 
<div class="24font">属性选择器123</div> 
<div class="sub-footer">属性选择器footer</div> 
<div class="jd-footer">属性选择器footer</div> 
<div class="news-tao-nav">属性选择器</div> 
<div class="news-tao-header">属性选择器</div> 
<div class="tao-header">属性选择器</div> </div>

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

/* 首字特殊样式 */
p::first-letter { 
font-size: 20px;
color: hotpink;
 }

/* 首行特殊样式 */
p::first-line {
color: skyblue;
 }

p::selection {
/* font-size: 50px; */
color: orange; 
}

4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
content:"开始";
 }
div::after {
content:"结束";
 }

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览
器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素注意: IE9下不支持:: 所以保证兼容可以写为 :
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正
的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际
上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无
法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的 content 属性，表示伪元素的内容,设置:before和:after时必须设置其 content 属性，否则伪元素就不起作用。

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css选择器

这个两个伪元素的content属性，表示伪元素的内容,设置before和after时必须设置其content属性，否则伪元素就不起作用。Eafter、Ebefore在旧版本里是伪元素，CSS3的规范里“”用来表示伪类，“”用来表示伪元素，但是在高版本浏览。之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正。的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际。.........
复制链接

扫一扫