Wscats/articles

CSS3选择器

Wscats opened this issue · 20 comments

Wscats commented

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

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 commented

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

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

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

选择每个<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 commented

在每个<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 commented

在每个<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 commented

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

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

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

设置非<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 commented

指定空的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 commented

突出显示活动的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 commented

选择属于其父元素的首个子元素的每个<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 commented

规定属于其父元素的第二个子元素的每个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 commented

规定属于其父元素的第六个子元素的每个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 commented

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 commented

规定属于其父元素的第二个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 commented

匹配属于父元素中唯一子元素的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 commented

为所有被选中的 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 commented

选择<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 commented

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 commented

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

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