Rumah hujung hadapan web tutorial css CSS的Selector使用详解

CSS的Selector使用详解

Mar 21, 2018 pm 05:03 PM
css selector

这次给大家带来CSS的Selector使用详解,使用CSS的Selector注意事项有哪些,下面就是实战案例,一起来看一下。

CSS1 中定义的选择器

类型选择器

用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下:

body {
    /*对 body 元素定义样式*/
}
body,p {
    /*同时选择多种标签元素*/
}
Salin selepas log masuk

ID 选择器

用于选择指定 ID 的 html 元素,常见使用方法如下:

<p id="nav">
    
</p>
<style>
    #nav {
        /*定义 ID 为 nav 的元素的样式*/
    }
</style>
Salin selepas log masuk

因为 CSS 的渲染顺序是从右往左进行渲染的,而 ID 则是全唯一的,那么就可以省略掉前面的类型选择器。

类选择器

用于选择指定类名的 html 元素,常见使用方法如下:

<p class="nav">
    
</p>
<style>
    .nav {
        /*定义 class 为 nav 的元素的样式*/
    }
</style>
Salin selepas log masuk

包含选择器

用于选择层级嵌套的元素,常见使用方法如下:

<p class="nav">
    <p class="nav-tools">
        
    </p>
</p>
<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>
<style>
    .nav .nav-tools {
        /*定义元素的父级元素 class 包含 nav,且子元素class 包含 nav-tools 的元素*/
    }
</style>
Salin selepas log masuk

需要注意的是:包含选择器不关心层级,只要后面的选择器是被包含在前一个元素中的即可。如上述例子,两个 nav-tools 都会被选择器选中!

伪类选择器

:link——链接伪类选择器

用于定义链接未被访问状态时的样式,常见使用方法如下:

<p class="nav">
    <p class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </p>
</p>
<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>
Salin selepas log masuk

:visited——链接伪类选择器

用于定义已被访问的链接样式,常见使用方法如下:

<style>
    a:visited {
        text-decoration: none;
        color: red;
    }
</style>
Salin selepas log masuk

:active——用户操作伪类选择器

用于定义被激活的元素样式,常见使用方法如下:

<style>
    a:active {
        text-decoration: none;
        color: green;
    }
</style>
Salin selepas log masuk

:hover——用户操作伪类选择器

用于定义鼠标经过元素是的样式,常见使用方法如下:

<style>
    a:hover {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>
Salin selepas log masuk

:focus——用户操作伪类选择器

用于定义获得焦点的元素样式,常见使用方法如下:

<style>
    input:focus {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>
Salin selepas log masuk

::first-line

用于定义元素内第一行文本的样式,常见使用方法如下:

<p class="doc">
    <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</p>
<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>
Salin selepas log masuk

::=first-letter

用于定义元素内第一个字符的样式,常见使用方式如下:

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-letter {
        font-size: 2em;
        color: red;
    }
</style>
Salin selepas log masuk

CSS2中定义的选择器

*——通配选择器

用于定义 DOM 中所有元素的共同样式,常见使用方法如下:

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>
<style>
    .nav * {
        margin: 0;
    }
</style>
Salin selepas log masuk

如果要重置默认样式的话,不建议使用通配选择器

[attribute]——属性选择器

用于定义元素包含属性为attribute的元素的样式,常见使用方法如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active>Menu</li>
                <li>Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    li[active] {
        color: red;
    }
</style>
Salin selepas log masuk

[attribute=“value”]——属性选择器

用于定义元素属性的值为指定的值样式,常见使用方法如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="active">Menu</li>
                <li active>Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    li[active="active"] {
        color: red;
    }
</style>
Salin selepas log masuk

[attribute~="value"]——属性选择器

用于定义属性中包含指定值且以空格来分隔属性值得元素,常见使用方法如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    li[active~="active"] {
        color: red;
    }
</style>
Salin selepas log masuk

如上所示,只有第一个 li 的前景色会被定义为红色!

[attribute|="value"]——属性选择器

用于定义属性中包含指定值且以连字符(-)链接的属性值,常见使用方法如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    li[active|="active"] {
        color: red;
    }
</style>
Salin selepas log masuk

如上所示:只有第二个 li 的前景色会被定义为红色!

:first-child——结构伪类选择器

用于定义元素的第一个元素的样式,常见使用方式如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    li:first-child {
        color: red;
    }
</style>
Salin selepas log masuk

注意 :first-child 是作用于同级,且相同标签的第一个元素。如上所示,如果要定义第一个 li 的样式,那么久需要使用 li:first-child,而不是 ul:first-child!

:lang(en)

用于定义属性为 lang=“en” 的元素样式,常见使用方法如下:

<p>
    <p lang="en">Hello World</p>
</p>
<style>
    p:lang(en) {
        color: red;
    }
</style>
Salin selepas log masuk

::before

用于定义元素之前的内容和样式,常见使用方法如下:

<p>
    <a>World</a>
</p>
<style>
    a::before {
        content: "Hello ";
    }
</style>
Salin selepas log masuk

::after

用于定义元素之后的内容和样式,常见使用方法如下:

<p>
    <a>Hello</a>
</p>
<style>
    a::after {
        content: "World";
    }
</style>
Salin selepas log masuk

p > p

用于定义元素的第一级子元素的样式,常见方法使用如下:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>
<style>
    .nav-tools > ul {
        background-color: red;
    }
    .nav-tools > li {
        /*这个不会生效,因为 li 不是 ul 的直接子元素*/
    }
</style>
Salin selepas log masuk

h1 + p

用于定义元素相邻的元素样式,常见使用方法如下:

<p>
    <h1>CSS</h1>
    <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
</p>
<style>
    h1 + p {
        color: red;
    }
</style>
Salin selepas log masuk

CSS3 新增属性选择器

[foo^="bar"]

用于定义元素属性以 bar 开头的元素的样式

<p>
    <a href="http://www.betterde.com">Betterde Inc.</a>
    <a href="https://www.betterde.com">Betterde Inc.</a>
</p>
<style>
    a[href^="https"] {
        color:green;
    }
</style>
Salin selepas log masuk

如上所示,标记 https 链接为绿色。

[foo$="bar"]

用于定义元素属性以 bar 结尾的元素的样式

<p>
    <a href="http://www.betterde.com/logo.png">logo.png</a>
    <a href="http://www.betterde.com/style.css">style.css</a>
    <a href="http://www.betterde.com/main.js">main.js</a>
</p>
<style>
    a[href$="png"] {
        background: url(system/filetype/png.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="css"] {
        background: url(system/filetype/css.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="js"] {
        background: url(system/filetype/js.png) no-repeat left center;
        padding-left: 18px;
    }
</style>
Salin selepas log masuk

如上所示,识别超链接的所链接的文件格式,并在前面添加文件类型图标!

[foo*="bar"]

用于定义元素属性中包含 bar 的元素的样式,需要注意的是,这里是包含,也就是说无论是什么样的组合,只要属性值还有这bar 这三个连续字母的都会被选中!

<p>
    <h1 class="title big full-right"></h1>
    <h2 class="title big full-right"></h1>
    <h1 class="big-title"></h1>
</p>
<style>
    a[class*="title"] {
        color: red;
    }
</style>
Salin selepas log masuk

如上所示:p 内的三个元素都将会被渲染为红色字体!

虽然 CSS3 中任然保留 CSS2 中定义的属性选择器,但是建议使用 CSS3 的属性选择器来替代!

结构伪类选择器

:root

用于定义 html 标签元素的样式

:nth-child(n)

用于定义子元素的样式,n 表示第几个子元素。n 可以是数字,或关键字odd、even或公式。常见使用方法如下:

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>
<style>
    tr:nth-child(even) {
        background-color: red; 
    }
</style>
Salin selepas log masuk

:nth-last-child(n)

与 :nth-child(n)用法相同,只是排序方式是从后往前!

:nth-of-type(n)

用于定义相同元素的第 n 个元素的样式,常见使用方法如下:

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>
<style>
    tr:nth-of-type(even) {
        background-color: red; 
    }
</style>
Salin selepas log masuk

:nth-last-of-type(n)

与 :nth-of-type(n)用法相同,只是排序方式是从后往前!

:last-child

用于定义最后一个元素的样式,常见使用方法如下:

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>
<style>
    tr:last-child {
        background-color: red; 
    }
</style>
Salin selepas log masuk

:first-of-type

定义第一个元素相同类型元素的样式,与 :nth-of-type(1) 效果一样

:last-of-type

定义最后一个元素相同类型元素的样式,常见使用方法如下:

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>
<style>
    tr:last-of-type {
        background-color: red; 
    }
</style>
Salin selepas log masuk

:only-child

用于定义子元素只有一个且与制定元素标签相同,常见使用方法如下:

<p>
    <h1>Hello</h1>
</p>
<style>
    h1:only-child {
        /*如果 p 中还有其他任何元素,则h1不会按照该选择器中定义的样式渲染*/
    }
</style>
Salin selepas log masuk

:only-of-type

用于定义只包含一个制定的标签元素的样式,常见使用方法如下:

<p>
    <h1>Hello</h1>
</p>
<style>
    h1:only-of-type {
        /*如果 p 中还有其他任何元素,则h1不会按照该选择器中定义的样式渲染*/
    }
</style>
Salin selepas log masuk

:empty

用于定义,一个元素中没有包含任何子元素的样式,常见使用方法如下:

<p>
    
</p>
<style>
    p:empty {
        display: none;
    }
</style>
Salin selepas log masuk

CSS3 新增的其他选择器

E ~ F

用于定义兄弟元素的样式,常见使用方法如下:

<p>
    <p>Hello</p>
</p>
<p>CSS</p>
<style>
    p ~ p {
        color: red;
    }
</style>
Salin selepas log masuk

p 元素中的 p 不会被渲染为红色字体,只有跟 p 是同级的 p 才会被渲染为红色!

:not(s)

用于定义指定元素,并且过滤 s 所指定的选择器元素,常见使用方法如下:

<p>
    <p class="red">Hello</p>
    <p class="blue">World</p>
    <p>Welcome!</p>
</p>
<style>
    p:not(.red) {
        color: blue;
    }
</style>
Salin selepas log masuk

注意:s 是一个简单的结构选择器,不能使用复合选择器,该选择器只匹配第一个复合条件的元素。如上所示,最后一个 p 不会被渲染为蓝色!

:target

用于定义被访问的锚链样式,常见使用方法如下:

<p>
    <p id="text-one">
        <p>这是第一个文本段</p>
    </p>
    <p id="text-two">
        <p>这是第二个文本段</p>
    </p>
</p>
<style>
    p:target {
        color: red;
    }
</style>
Salin selepas log masuk

注意:当我们激活锚链时(url中包含 #text-one 或 #text-two),对应的 p 内的元素字体会被渲染为红色!

CSS3 UI 元素状态伪类选择器

:enabled

用于定义元素的 enabled 时的样式,常见使用方式如下:

<p>
    <input type="text">
</p>
<style>
    input:enabled {
        background: #ffff00;
    }
</style>
Salin selepas log masuk

注意:元素默认状态为 enabled

:disabled

用于定义元素处于禁用状态时的样式,常见使用方法如下:

<p>
    <input type="text" disabled="disabled"/>
</p>
<style>
    input:disabled {
        background: #dddddd;
    }
</style>
Salin selepas log masuk

:checked

用于定义元素被选中时的样式,常见使用方式如下:

<p>
    <form>
        <input type="checkbox" />
    </form>
</p>
<style>
    input:checked {
        color: green;
    }
</style>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

你不知道的冷门CSS属性

href和src、link和@import有什么区别

css的绝对定位怎么兼容所有的分辨率

Atas ialah kandungan terperinci CSS的Selector使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah maksud pemegang tempat dalam vue Apakah maksud pemegang tempat dalam vue May 07, 2024 am 09:57 AM

Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.

Apakah maksud span dalam js Apakah maksud span dalam js May 06, 2024 am 11:42 AM

Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.

Apakah maksud rem dalam js Apakah maksud rem dalam js May 06, 2024 am 11:30 AM

REM dalam CSS ialah unit relatif berbanding saiz fon elemen akar (html). Ia mempunyai ciri-ciri berikut: relatif kepada saiz fon elemen akar, tidak dipengaruhi oleh elemen induk. Apabila saiz fon elemen akar berubah, elemen menggunakan REM akan melaraskan dengan sewajarnya. Boleh digunakan dengan mana-mana harta CSS. Kelebihan menggunakan REM termasuk: Responsif: Pastikan teks boleh dibaca pada peranti dan saiz skrin yang berbeza. Ketekalan: Pastikan saiz fon adalah konsisten di seluruh tapak web anda. Kebolehskalaan: Tukar saiz fon global dengan mudah dengan melaraskan saiz fon elemen akar.

Bagaimana untuk memperkenalkan imej ke dalam vue Bagaimana untuk memperkenalkan imej ke dalam vue May 02, 2024 pm 10:48 PM

Terdapat lima cara untuk memperkenalkan imej dalam Vue: melalui URL, memerlukan fungsi, fail statik, arahan v-bind dan imej latar belakang CSS. Imej dinamik boleh dikendalikan dalam sifat pengiraan atau pendengar Vue, dan alatan yang digabungkan boleh digunakan untuk mengoptimumkan pemuatan imej. Pastikan laluan adalah betul jika tidak ralat memuatkan akan muncul.

Apakah fungsi tag span Apakah fungsi tag span Apr 30, 2024 pm 01:54 PM

Teg SPAN ialah teg HTML sebaris yang digunakan untuk menyerlahkan teks dengan menggunakan atribut seperti gaya, warna dan saiz fon Ini termasuk menekankan teks, mengumpulkan teks, menambah kesan tuding dan mengemas kini kandungan secara dinamik. Ia digunakan dengan meletakkan teg <span> dan </span> di sekeliling teks yang ingin anda tekankan, dan dimanipulasi melalui penggayaan CSS atau JavaScript. Faedah teg SPAN termasuk kejelasan semantik, fleksibiliti penggayaan dan kemudahan penyelenggaraan.

Bagaimana untuk membungkus prompt dalam js Bagaimana untuk membungkus prompt dalam js May 01, 2024 am 06:24 AM

Apabila menggunakan kaedah prompt() dalam JavaScript, anda boleh mencapai pemisah baris melalui tiga kaedah berikut: 1. Masukkan aksara "\n" pada kedudukan yang anda ingin putuskan baris 2. Gunakan aksara pemisah baris dalam teks gesaan; 3. Gunakan gaya "putih" -ruang: pra" CSS memaksa pemisah baris.

Dalam bahasa apakah pemalam penyemak imbas ditulis? Dalam bahasa apakah pemalam penyemak imbas ditulis? May 08, 2024 pm 09:36 PM

Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java

Apakah nod dalam js Apakah nod dalam js May 07, 2024 pm 09:06 PM

Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.

See all articles