美文网首页
CSS3选择器

CSS3选择器

作者: 秋枫残红 | 来源:发表于2017-09-15 21:02 被阅读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知识概要总结之选择器篇(二)

    是的,从这里开始我们就开始学习CSS3的选择器了,学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些? 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些? 颜色:新增RGBA,HSL...

  • 初级了解css3伪类选择器

    在 CSS3 中,选择器是一种模式,用于选择需要添加样式的元素。 先来了解一下css3选择器的分类 css3选择器...

  • CSS3笔记(一)选择器

    回顾css3之前的选择器 css3选择器 1、属性选择器 2、结构 伪类选择器 注意点 : 选择是分类型,排序是不...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • css选择器

    css1,2选择器 css3选择器

  • 移动web界面样式

    CSS3 CSS3在移动web开发中使用的特性包括:增强的选择器阴影强大的背景设置圆角边框 选择器 属性选择器完全...

  • CSS 3 选择器

    CSS3追加的选择器 在CSS3中,追加了三个属性选择器分别为 这样使得选择器有了通配符的概念。 结构性伪类选择器...

  • css3选择器

    CSS3选择器分类 层次选择器,常用的选择器| 选择器|类型|说明 ||--|--|--|--||E F |后代...

  • CSS3属性选择器

    CSS3中属性选着器增加了3个 结构性伪类选择器 CSS3结构性伪类选择器 CSS3选择器详解二 第二部分小节 、...

网友评论

      本文标题:CSS3选择器

      本文链接:https://www.haomeiwen.com/subject/qafiqxtx.html