CSS 学习培训笔记之CSS Selector

日期:2020-12-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

CSS1 中界定的挑选器

种类挑选器

用于挑选特定种类的元素(实际上他便是 html 标识挑选器),普遍用法以下:

body {
    /*对 body 元素界定款式*/
}

body,div {
    /*另外挑选多种多样标识元素*/
}

ID 挑选器

用于挑选特定 ID 的 html 元素,普遍应用方式以下:

<div id="nav">
    
</div>

<style>
    #nav {
        /*界定 ID 为 nav 的元素的款式*/
    }
</style>

由于 CSS 的3D渲染次序是从右往左开展3D渲染的,而 ID 则是全唯1的,那末便可以省略掉前面的种类挑选器。

类挑选器

用于挑选特定类名的 html 元素,普遍应用方式以下:

<div class="nav">
    
</div>

<style>
    .nav {
        /*界定 class 为 nav 的元素的款式*/
    }
</style>

包括挑选器

用于挑选等级嵌套循环的元素,普遍应用方式以下:

<div class="nav">
    <div class="nav-tools">
        
    </div>
</div>

<div class="nav">
    <div>
        <div class="nav-tools">
        
        </div>
    </div>
</div>

<style>
    .nav .nav-tools {
        /*界定元素的父级元素 class 包括 nav,且子元素class 包括 nav-tools 的元素*/
    }
</style>

必须留意的是:包括挑选器不关注等级,要是后边的挑选器是被包括在前1个元素中的便可。如上述事例,两个 nav-tools 都会被挑选器选定!

伪类挑选器

:link——连接伪类挑选器

用于界定连接未被浏览情况时的款式,普遍应用方式以下:

<div class="nav">
    <div class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>

:visited——连接伪类挑选器

用于界定已被浏览的连接款式,普遍应用方式以下:

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

:active——客户实际操作伪类挑选器

用于界定被激活的元素款式,普遍应用方式以下:

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

:hover——客户实际操作伪类挑选器

用于界定电脑鼠标历经元素是的款式,普遍应用方式以下:

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

:focus——客户实际操作伪类挑选器

用于界定得到聚焦点的元素款式,普遍应用方式以下:

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

::first-line

用于界定元素内第1写作本的款式,普遍应用方式以下:

<div class="doc">
    <p>堆叠款式表(英文全称:Cascading Style Sheets)是1种用来主要表现HTML(规范通用性标识語言的1个运用)或XML(规范通用性标识語言的1个非空子集)等文档款式的测算机語言。CSS不但能够静态数据地装饰网页页面,还能够相互配合各种各样脚本制作語言动态性地对网页页面各元素开展文件格式化。</p>
</div>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>

::=first-letter

用于界定元素内第1个标识符的款式,普遍应用方法以下:

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

CSS2中界定的挑选器

*——通配挑选器

用于界定 DOM 中全部元素的相互款式,普遍应用方式以下:

<div class="nav">
    <div>
        <div class="nav-tools">
        
        </div>
    </div>
</div>

<style>
    .nav * {
        margin: 0;
    }
</style>

假如要重设默认设置款式的话,不提议应用通配挑选器

[attribute]——特性挑选器

用于界定元素包括特性为attribute的元素的款式,普遍应用方式以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active>Menu</li>
                <li>Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active] {
        color: red;
    }
</style>

[attribute=“value”]——特性挑选器

用于界定元素特性的值为特定的值款式,普遍应用方式以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="active">Menu</li>
                <li active>Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active="active"] {
        color: red;
    }
</style>

[attribute~="value"]——特性挑选器

用于界定特性中包括特定值且以空格来隔开特性值得元素,普遍应用方式以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active~="active"] {
        color: red;
    }
</style>

如上所示,仅有第1个 li 的市场前景色会被界定为鲜红色!

[attribute|="value"]——特性挑选器

用于界定特性中包括特定值且以连标识符(-)连接的特性值,普遍应用方式以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active|="active"] {
        color: red;
    }
</style>

如上所示:仅有第2个 li 的市场前景色会被界定为鲜红色!

:first-child——构造伪类挑选器

用于界定元素的第1个元素的款式,普遍应用方法以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

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

留意 :first-child 是功效于同级,且同样标识的第1个元素。如上所示,假如要界定第1个 li 的款式,那末久必须应用 li:first-child,而并不是 ul:first-child!

:lang(en)

用于界定特性为 lang=“en” 的元素款式,普遍应用方式以下:

<div>
    <p lang="en">Hello World</p>
</div>

<style>
    p:lang(en) {
        color: red;
    }
</style>

::before

用于界定元素以前的內容和款式,普遍应用方式以下:

<div>
    <a>World</a>
</div>

<style>
    a::before {
        content: "Hello ";
    }
</style>

::after

用于界定元素以后的內容和款式,普遍应用方式以下:

<div>
    <a>Hello</a>
</div>

<style>
    a::after {
        content: "World";
    }
</style>

div > p

用于界定元素的第1级子元素的款式,普遍方式应用以下:

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    .nav-tools > ul {
        background-color: red;
    }
    .nav-tools > li {
        /*这个不容易起效,由于 li 并不是 ul 的立即子元素*/
    }
</style>

h1 + p

用于界定元素邻近的元素款式,普遍应用方式以下:

<div>
    <h1>CSS</h1>
    <p>堆叠款式表(英文全称:Cascading Style Sheets)是1种用来主要表现HTML(规范通用性标识語言的1个运用)或XML(规范通用性标识語言的1个非空子集)等文档款式的测算机語言。</p>
</div>

<style>
    h1 + p {
        color: red;
    }
</style>

CSS3 新增特性挑选器

[foo^="bar"]

用于界定元素特性以 bar 开始的元素的款式

<div>
    <a href="http://www.betterde.com">Betterde Inc.</a>
    <a href="https://www.betterde.com">Betterde Inc.</a>
</div>

<style>
    a[href^="https"] {
        color:green;
    }
</style>

如上所示,标识 https 连接为翠绿色。

[foo$="bar"]

用于界定元素特性以 bar 末尾的元素的款式

<div>
    <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>
</div>

<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>

如上所示,鉴别超连接的所连接的文档文件格式,并在前面加上文档种类标志!

[foo*="bar"]

用于界定元素特性中包括 bar 的元素的款式,必须留意的是,这里是包括,也便是说不管是甚么样的组成,要是特性值也有这bar 这3个持续字母的都会被选定!

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

如上所示:div 内的3个元素都可能被3D渲染为鲜红色字体样式!

尽管 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>

: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>

:nth-last-of-type(n)

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

:last-child

用于界定最终1个元素的款式,普遍应用方式以下:

<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>

:first-of-type

界定第1个元素同样种类元素的款式,与 :nth-of-type(1) 实际效果1样

:last-of-type

界定最终1个元素同样种类元素的款式,普遍应用方式以下:

<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>

:only-child

用于界定子元素仅有1个且与制订元素标识同样,普遍应用方式以下:

<div>
    <h1>Hello</h1>
</div>

<style>
    h1:only-child {
        /*假如 div 中也有别的任何元素,则h1不容易依照该挑选器中界定的款式3D渲染*/
    }
</style>

:only-of-type

用于界定只包括1个制订的标识元素的款式,普遍应用方式以下:

<div>
    <h1>Hello</h1>
</div>

<style>
    h1:only-of-type {
        /*假如 div 中也有别的任何元素,则h1不容易依照该挑选器中界定的款式3D渲染*/
    }
</style>

:empty

用于界定,1个元素中沒有包括任何子元素的款式,普遍应用方式以下:

<div>
    
</div>

<style>
    div:empty {
        display: none;
    }
</style>

CSS3 新增的别的挑选器

E ~ F

用于界定弟兄元素的款式,普遍应用方式以下:

<div>
    <p>Hello</p>
</div>
<p>CSS</p>

<style>
    div ~ p {
        color: red;
    }
</style>

div 元素中的 p 不容易被3D渲染为鲜红色字体样式,仅有跟 div 是同级的 p 才会被3D渲染为鲜红色!

:not(s)

用于界定特定元素,而且过虑 s 所特定的挑选器元素,普遍应用方式以下:

<div>
    <p class="red">Hello</p>
    <p class="blue">World</p>
    <p>Welcome!</p>
</div>

<style>
    p:not(.red) {
        color: blue;
    }
</style>

留意:s 是1个简易的构造挑选器,不可以应用复合型挑选器,该挑选器只配对第1个复合型标准的元素。如上所示,最终1个 p 不容易被3D渲染为蓝色!

:target

用于界定被浏览的锚链款式,普遍应用方式以下:

<div>
    <div id="text-one">
        <p>这是第1个文字段</p>
    </div>
    <div id="text-two">
        <p>这是第2个文字段</p>
    </div>
</div>

<style>
    div:target {
        color: red;
    }
</style>

留意:当大家激活锚链时(url中包括 #text-one 或 #text-two),对应的 div 内的元素字体样式会被3D渲染为鲜红色!

CSS3 UI 元素情况伪类挑选器

:enabled

用于界定元素的 enabled 时的款式,普遍应用方法以下:

<div>
    <input type="text">
</div>

<style>
    input:enabled {
        background: #ffff00;
    }
</style>

留意:元素默认设置情况为 enabled

:disabled

用于界定元素处在禁用情况时的款式,普遍应用方式以下:

<div>
    <input type="text" disabled="disabled"/>
</div>

<style>
    input:disabled {
        background: #dddddd;
    }
</style>

:checked

用于界定元素被选定时的款式,普遍应用方法以下:

<div>
    <form>
        <input type="checkbox" />
    </form>
</div>

<style>
    input:checked {
        color: green;
    }
</style>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。