<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...
通配符选择器 通配选择器的作用就是对页面上所有的元素都生效， 页面上的所有标签都会展示出通配符选择器设定的样式。 这样的弊端就是影响网页渲染的时间。所以不推荐直接使用通配符选择器 取代写法就是 把需要统一设置的元素放在一起，通过 [分组选择器] 一次性设置。 对于初学者，不用过于在于网页打开速度以及性能问题，对于什么时候使用 通配符选择器呢？在你需要的时候直接用就可以。其实也就下面这段代...
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来： 这是最基本的样式：1 2 li{3 list-style-type: none;4 float: left;5 width: 60px;6 height: 60px;7 background-color: #979698;8 margin-left: 10px;9 text-align: center; 10 line-height: 60px; 11 border-radius: 50%; 13 ...
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇文章里面写，但想想如果把案例都写在那篇文章里面，对于查找来说就不是很方便，所有另开一篇来讲实例。属性选择器 [title]:选择带有title属性的元素[title=hello]:选择属性是title并且值是hello的元素[title~=hello]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=hello]:选择属性是t...
属性选择器[title]:选择带有title属性的元素[title=hello]:选择属性是title并且值是hello的元素[title~=hello]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=hello]:选择属性是title并且其中包含了hello的元素[title|=hello]:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符[title^=hello]:属性以hello开头的任意字符[title$=hello]:属性以hello结束的任意字符[title^=hel...