CSS3复杂选择器的详解
今天把视频里的CSS3复杂选择器部分看完了，来整理一下学到的知识点。
1、兄弟选择器：同一位置级别，可称为兄弟元素
a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
语法：通过“+”作为结合符
eg: p+p ->紧跟在p后面的p元素
<!-- demo.html -->
<html>
<head>
<title></title>
</head>
<body>
<p>这是第一个段落</p>
<div id="d1">这是一个div</div>
<span>这是一个span</span>
<p class="p1">这是第二个段落</p>
<b>Hello World</b>
<p class="p2">这是第三个段落</p>
</body>
</html>
/*demo.css*/
div+p{
background: yellow;
}
#d1+p{
background: red;
}
span+.p1{
background: blue;
}b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：p~p{} ->匹配p后面所有的p
2、属性选择器：使用元素所附带的属性，用于选择器当中，作为选择元素的条件
语法：[属性相关内容]
eg：[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记
<!-- demo.html -->
<html>
<head>
<title></title>
</head>
<body>
<p class="clear p1 myself">
这是第四个段落
</p>
<div class="userContent">
文本内容
</div>
</body>
</html>
/*demo.css*/
p[class]{
color: #e4393c;
}
p[class~='p1']{
background-color: #cd2c2d;
color: #fff;
}
div[class ^= "us"]{
background-color: #bfb;
}
div[class$="t"]{
background-color: #bfb;
color: #333;
}3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)
<!-- demo01.html 目标伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<a href="#Tom">猫和老鼠(Tom and Jerry)</a>
<a href="#Atongmu">铁臂阿童木</a>
<a href="#BlackCat">黑猫警长</a>
<br>
<a name="Tom">第一部：Tom and Jerry</a>
<p style="height: 500px;">Tom and Jerry</p>
<div id="Atongmu" style="height: 500px;">我是阿童木</div>
<div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>
</body>
</html>
/*demo01.css*/
a:target,div:target{
background-color: #bfb;
font-size: 20pt;
}<!-- demo02.html 结构伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<p>This is a p</p>
</div>
<div id="d3">
This id d3
</div>
<div id="d4">
<b>first</b>
<b>second</b>
<b>third</b>
<b>last</b>
</div>
</body>
</html>
/*demo02.css*/
div{
width: 100px;
height: 100px;
}
b{
display: block;
}
div:empty{
background-color: #bfb;
}
p:only-child{
background-color: #fbf;
}
b:first-child{
font-size: 2em;
color: #fbb;
}
b:last-child{
font-size: 3em;
font-weight: normal;
color: #bbf;
}<!-- demo03.html 伪元素状态伪类 -->
<html>
<head>
<title></title>
</head>
<body>
用户名称：<input type="text"><br>
用户昵称：<input type="text" disabled value="请输入您的昵称">
<br>
性别：<input type="radio" name="rdoGender">男
<input type="radio" name="rdoGender">女
</body>
</html>
/*demo03.css*/
input:enabled{
color: red;
}
input:disabled{
border: 1px solid #f00;
}
input[name=rdoGender]:checked{
background-color: #bfb;
}<!-- demo04.html 否定伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<div>
用户名称：<input type="text"><br>
用户密码：<input type="password"><br>
<input type="submit" value="提交">
<input type="button" value="按钮">
</div>
</body>
</html>
/*demo04.css*/
input:not(:last-child){
border: 1px solid #f00;
}4、伪元素选择器：匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)
<!-- demo.html 为元素选择器 -->
<html>
<head>
<title></title>
</head>
<body>
<p>
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
</p>
<span>
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
</span>
</body>
</html>
/*demo.css*/
p{
width: 200px;
border: 1px solid #bfb;
margin: 10% auto;
text-indent: 5px;
}
span{
/*float: right;*/
/*display: inline-block;*/
position: absolute;
top: 300px;
left: 500px;
}
p:first-letter{
font-size: 20pt;
color: #fbb;
}
p:first-line{
font-style: italic;
}
span:first-line{
font-style: italic;
background-color: #ffb;
}
p::selection{
background-color: #bbf;
color: #fbf;
}以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。
今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。
Atas ialah kandungan terperinci CSS3复杂选择器的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3
Apr 28, 2022 pm 04:32 PM
Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".
Adakah kesan animasi css3 mempunyai ubah bentuk?
Apr 28, 2022 pm 02:20 PM
Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
