CSS3选择器

2017-09-15 本文已影响0人秋枫残红

基础

属性选择器(CSS2)

[attr=val]
attr代表属性值，val代表变量值

<style>
        [id="test1"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>

属性选择器的扩展(CSS3)

在css3中增加了三个属性选择器，使属性选择器有了通配符的概念。
- [attr^=val]
- [attr$=val]
- [attr*=val]
^代表属性值以某字符串作为开头

<style>
        [id^="te"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>

$代表属性值以某字符串作为结尾

<style>
        [id$="st"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>

*代表属性值内包含某字符串

<style>
        [id*="es"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>

伪类选择器

在css中，我们知道我们可以通过类选择器定义不同的样式如p.yellow={background-color:yellow},此处.yellow为类选择器，yellow为类名，在伪类选择器中我们使用css中预先定义好的类名对元素样式进行修改，最常用的为对a元素不同状态的修改。

  <style>
        a:link{
            color: #FF0000;
            text-decoration: none;
        }
        /*鼠标点击之前*/
        a:hover{
            color: #00FF00;
            text-decoration: none;
        }
        /*鼠标挪动到链接上*/
        a:visited{
            color: #FF00FF;
            text-decoration: underline;
        }
        /*鼠标点击之后*/
        a:active{
            color:#0000ff;
            text-decoration: underline;
        }
        /*鼠标点击之时*/
    </style>

伪元素选择器

所谓伪元素选择器并不是要对真正的元素使用样式，而是对css中已经定义好的伪元素使用样式
first-line用于对某个元素中的第一行文字使用样式

<style>
        p:first-line{
            color: #00ccff;
        }
    </style>
<p>云泥岂知鲲鹏志，<br>扶摇直上九万里</p>

first-letter用于对某个元素中的第一个文字或第一个字母设置样式

<style>
        p:first-letter{
            color: #00ccff;
        }
    </style>
<p>云泥岂知鲲鹏志，<br>扶摇直上九万里</p>

before用于在某个元素之前插入一些元素

p:before{
            content: '待到秋来九月八，';
            color: #00ccff;
        }
/*插入文字*/
p:before{
            content: url(1.png);
            color: #00ccff;
        }
/*插入图片*/

after伪元素选择器
- 无fuck说

结构性伪类选择器

结构性伪类选择器最主要的的特征是允许开发者根据文档的结构对元素进行操作。

root,not,empty,target

root选择器
- root选择器将样式绑定到页面的根元素，所谓根元素元素，就是指包着整个页面的HTML元素

:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}

在使用body元素与root元素指定元素背景时，根据不同的显示条件，显示范围会有所变化，如上面这个示例，在删除root选择器后整个页面都将变为绿色
not选择器，如果你想对某个元素设置样式，却不想对他的某个子元素设置，可以使用not选择器。

<style>
        #test *:not(h1){
            background-color: yellow;
        }
    </style>

empty选择器用于元素内容为空时指定样式，换行符与空格符被认为元素内有内容

div:empty{
            height: 100px;
            width: 100px;
            background-color: yellow;
        }

target选择器是对页面中的target元素（当他们的id被当做超链接来使用时）指定样式的，当用户点击了超链接对指定元素进行样式修改。

<style type="text/css">
:target{
    background-color: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> | 
<a href="#text2">示例文字2</a> | 
<a href="#text3">示例文字3</a> | 
<a href="#text4">示例文字4</a> | 
<a href="#text5">示例文字5</a> 
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此处略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此处略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此处略去</p>
</body>

first-child、last-child、nth-child、nth-last-child

first-child与last-child选择器可以选择当前元素第一次和最后一次出现的地方(一般用于列表表格)

li:first-child{
            background-color: yellow;
        }
        li:last-child{
            background-color: black;
        }

nth-child和nth-last-child选择器是之前俩个的扩展，分别可加入参数表示序号对元素进行操作，nth-last-child表示倒序。

<style>
        li:nth-child(3){
            background-color: yellow;
        }
    </style>

<style>
        li:nth-last-child(2){
            background-color: yellow;
        }
    </style>

<style>
        ul li:nth-child(even){
            background-color: yellow;
        }
    </style>
所有偶数序列的元素

<style>
        ul li:nth-child(odd){
            background-color: yellow;
        }
    </style>
所有奇数序列的元素

nth-child计算序号的方法是取当前元素的父元素所有的子元素进行排序，因此很多时候会带来一些不可预知的问题

nth-of-type与nth-last-of-type

由于上述问题的存在，css3新增了这两个选择器解决问题，nth-of-type可以只匹配相同类型的元素进行选取。

<style type="text/css">
        h2:nth-of-type(odd){
        background-color:yellow;
}
</style>

循环使用样式

我们可以采用nth-child与简单表达式的方法对样式进行循环

    <style>
        li:nth-child(3n){
            background-color: yellow;
        }
        li:nth-child(3n+1){
            background-color: red;
        }
        li:nth-child(3n+2){
            background-color: green;
        }
    </style>

UI元素状态伪类选择器

UI元素状态伪类选择器的主要特征是只有在元素处于某种状态时样式表才起作用，默认情况下没有作用
在css3中共有11种UI元素状态伪类选择器
E:hover、E:active、E:focus、E：enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E::selection.

E:hover、E:active、E:focus

E:hover选择器用于鼠标挪动指定元素上时指定样式
E:active选择器用于指定元素被激活时
E:focus用于指定元素获得焦点时，主要用于表单

E：enabled、E:disabled

E:enabled用于元素可用时的样式
E:disabled用于元素不可用时的样式（主要用于表单）

<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>
<style>
input[type="text"]:enabled{
    background-color:yellow; 
}
input[type="text"]:disabled{
    background-color:purple;
}
</style>
<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>

E:read-only、E:read-write

E:read-only:当元素处于只读状态时
E:read-write:当元素处于非只读状态时

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

E:checked、E:default、E:indeterminate、

这三个选择器主要用于radio和CheckBox
E:checked用于指定单选框（或复选框）被选定时的样式
E:default用于指定页面初始化时就被指定默认选取的元素，值得注意的时该样式即使是后来选取状态被取消，也依然有效。
E:indeterminate用于对元素指定样式，一旦单选框被选定，则样式失效

input[type="radio"]:indeterminate{
        outline: solid 1px blue;
}

该选择器各浏览器的兼容性不高

E::selection

该元素指定元素被选定时的样式

<style type="text/css">
p::selection{
    background:red;
    color:#FFF;
}
p::-moz-selection{
    background:red;
    color:#FFF;
}
input[type="text"]::selection{
    background:gray;
    color:#FFF;
}
input[type="text"]::-moz-selection{
    background:gray;
    color:#FFF;
}
td::selection{
    background:green;
    color:#FFF;
}
td::-moz-selection{
    background:green;
    color:#FFF;
}
</style>

通用兄弟元素选择器

指定某元素之后所有同级兄弟元素的样式

div ~ p {background-color:#00FF00;}

CSS3选择器

基础

属性选择器(CSS2)

属性选择器的扩展(CSS3)

伪类选择器

伪元素选择器

结构性伪类选择器

root,not,empty,target

first-child、last-child、nth-child、nth-last-child

nth-of-type与nth-last-of-type

循环使用样式

UI元素状态伪类选择器

E:hover、E:active、E:focus

E：enabled、E:disabled

E:read-only、E:read-write

E:checked、E:default、E:indeterminate、

E::selection

通用兄弟元素选择器

猜你喜欢

热点阅读