Skip to content

CSS3选择器 #38

New issue
New issue
Closed
Closed
CSS3选择器#38
Labels
notes
@Wscats

Description

@Wscats
Wscats
opened on Jul 6, 2016 · edited by Wscats
Owner

0.[attribute=value]
为name等于css的元素设置样式
image

<body>
    <p name="css">Wsscat!</p>
    <p name="css-ab">Asw!</p>
    <p name="css -ab">Asw!</p>
    <p name="css-cd">cat!</p>
    <p name="cd-css">me!</p>
    <p name="em">css!</p>
</body>
<style>
    [name=css] {
        background: #666666;
    }
</style>

1.[attribute|=value]
image
选择attribute属性值以"value"开头的元素，并设置其样式：
[attribute|=value]选择器用于选取带有以指定值开头的属性值的元素。
注意的是，该值必须是整个单词，比如 name="css"，或者后面跟着连字符，比如 name="css-ab"。

<body>
    <p name="css">Hello!</p>
    <p name="css-ab">Hi!</p>
    <p name="css-cd">Ello!</p>
    <p name="me">Hi!</p>
    <p name="em">nihao!</p>
</body>
<style>
    [name|=css] {
        background: #666666;
    }

    [name|=me] {
        background: #999999;
    }
</style>

2.[attribute^=value]
image
[attribute^=value]选择器匹配属性值以指定值开头的每个元素。
设置name属性值以"css"开头的所有 div元素的背景色：

<body>
    <p name="css">Hello!</p>
    <div name="css-ab">Hi!</div>
    <div name="ab-css">Hi!</div>
    <p name="css-cd">Ello!</p>
    <p name="me">Hi!</p>
    <p name="em">nihao!</p>
</body>
<style>
    div[name^=css] {
        background: #666666;
    }
</style>

3.[attribute*=value]
image
设置name属性值包含"css"的所有p元素的背景色：
[attribute*=value]选择器匹配属性值包含指定值的每个元素。

<body>
    <p name="css">Hello!</p>
    <p name="css-ab">Hi!</p>
    <p name="css-cd">Ello!</p>
    <p name="cd-css">Hi!</p>
    <p name="em">nihao!</p>
</body>
<style>
    [name*=css] {
        background: #666666;
    }
</style>

4.[attribute$=value]
image
设置name属性值以"css"结尾的所有p元素的背景色：
注意“css”这个既属于开头也属于结尾，所以选择器也是可以选择到。
[attribute$=value]选择器匹配属性值以指定值结尾的每个元素。

<body>
    <p name="css">Wsscat!</p>
    <p name="css-ab">Asw!</p>
    <p name="css-cd">cat!</p>
    <p name="cd-css">me!</p>
    <p name="em">css!</p>
</body>
<style>
    [name$=css] {
        background: #666666;
    }
</style>

5.[attribute~=value]
选择name属性包含单词"css"的元素，并设置其样式：
注意是css单词，所以css-ab这样不算
image

<body>
    <p name="css">Wsscat!</p>
    <p name="css-ab">Asw!</p>
    <p name="css -ab">Asw!</p>
    <p name="css-cd">cat!</p>
    <p name="cd-css">me!</p>
    <p name="em">css!</p>
</body>
<style>
    [name~=css] {
        background: #666666;
    }
</style>

Activity

Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

image
下面分别是
选择未访问、已访问、悬浮和活动链接
已访问就是历史记录中已经有你这个记录就会显示已访问，清空历史记录即可变成选择未访问
活动链接就是点击的那一下动作代表着你活动了

<style>
    a:link {
        color: blue;
    }

    a:visited {
        color: black;
    }

    a:hover {
        color: red;
    }

    a:active {
        color: yellow;
    }
</style>
</head>

<body>
    <p>链接：<a href="http://www.w3school.com.cn">w3school.com.cn</a></p>
</body>

image

Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

选择每个<p>元素的首行，并为其设置样式：

<style>
    p:first-line {
        background-color: blue;
    }
</style>

<body>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

选择每个<p>元素的首字母，并为其设置样式：

<style>
    p:first-line {
        background-color: blue;
    }

    p:first-letter {
        font-size: 200%;
        color: black;
        background-color: white;
    }
</style>

<body>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

在每个<p>元素的内容之前插入新内容：

<style>
    /*p:first-line {
            background-color: blue;
        }

        p:first-letter {
            font-size: 200%;
            color: black;
            background-color: white;
        }*/

    p:before {
        content: "Wsscat：";
    }
</style>

<body>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

在每个<p>元素的内容之后插入新内容：

<style>
    /*p:first-line {
            background-color: blue;
        }

        p:first-letter {
            font-size: 200%;
            color: black;
            background-color: white;
        }*/

    p:before {
        content: "台词：";
    }

    p:after {
        content: "- 台词";
    }
</style>

<body>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

设置HTML文档的背景色：
也就是html标签设置背景色
image

<style>
    :root {
        background: #ff2222;
    }
</style>

<body>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

设置非<p>元素的所有元素的背景色：
:not(selector)选择器匹配非指定元素/选择器的每个元素。

<style>
    body *:not(p) {
        background-color: #666666;
    }
</style>

<body>
    <h1>wsscat</h1>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

指定空的p元素的背景色：
:empty 选择器匹配没有子元素（包括文本节点）的每个元素。

<style>
    body *:not(p) {
        background-color: #666666;
    }

    p:empty {
        width: 100px;
        height: 20px;
        background: #666666;
    }
</style>

<body>
    <h1>wsscat</h1>
    <p></p>
    <p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
    </p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

突出显示活动的HTML锚：
跳转对应的锚点之后触发的样式

<style>
    :target {
        border: 2px solid #D4D4D4;
        background-color: #e5eecc;
    }
</style>
</head>

<body>
    <h1>这是标题</h1>
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>
    <p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式：
注意第一个p的父元素是body,第二个p的父元素也是body,而第三个p的父元素是div,所以只有第一个和第三个样式会发生改变

<style>
    p:first-child {
        background-color: yellow;
    }
</style>
</head>

<body>

    <p>这个段落是其父元素（body）的首个子元素。</p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>

    <div>
        <p>这个段落是其父元素（div）的首个子元素。</p>
        <p>这个段落不是其父元素的首个子元素。</p>
    </div>

    <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明
        <!DOCTYPE>。</p>

</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

规定属于其父元素的第二个子元素的每个p的背景色：
就是满足p标签并且是所在父元素第二个子元素改变样式

<style>
    p:nth-child(2) {
        background: #ff0000;
    }
</style>
</head>

<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>

我们做以下的改变
就可以看到h1既满足是所在父元素的第二个子元素，并且是h1标签

<style>
    h1:nth-child(2) {
        background: #ff0000;
    }
</style>
</head>

<body>
    <b>wsscat</b>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>

image

Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

规定属于其父元素的第六个子元素的每个h1元素，从最后一个子元素开始计数：
:nth-last-child(n)选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

<style>
    h1:nth-last-child(6) {
        background: #ff0000;
    }
</style>
</head>

<body>
    <b>wsscat</b>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>

image

Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
image

<style>
    p:nth-last-child(odd) {
        background: #ff0000;
    }
</style>
</head>

<body>
    <b>wsscat</b>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

规定属于其父元素的第二个p元素的每个p：
:nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

<style>
    b:nth-of-type(1) {
        background: #ff0000;
    }
</style>
</head>

<body>
    <b>wsscat</b>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

匹配属于父元素中唯一子元素的p元素:
例如这里第一个div中有唯一一个p元素能匹配
第二个div有span和p标签，因为不是唯一的p元素，所以匹配不到

<style>
    p:only-child {
        background: #ff0000;
    }
</style>
</head>

<body>
    <div>
        <p>This is a paragraph.</p>
    </div>
    <div><span>This is a span.</span>
        <p>This is a paragraph.</p>
    </div>
    <p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :only-child selector.</p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

为所有被选中的 input 元素设置背景色和宽度等样式：

<style>
    input:checked {
        background-color: #ff0000;
        width: 50px;
    }
</style>
</head>

<body>
    <form action="">
        <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
        <input type="radio" value="female" name="gender" /> Female<br>
        <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
        <input type="checkbox" value="Car" /> I have a car
    </form>
    <p><b>注释：</b>本例只在 Opera 中正确地工作！</p>
</body>
Wscats

Wscats commented on Jul 6, 2016

@Wscats
Wscats
on Jul 6, 2016 · edited by Wscats
OwnerAuthor

选择<div>元素之后紧跟的每个<p>元素，并设置其背景色：
就是紧跟着后面的这对

元素的样式更改
选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

<style>
    div+p {
        background-color: yellow;
    }
</style>
</head>

<body>
    <h1>欢迎来到我到的主页</h1>
    <div>
        <p>我是唐老鸭。</p>
        <p>我住在 Duckburg。</p>
    </div>
    <p>我最好的朋友是米老鼠。</p>
    <p>我的样式不会改变。</p>
</body>
Wscats

Wscats commented on Jul 7, 2016

@Wscats
Wscats
on Jul 7, 2016 · edited by Wscats
OwnerAuthor

E:enabled{sRules}
匹配用户界面上处于可用状态的元素E。

<style>
    input[type=text]:enabled {
        background-color: yellow;
    }

    input[type=text]:disabled {
        background-color: purple;
    }
</style>
</head>

<body>
    <form>
        <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
        <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br />
        <input type="text" id="text1" disabled />
    </form>
    <script>
        function radio_onchange() {
            var radio = document.getElementById("radio1");
            var text = document.getElementById("text1");
            if (radio.checked)
                text.disabled = "";
            else {
                text.value = "";
                text.disabled = "disabled";
            }
        }
    </script>
</body>
Wscats

Wscats commented on Jul 7, 2016

@Wscats
Wscats
on Jul 7, 2016 · edited by Wscats
OwnerAuthor

:read-only如果 input 元素设置了 "readonly" 属性，设置输入框样式为gray
:read-write如果 input 元素不是只读，即没有 "readonly" 属性，设置输入框样式为greenyellow:

  • E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
  • E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。
<style>
    input[type="text"]:read-only {
        background-color: gray;
    }

    input[type="text"]:read-write {
        background-color: greenyellow;
    }

    input[type="text"]:-moz-read-only {
        background-color: gray;
    }

    input[type="text"]:-moz-read-write {
        background-color: greenyellow;
    }
</style>
</head>

<body>
    <form>
        <p>名前：<input type="text" name="name" />
            <p>地址：<input type="text" name="address" value="江苏省常州市" readonly="readonly" /></p>
    </form>

</body>
Wscats

Wscats commented on Jul 7, 2016

@Wscats
Wscats
on Jul 7, 2016 · edited by Wscats
OwnerAuthor

:checked被选中的时候就更改样式

<style type="text/css">
    input[type="checkbox"]:checked {
        outline: 2px solid yellow;
    }

    input[type="checkbox"]:-moz-checked {
        outline: 2px solid blue;
    }
</style>

<body>
    <form>
        兴趣:<input type="checkbox">阅读</input>
        <input type="checkbox">旅游</input>
        <input type="checkbox">看电影</input>
        <input type="checkbox">上网</input>
    </form>
</body>
Wscats
added
notes
on Jul 7, 2016
Wscats
changed the title [-]移动前端开发CSS3[/-] [+]CSS3选择器[/+] on Dec 11, 2016
fripig
mentioned this on Dec 12, 2016
jawil
mentioned this on Mar 30, 2017
Wscats
closed this as completedon Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    notes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Wscats

        Issue actions
          CSS3选择器 · Issue #38 · Wscats/articles