css选择器

时间  2019-11-18
标签 css 选择器 栏目 CSS 繁體版
原文   原文链接

css的选择器，对于常见的选择器，我想没必要描述。由于每天在使用，可是对于一些新的CSS3的选择器，要运用的灵活到位，就有必定的难度。
css

  • 元素选择器
  • 选择器分组
  • 通配选择器
  • 类选择器
  • ID选择器
  • 属性选择器
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 伪类
  • 伪元素

1、基本选择器

  1. 通配选择器（*）
  2. ID选择器(#ID)
  3. 元素选择器（E）
  4. 类选择器（.className）
  5. 后代选择器（E F）
  6. 选择器分组（）

1. 子元素选择器（E > F）html

子元素选择器（Child selectors）只能选择做为某元素子元素的元素。css3

若是您不但愿选择任意的后代元素，而是但愿缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。web

h1 > strong { color:red; }
<h1>This is 
　　<strong>very</strong>
　　<div>
　　　　<strong>no very</strong>
　　</div>
　　<strong>very</strong>
 good
</h1>

使用h1>strong 匹配 只能匹配上左边和右边那个strong，但中间那个不行，由于strong是h1的后代而不是其子元素。浏览器

E>F  f必须是E的子元素，才能匹配上，不能是后代元素dom

IE6不支持子元素选择器。ide

2. 相邻兄弟元素选择器（E + F）字体

相邻兄弟选择器能够选择紧接在另外一元素后的元素，并且他们具备一个相同的父元素，换句话说，EF两元素具备一个相同的父元素，并且Ｆ元素在Ｅ元素后面，并且相邻，这样咱们就可使用相邻兄弟元素选择器来选择Ｆ元素。网站

.first + li {color : red; }
<ul>   
 　　<li class="first">刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<ol>
    <li class="first">阿笠博士</li>
    <li>毛利兰</li>
    <li>柯南</li>
</ol>
<ul>
　 <li class="first">刘备</li>
　　<div>111</div>
　　<li>关羽</li>
　　<li>张飞</li>
</ul>

 

结果this

 

这句代码很明显选择了.frist后面相邻的li元素，注意了和.frist后面相邻的元素仅只有一个的

IE6不支持相邻兄弟元素选择器。

3. 通用兄弟元素选择器（E ~ F）

通用兄弟元素选择器是CSS3新增长一种选择器，这种选择器将选择某元素后面的全部兄弟元素，他们也和相邻兄弟元素相似，须要在同一个父元素之中，换句话说，E和F元素是属于同一父元素以内，而且F元素在Ｅ元素以后，那么E ~ F 选择器将选择中全部Ｅ元素后面的Ｆ元素。好比下面的代码：

.first ~ li {color : red; }

结果

选择中了.first  元素后面的全部兄弟元素li

IE6不支持这种选择器的用法

二、属性选择器

  1.  E[attr]：只使用属性名，但没有肯定任何属性值；
  2. E[attr="value"]：指定属性名，并指定了该属性的属性值；
  3. E[attr~="value"]：指定属性名，而且具备属性值，此属性值是一个词列表，而且以空格隔开，其中词列表中包含了一个value词，并且等号前面的“〜”不能不写；
  4. E[attr^="value"]：指定了属性名，而且有属性值，属性值是以value开头的；
  5. E[attr$="value"]：指定了属性名，而且有属性值，并且属性值是以value结束的；
  6. E[attr*="value"]：指定了属性名，而且有属性值，并且属值中包含了value；
  7. E[attr|="value"]：指定了属性名，而且属性值是value或者以“value-”开头的值（好比说zh-cn）;
  8. 为了演示css3属性选择器的使用方法，先搞个dom结构图
  9. <div class="demo clearfix">
    　 <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
   <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
   <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
   <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
   <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
   <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
   <a href="" class="links item" title="open the website" lang="cn">7</a>
   <a href="" class="links item" title="close the website" lang="en-zh">8</a>
   <a href="" class="links item" title="http://www.sina.com">9</a>
   <a href="" class="links item last" id="last">10</a>
</div>

    为了美观

.demo {
                width: 300px;
                border: 1px solid #ccc;
                padding: 10px;            
            }

             .demo a {
                float: left;
                display: block;
                height: 20px;
                line-height: 20px;
                width: 20px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                text-align: center;
                background: #f36;
                color: green;
                margin-right: 5px;
                text-decoration: none;
            }

最初效果以下所示：

下面就开始针对上面列出的每一个属性选择器来，具体分析其使用方法。

1、E[attr]

E[attr]属性选择器是CSS3属性选择器中最简单的一种。若是你但愿选择有某个属性的元素，而不论这个属性值是什么，你就可使用这个属性选择器，如：

			.demo a[id] {background: blue; color:yellow;font-weight:bold;}

上面代码所表示的，选择了div.demo下全部带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式，对照上面的html，咱们不难发现，只有第一个和最后一个连接使用了id属性，因此选中了这两个a元素，效果以下所示：

上面是单一属性的使用，你也可使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具备这两属性的元素都将被选中：

			.demo a[href][title] {background: yellow; color:green;}

不用我说，上面的代码你们都知道是什么意思了，他表示的是选择div.demo下的同时具备href,title两个属性的a元素，而且应用相对应的样式，以下所示：

IE6不支持这个选择器。

2、Ｅ[attr="value"]

E[attr="value"]选择器和E[attr]选择器，从字面上就能很清楚的理解出来，E[attr="value"]是指定了属性值“value”，而E[attr]只是选择了有对应的属性，并无明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。从而缩小了选择 围，更能精确选择本身须要的元素，在前面实例基础上咱们进行一下简单的修改：

			.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

和前面代码相比较，此处在id的属性基础上指定了相应的value值为“first”,这样一来咱们选中的是div.demo中的a元素，而且这个元素有一个"id="first""属性值，请看下在的效果图：

E[attr="value"]属性选择器也能够多个属性并写，进一步缩小选择范围：

			.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}

效果以下：

对于E[attr="value"]这种属性值选择器有一点须要注意：属性和属性值必须彻底匹配，特别是对于属性值是词列表的形式时，如：

			<a href="" class="links item" title="open the website">7</a>

例如上面的代码，若是你写成：

			.demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/

上面的属性选择器并不会和上在的html匹配,由于他们的属性和属性值没有彻底匹配，须要改为以下所示的代码，才能正确匹配：

			.demo a[class="links item"]{color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/

IE6浏览器不支持这种选择器。

3、E[attr~="value"]

若是你想根据属性值中的词列表的某个词来进行选择元素，那么就须要使用这种属性选择器：E[attr~="value"]，这种属性选择器是属性值是一个或多个词列表，若是是列表时，他们须要用空格隔开，只要属性值中有一个value相匹配就能够选中该元素，而咱们前面所讲的E[attr="value"]是属性值须要彻底匹配才会被选中，他们二者区别就是一个有“〜”号，一个没有“〜”号。咱们来看一个这方面的实例：

			.demo a[title~="website"]{background:orange;color:green;}

上面代码表示的是，div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择，回头看看咱们的html，不难发现全部a元素中“2，6，7，8”这四个a元素的title中都含有,因此被选中，请看效果：

若是咱们在上面的代码中，把那个“〜”号省去，你们看看他们不一样之处：

			.demo a[title="website"]{background:orange;color:green;}

这样将不会选择中任何元素，由于在全部a元素中没法找到彻底匹配的"title='website'",换句话说就没有选中任何元素，效果以下：

这个实例再次证实了E[attr="value"]和E[attr~="value"]之间的区别，和其中“〜”所取的做用，我总结了一句话：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要彻底是value时才匹配。

IE6不支持E[attr~="value"]属性选择器。

4、E[attr^="value"]

E[attr^="value"]属性选择器，指的是选择attr属性值以“value”开头的全部元素，换句话说，选择的属性其以对应的属性值是以“value”开始的，一块儿来看个实例：

			.demo a[href^="http://"]{background:orange;color:green;}
			.demo a[href^="mailto:"]{background:green;color:orange;}

上面代码表示的是选择了以href属性，而且以"http://"和"mailto:"开头的属性值的全部a元素，换过更简单一点的呢？只要a元素中的href属性值是以"http://"或"mailto:"开头的a元素都会以选中，那么下面你们请对照上面的html和下面的效果图，看看是否是那么一回事：

IE6不支持E[attr^="value"]选择器。

5、E[attr$="value"]

Ｅ[attr$="value"]属性选择器恰好与E[attr^="value"]选择器相反，E[attr$="value"]表示的是选择attr属性值以"value"结尾的全部元素，换句话说就是选择元素attr属性，而且他的属性值是以value结尾的，这个运用在给你一些特殊的连接加背景图片很方便的，好比说给pdf,png,doc等不一样文件加上不一样icon，咱们就可使用这个属性来实现，如：

			.demo a[href$="png"]{background:orange;color:green;}

上面代码表示的是，选择div.demo中元素有href属性，并以png值结尾的a元素。（正如上面所说，只不过这里使用的是改变元素的背景色），效果以下：

IE6不支持E[attr$="value"]属性选择器。

6、E[attr*="value"]

E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的全部元素。也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中，如：

			.demo a[title*="site"]{background:black;color:white;}

上面代码表示的是：选择了div.demo中a元素，而a元素的title属性中只要有"site"就符合选择条件。效果以下：

IE6不支持E[attr*="value"]选择器。

7、E[attr|="value"]

E[attr|="value"]是属性选择器中的最后一种，在说这个选择器使用以前先提醒你们attr后面的是一个竖线“｜”而不是l，当心搞错了。E[attr|="value"]被称做为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的全部元素,咱们来看个实例：

			.demo a[lang|="zh"]{background:gray;color:yellow;}

上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的全部a元素，你们能够对照前面的html代友，其中"2,3,4,6"被选中，由于他们都有一个lang属性，而且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果以下：

因此这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的，好比说你页面中有不少图片，图片文件名都是以"figure-1","figure-2"这样的方式来命名的，那么使用这种选择器选中图片就很方便了，你们能够在本地尝试一下，这种属性选择器最经常用的地方是如上面的示例用来匹配语言。

IE6不支持E[attr|="value"]选择器。

 

有关于属性选择器就上面这些内容了，属性选择器除了IE6不支持外，其余的浏览器都能支持，这样一来，若是你在你的页面上使用了属性选择器，并且你须要处理ie6兼容问题，那你就须要确保IE6用别的方法来实现或者你应该确保IE6用户将能得到一个可用的页面。七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮咱们定位不一样类型的元素，特别是表单form元素的操做，好比说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助咱们匹配不一样类型的文件，好比说你的网站上不一样的文件类型的连接须要使用不一样的icon图标，用来帮助你的网站提升用户体验，就像前面的实例，能够经过这个属性给".doc",".pdf",".png",".ppt"配置不一样的icon图标。

最后关于css3的选择器    关注一下

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程