CSS3css3属性选择器 根据属性名查找某个标签(E[attr])，代码如下<style>p {height: 30px; border: 1px solid black;}// 查找含有属性test的p标签p [test] {background: red;} </style> <body><p test="dhl">dhl</p><p test="xb">xiaobei</p> </body>查找某个属性名为固定值的某个标签(E[attr="value"])，测试代码如下：<style>p {height: 30px; border: 1px solid black;}// 查找test属性值为dhl的p标签p [test="dhl"] {background...
Css3 选择器 --属性选择器(1)E[attr] 只使用属性名，但没有确定任何属性值 E[attr="value"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的 ...
1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素 即：html2. E:nth-child(n)（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素 但不是P类型，不是红色</h1> < p>这是黑色的 注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
<div id="section1"> 示例文本1</div><div id="subsection1-1">示例文本1-1</div><div id="subsection1-2">示例文本1-2</div><div id="section2">示例文本2</div><div id="subsection2-1">示例文本2-1</div><div id="subsection2-2">示例文本2-2</div>CSS2中使用属性选择器来设置<style type=text/css>[id = section1]{ background:yellow;}</style>CSS3中的属性选择器1.[att*=val]属性值包含用val指定的字符[id*=section]{ ...
一、关系选择器1、E+F （E元素下一个满足条件的兄弟元素节点） 1 <style>2 div + p{3 background-color:red;// 第一个p元素变色 4 }5 </style>6 <body>7 <div>div</div>8 <p>1</p>9 <p>2</p> 10 <p>3</p> 11 </body> 1 <style>2 div + .demo{3 background-color:red;// 第一个p元素变色 4 }5 </style>6 <body>7 <div>div</div>8 <p class="demo">1</p>9 <p>2</...
一：css3属性选择器：img[alt]{border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{border:2px dashed #000; } css3的子字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下：img[alt^="filem"]{border:2px dashed #000; } (2)‘匹配包含内容‘的属性选择器El...
CSS选择器的作用是找出某类元素，以便我们使用style元素或者外部样式表对这类元素设置样式。基本选择器选择器含义演示样例描写叙述*选择全部元素* {border: thin black solid;padding: 4px }选择全部元素<元素类型>选取一个文档中该元素的全部实例a {border: thin black solid;padding: 4px }选择a元素.<类名>（或 *.<类名>）指定全局属性class为指定类的元素.class2 {border: thin black solid;padding: 4px }选中指定class2的全部...
:nth-child和:nth-of-type都是CSS3中的伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，本文就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。先看下面两句css：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }①对于:nth-child选择器，简单的说，选择一个元素满足以下要求：这是个段落p标签元素该元素是父标签的第二个孩子元素 ②对于:nth-of-type选择器，意味着选择一个元...
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇文章里面写，但想想如果把案例都写在那篇文章里面，对于查找来说就不是很方便，所有另开一篇来讲实例。 属性选择器[title]:选择带有title属性的元素[title=‘hello‘]:选择属性是title并且值是hello的元素[title~=‘hello‘]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=‘hello‘]...
<!doctype html>无标题文档一、新增的选择器CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）序号选择器含义实例1E[att^="val"]属性att的值以"val"开头的元素div[id^="nav"] { background:#ff0; }2E[att$="val"]属性att的值以"val"结尾的元素 3E[att*="val"]属性att的值包含"val"字符串的元素 结构伪类选择器（过滤选择器） (注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。 由于...
这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
一、CSS3新增选择器1、nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0;10 }11 .box p,.main p{12 background:red;13 color:#fff;14 margin-top...
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。一、CSS3概要 CSS（Cascading Style Sh...
上一节在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种：E[attr...