前端学习记录15-CSS3选择器-(属性选择器、伪元素选择器、结构伪类选择器)

最新推荐文章于 2022-02-06 16:26:00 发布

SHoadgnaw

最新推荐文章于 2022-02-06 16:26:00 发布

阅读量120

点赞数

分类专栏：学习记录文章标签： css3

本文链接：https://blog.csdn.net/weixin_44541948/article/details/114827886

版权

学习记录专栏收录该内容

28 篇文章 0 订阅

订阅专栏

前端学习记录15-CSS3选择器-属性选择器、伪元素选择器、结构伪类选择器

属性选择器
伪元素选择器
- 伪元素创建字体图标
结构伪类选择器

属性选择器

属性选择器的权重高于标签选择器

类选择器、属性选择器、伪类选择器权重为10

有属性选择器后，在相同内容下有不同的情况可以不用起类名然后修改样式

disabled=“disabled” 禁用按钮一般情况是手机接收验证码然后按钮就不让按了

选择器语法	说明
e[att]	e元素中具有att属性的元素
e[att="a"]	e元素中具有att属性并且att属性值为a的元素
e[att^="a"]	e元素中具有att属性并且att属性为a开头的元素
e[att$="a"]	e元素中具有att属性并且att属性为a结尾的元素
e[att*="a"]	e元素中具有att属性并且att属性包含a的元素

举例代码：

<style>
        button {
            cursor: pointer;
        }
        /* 属性选择器使用方法 */
        
        button[disabled] {
            cursor: default;
        }
        
        input[type="search"] {
            color: red;
        }
        
        div[class^="icon"] {
            color: rosybrown;
        }
        
        div[class$="icon"] {
            color: royalblue;
        }
        
        div[class*="icon"] {
            color: chartreuse;
        }
</style>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>
    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="search" value="搜索框">
    <input type="search" value="搜索框">
    <input type="search" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="4icon">图标4</div>
    <div class="iicon4">图标5</div>
</body>

伪元素选择器

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

before和after必须有content属性
before在内容的前面，after在内容的后面
before和after创建一个元素，但是属于行内元素

因为在dom里面看不见刚才创建的元素，所以称为伪元素
伪元素和标签选择器一样权重为1

举例代码：

div {
       	width: 300px;
        height: 300px;
        border: 1px solid #000;
}
        
div::before {
       	content: "我";
        width: 100px;
        height: 100px;
        background-color: #333;
        display: block;
}
        
div::after {
       	content: "真的爱你";
}

<div>是</div>

伪元素创建字体图标

div,
p {
    position: relative;
    width: 260px;
    height: 30px;
 	border: 1px solid red;
}
        
@font-face {
	font-family: 'icomoon';
    src: url('fonts/icomoon.eot?4oc99t');
    src: url('fonts/icomoon.eot?4oc99t#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?4oc99t') format('truetype'), url('fonts/icomoon.woff?4oc99t') format('woff'), url('fonts/icomoon.svg?4oc99t#icomoon') format('svg');
   	font-weight: normal;
    font-style: normal;
    font-display: block;
}
        
span {
    font-family: 'icomoon';
    position: absolute;
    top: 8px;
    right: 10px;
}
/* p::after {
    font-family: 'icomoon';
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
} */
        
p::after {
    font-family: 'icomoon';
    content: "\e900";
    position: absolute;
    top: 8px;
    right: 10px;
}

<div><span></span></div>
<p></p>

结构伪类选择器

选择器语法	说明
e:first-child	匹配父元素的第一个子元素e
e:last-child	匹配父元素的最后一个子元素e
e:nth-child(n)	匹配父元素的第n个子元素e 这个n可以是数字、关键字和公式 n如果是数字就是选择第几个,关键词有 even偶数 odd奇数这个效果可以弄隔行变色如果n是公式则从0开始计算但是第0个元素或者超出了元素个数会被忽略 2n 为偶数 2n+1 为奇数 5n为 5、10、15 .... n+5 从第五个开始,包括第五个 -n+5 前五，包括第五个
不加限定，只选第几个孩子，不区分孩子是不是同一种类型如果在一个父元素中，存在不同类型的子元素，就不能限定某一个类型的孩子，如果使用了，就选择不出任何元素。

举例说明:

此条语句选择的是p标签
div :nth-child(1) {
	background-color: goldenrod;
}

此条语句选择的是第1个span标签
div :nth-child(2) {
    background-color: hotpink;
}
        
本来此条语句想选择第一个span标签 但是因为语法不对，此条语句就选择不出来任何元素     ↓  
div span:nth-child(1) {
    background-color: khaki;
}

如果非要这么写需要写成，才可以实现 ↓
div span:nth-child(2) {
    background-color: khaki;
}

<div>
   <p>我是p</p>
   <span>我是span</span>
   <span>我是span</span>
   <span>我是span</span>
</div>

选择器语法	说明
e:first-of-type	指定类型e的第一个
e:last-of-type	指定类型e的最后一个
e:nth-of-type	指定类型e的第n个

具体写法:

ul li:first-child {
    background-color: red;
}
        
ul li:last-child {
    background-color: gold;
}
        
ul li:nth-child(3) {
    background-color: coral;
}
        
ul li:nth-child(even) {
    background-color: darkgoldenrod;
}
        
ul li:nth-child(odd) {
    background-color: violet;
}
        
ul li:nth-child(2n) {
    background-color: chartreuse;
}
        
ul li:nth-child(2n+1) {
    background-color: #333;
}
        
ul li:nth-child(5n) {
    background-color: #666;
}
        
ul li:nth-child(n+5) {
    background-color: wheat;
}
        
ul li:nth-child(-n+5) {
    background-color: rebeccapurple;
}
        
div :nth-child(1) {
    background-color: goldenrod;
}
        
div :nth-child(2) {
    background-color: hotpink;
}
        
div span:nth-child(2) {
    background-color: khaki;
}
        
div span:first-of-type {
    background-color: #fff;
}

SHoadgnaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习记录15-CSS3选择器-(属性选择器、伪元素选择器、结构伪类选择器)

前端学习记录15-CSS3选择器-属性选择器、伪元素选择器、结构伪类选择器属性选择器伪元素选择器伪元素创建字体图标结构伪类选择器属性选择器属性选择器的权重高于标签选择器类选择器、属性选择器、伪类选择器权重为10有属性选择器后，在相同内容下有不同的情况可以不用起类名然后修改样式disabled=“disabled” 禁用按钮一般情况是手机接收验证码然后按钮就不让按了选择器语法说明
复制链接

扫一扫