一、新增的选择器

CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）

1    E[att^="val"]    属性att的值以"val"开头的元素    div[id^="nav"] { background:#ff0} 

2    E[att$="val"]    属性att的值以"val"结尾的元素       

3    E[att*="val"]    属性att的值包含"val"字符串的元素       

结构伪类选择器（过滤选择器）

(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。

由于IE6/7/8不支持，没办法，选择合适的场合用吧。)

4    E:root    匹配文档的根元素，对于HTML文档，就是HTML元素       

5    E:nth-child(n)    匹配其父元素的第n个子元素，第一个编号为1    p:nth-child(3) { color:#f00}  

6    E:nth-last-child(n)    匹配其父元素的倒数第n个子元素，第一个编号为1    p:last-child { background:#ff0}  

7    E:nth-of-type(n)    与:nth-child()作用类似，但是仅匹配使用同种标签的元素    p:nth-of-type(2){color:red}选择父元素的第n个子元素p  

8    E:nth-last-of-type(n)    与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素       

9    E:last-child    匹配父元素的最后一个子元素，等同于:nth-last-child(1)       

10    E:first-of-type    匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)       

11    E:last-of-type    匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)       

12    E:only-child    匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)    p:only-child { background:#ff0}  

13    E:only-of-type    匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)       

14    E:empty    匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素    p:empty { background:#ff0}  

与用户界面(UI)有关的伪类(ie6 7 8不支持)    

15    E:enabled    匹配表单中激活的元素       

16    E:disabled    匹配表单中禁用的元素    input[type="text"]:disabled { background:#ddd}  

17    E:checked    匹配表单中被选中的radio（单选框）或checkbox（复选框）元素       

18    E::selection    匹配用户当前选中的元素       

级元素通用选择器

ie6不支持 

19    E ~ F    匹配任何在E元素之后的同级F元素    p ~ ul { background:#ff0}  

反选伪类

(ie6 7 8 firefox3.0以下 Opera9.0不支持)  

20    E:not(s)    匹配不符合当前选择器的任何元素    :not(p) { border:1px solid #ccc}  

:target 伪类

(ie6 7 8不支持)  

21    E:target    匹配文档中特定"id"点击后的效果       

 二、css3新增属性

一. box-shadow(阴影效果)

使用:

box-shadow: 20px 10px 0 #000

-moz-box-shadow: 20px 10px 0 #000

-webkit-box-shadow: 20px 10px 0 #000

支持:

    FF3.5, Safari 4, Chrome 3

二. border-colors(为边框设置多种颜色)

使用:

border: 10px solid #000

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

说明:

    颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555

支持:

   FF3+

三. boder-image(图片边框)

使用:

    -moz-border-image: url(exam.png) 20 20 20 20 repeat

    -webkit-border-image: url(exam.png) 20 20 20 20 repeat

说明:

(1). 20 20 20 20 --->边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果

(2). 边框图片效果(目前仅实现了两种):

   repeat --- 边框图片会平铺, 类似于背景重复

   stretch --- 边框图片会以拉伸的方式来铺满整个边框

(3). 必须将元素的边框厚度设置为非0非auto值.

支持:

    FF 3.5, Safari 4, Chrome 3

四. text-shadow(文本阴影)

使用:

    text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>]

说明:

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色当<模糊半径>未指定时, 半径值为0

(2) shadow可以是逗号分隔的列表, 如:

  text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.

支持:

    FF 3.5, Opera 10, Safari 4, Chrome 3

五.  text-overflow(文本截断)

使用:

    text-overflow: inherit | ellipsis | clip

    -o-text-overflow: inherit | ellipsis | clip

说明:

(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.

支持:

    IE6+, Safari4, Chrome3, Opera10

六. word-wrap(自动换行)

使用:

    word-wrap: normal | break-word

支持:

    IE6+, FF 3.5, Safari 4, Chrome 3

七. border-radius(圆角边框)

使用:

     -moz-border-radius: 5px

-webkit-border-radius: 5px

支持:

FF 3+, Safari 4 , Chrome 3

八.   opacity(不透明度)

使用:

    opacity: 0.5

    filter: alpha(opacity=50)/* for IE6, 7 */

    -ms-filter(opacity=50)/* for IE8 */

支持:

    all

九. box-sizing(控制盒模型的组成模式)

使用:

    box-sizing: content-box | border-box// for opera

    -moz-box-sizing: content-box | border-box

    -webkit-box-sizing: content-box | border-box

说明:

   1. content-box:

   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border

   2. border-box:

   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度

   也不会变).

支持:

    FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素缩放)

使用:

    resize:  none | both | horizontal | vertical

说明:

    1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效)

    2. 属性值说明:

    (1). none -->禁用缩放

    (2). both -->可同时缩放宽度和高度

    (3). horizontal -->仅能缩放宽度

    (4). vertical -->仅能缩放高度

支持:

    safari 4, chrome 3

十一. outline(外边框)

使用:

    outline: 边框厚度 边框样式 边框颜色

    outline-offset: 偏移值

说明:

    outline-offset需要独立写, 简写是无效的.

支持:

    FF3+, safari 4, chrome 3, opera 10

十二. background-size(指定背景图片的尺寸)

使用:

    -o-background-size: [length | percentage] {1, 2}

    -webkit-background-size: [length | percentage] {1, 2}

例如:

   -o-background-size: 50px 60px

    -webkit-background-size: 50px 60px

    这会将背景图片的宽设置了50px, 高60px.

支持:

     safari 4, chrome 3, opera 10

十三. background-origin(指定背景图片从哪里开始显示)

使用:

    -webkit-background-origin: border | padding | content

    -moz-background-origin: border | padding | content

说明:

    (1) border --> 从border区域开始显示背景

    (2) padding --> 从padding区域开始显示背景

    (3) content --> 从content区域开始显示背景

注意:

    1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,

会无效.

支持:

     safari 4, chrome 3, FF 3+        

十四. background-clip(指定背景图片从什么位置开始裁切)

使用:

    -webkit-background-origin: border-box | padding-box | content-box | no-clip

说明:

    (1) border-box --> 从border区域向外裁剪背景

    (2) padding-box --> 从padding区域向外裁剪背景

    (3) content-box --> 从content区域向外裁剪背景

    (4) no-clip -->不裁切背景.

注意:

    1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,

会无效.

支持:

     safari 4, chrome 3

十五.  background(为一个元素指定多个背景)

使用:

    background:  [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

例子:

    background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom

支持:

     safari 4, chrome 3

十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)

使用:

    hsl: ( <length> || <percentage> || <percentage>)

说明:

    (1) length: h(色调),  0(或360)表示红色, 120表示绿色, 240表示蓝色

    (2) percentage: s(饱和度),  取值为0%到100%之间的值

    (3) percentage: l(亮度),  取值为0%到100%之间的值

例子:

    background: hsl(240, 50%, 100%)

    color: hsl(100, 80, 100%)

支持:

     safari 4, chrome 3, FF3, opera 10

十七. hsla(在hsl的基础上上增加了一个透明度设置)

使用:

    hsla: ( <length>  ||  <percentage>  ||  <percentage>|| <opacity>)

说明:

    (1) opacity: a(透明度), 取值在0到1之间

例子:

    background: hsl(240, 50%, 100%, 0.5)

    color: hsl(240, 50%, 100%, 0.5)

支持:

     safari 4, chrome 3, FF3, opera 10

十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)

使用:

    rgba: (r, g, b, opacity)

说明:

    (1) r: 红色, 正整数 | 百分数

    (2) g: 绿色, 正整数 | 百分数

    (3) b: 蓝色, 正整数 | 百分数

    (4) a: 透明度, 取值在0到1之间

    (5) 正整数在0到255之间, 百分数在0%到100%之间.

例子:

    rgba: (100%, 244, 0, 0.5)

支持:

     safari 4, chrome 3, FF3, opera 10

十九、 transition（a标签hover渐隐效果）

a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s}

-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

transition:color 0.15s linear 0s, background-color 0.3s linear 0s

只是一点提示，如果你仍然想要使用所有浏览器对无线电和复选框的本机支持，比如用↑和↓键在它们之间移动，将css设置为position:fixedopacity:0，这将保留所有功能但保持输入隐藏，不会占用任何布局空间。我花了最后3个小时搞清楚这一点，但它确实有效！

答案 1 :(得分：15)

除了Nathan Lee的回答

input[type="radio"]:checked{

visibility:hidden

}

是指定已选中单选按钮的选项

input[type="radio"][value="text"]:checked{

visibility:hidden

}

是一个指定已选中单选按钮的选项，其值等于'text'(示例中为'none')

答案 2 :(得分：6)

尝试visibility:hidden这会有效。

HTML：

CSS：

input.checked[type="radio"]{visibility:hidden}

我希望这就是你要找的东西。

答案 3 :(得分：5)

如果你想多次隐藏一个复选框/收音机，那就是制作一个自定义的复选框/收音机。

如果您希望能够专注于输入的标签，请使用opacity：0位置：绝对的宽度：0这使得输入在不占用空间的情况下不可见。

如果你使用display：none或能见度：隐藏它会有类似的效果，但目前最常用的浏览器(MSIE11，Edge，Chrome 60.0.3112.101，Firefox 55)不允许使用键盘来关注元素，这使得它不易访问。

＆＃13

＆＃13

.opacity {

position: absolute

opacity: 0

width: 0/* for internet explorer */

}

.visibility {

visibility: hidden

}

.nodisplay {

display: none

}

input[type=checkbox]+label {

font-weight: normal

}

input[type=checkbox]:checked+label {

font-weight: bold

}

input[type=checkbox]:focus+label {

border: 1px dotted #000

}＆＃13

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

＆＃13＆＃13＆＃13

答案 4 :(得分：1)

尝试使用:checked选择器：

input[type="radio"]:checked {

display: none

}

答案 5 :(得分：1)

如果您使用过{display：none}并且仍然看到一个空格(如3px左右)，那么很可能您的html中的元素之间有空格或换行符，有时会导致渲染器在这些元素之间显示一些像素。

这确实存在问题，如果没有这方面的知识就很难确定问题，但是一旦你知道，你有两个简单的解决方案：

要么删除html中代码之间的空白区域。 (不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。)

或者，在您的css中，将父容器中的font-size设置为0px。

例如：#parent{font-size:0px}然后再次为#parent *{font-size:initial}的父级的所有孩子初始化它。

醇>

#parent{

font-size:0px

display:block

}

#parent *{

font-size:initial

}

.tab-label {

display:inline-block

background: #eee

border: 1px solid

}

[name="tab-group-1"] {

display: none

}

Tab One

Tab Two

Tab Three

答案 6 :(得分：0)

除了其他答案中提到的问题(特别是可访问性问题)之外，display: none的一个警告是，当无线电输入为required时，它还会影响浏览器显示的警告，并且用户没有检查它。

另一方面，opacity: 0和visibility: hidden的一个警告是，单选按钮仍会占用一些空间(而AFAICS width: 0px无效)可能是问题(例如，是否对齐，或者您的单选按钮是否位于

标签内，并且您希望上的:hover背景颜色发生变化，在这种情况下，标签必须覆盖{ {1}}。

一种解决方法是将单选按钮的

设置为position。

fixed

input[type=radio] {

opacity: 10

position: fixed

}

input[type=radio]+label {

background-color: #eee

padding: 1em

}

如摘要所示(使用

radio1

radio2而不是0只是为了了解我们在说什么)，使用opacity: 10的单选按钮不再影响标签。

相关资源：纯css3单选框和复选框样式美化效果_css单选框美化-其它代码类资源...

打开CSDN，阅读体验更佳

...菜单、文本域、字段集_陌一一的博客_css单选框和复选框

cols控制的是文本域的列能输入几个字符宽度,rows控制的是行能输入几行,因为这个能输入多少个字符受字体大小和字体类型影响,所以我们一般不这么设置行和列,我们一般是用css设置,还有一个属性是placeholder,就是文本域提示符,属性值不是真...

继续访问

使用纯CSS实现内容的显示隐藏(可用于响应式手机端菜单栏的显示)

initial-scale=1.0">纯CSS实现点击显示隐藏 /* 在手机端正常的操作是默认隐藏,点击菜单的时候显示 */ div { display: none} /* 当单选框被选中的时候显示兄弟元素div */ #btn:checked~div { display: block} /* 设...

继续访问

【jQuery/CSS】显示或隐藏元素

1. CSS分别有display、visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择，默认值为inline，隐藏后会释放元素所占用的页面空间（详见：点击打开链接） style="display: none" document.getElementById("div1").style.display="none"//隐藏

继续访问

js input radio点击事件

html代码： <input type="radio" name="myname" value="1" />1 <input type="radio" name="myname" value="2" />2 js代码： // 点击事件change $('input[type=radio][name=myname]').change(function (...

继续访问

CSS修改html单选框radio样式_AuGnIk的博客_单选框样式修改

采用剪切的方式,让剪切后的尺寸为零,以此隐藏原来的单选框。 3、用伪元素作为新的单选框: /* 未被选中的单选框样式 空心圆圈*/input[type="radio"] + label::before{content:''display:inline-blockvertical-align:middlewidth...

继续访问

CSS 隐藏+对齐+表单篇_believealone的博客

同组的设置相同的name value属性 选框的值 checked属性 让某个单选框默认处于选中态 1.6 多选框 type=checkbox value属性 表示选框的值 多选框因为可能会同时选择多个值, 所以name属性需要注意: 可以name值不同 如果name值想要起成相同...

继续访问

最新发布 前端 -- 单选框内容影响复选框的隐藏与显示 附代码

在网页中这类问题比较常见通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）以下内容主要做一个知识点的探讨，类似功能大同小异。......

继续访问

我在使用Css控制 button 按钮显示与隐藏遇到的问题。

Css :hover选择器遇到的一些问题

继续访问

纯css控制文字显示隐藏_啊呀阿荼的博客_css点击显示隐藏...

纯css控制文字显示隐藏 用到css 伪类 :checked :checked选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。 html 更多 收起 文字文字文字文字文字文字

继续访问

单选框radio控制div的显示和隐藏_知否技术的博客

css({"display":"none"})$("input[type=radio][name='dateType']").change(function(){ var v = $(this).val()if (v =="1"){ $("#limit").hide(800)}else{ $("#limit").show(800)} })...

继续访问

CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）

一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该 生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none" document.getElementById("typediv1").style.display="none"//隐藏 document.getElementById("typediv1...

继续访问

按钮、元素的显示/隐藏

Eayui的按钮显示/隐藏 这种写法是不占用原有位置 // 隐藏 $('#saveBtn').hide()// 显示 $('#saveBtn').show()display：元素的位置不被占用 //display 不占用位置 // 隐藏 $("#saveBtn").css("display", "none") // 显示 $("#saveBtn").css("display", "")// diaplay 原始写法 //隐藏 document.getElement

继续访问

点击一个单选框时另外一个单选框里的内容属性隐藏掉_使用纯CSS制作一个...

首先,我们先了解下什么是 CSS Checkbox Hack ? CSS Checkbox Hack 允许你通过复选框(Checkbox)是否选中(或单选按钮radio buttons)来控制某些特定的样式。这里运用的是:checked 伪类选择器,其意思就是”如果选中了表单(复选框、单选按钮...

继续访问

单选框样式/自定义单选框/改变单选框border颜色/css单选框

1、首先将原先的单选框隐藏掉。 2、利用label:before 在label的前面加一个元素来模拟单选框的样式。 3、利用:checked css选择器将选中的单选框单独设置样式。 4、具体样式自根据项目手动设置比较灵活。

继续访问

css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结

一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink} 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.

继续访问

用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为absolute 然后将位置设到不可见区域。 你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场

继续访问

css 隐藏元素的方法

占据位置，会被子继承，设置visibilityvisible可以显示子元素，重绘，不会触发绑定事件。占据位置，会被子继承，但是设置opacity1,子元素不会显示，会触发绑定事件。不占据位置，触发回流，不会被子元素继承，不会触发绑定事件。绝对定位，使它偏移可视区域。...

继续访问

热门推荐 单选框radio控制div的显示和隐藏

通过鼠标单击单选框的动作，实现某个div或多个div的显示和隐藏。实例如下： function divClick(){ var show=""var apm = document.getElementsByName("AdPrintMode")for(var i=0i<apm.lengthi++){

继续访问

css去除单选按钮的圆点,CSS3带圆点游动动画的自定义单选框

CSS语言：CSSSCSS确定.checkable-group {background: whiteborder: 2px solid blackborder-radius: 16pxmargin: 0 autoposition: relativewidth: 80%}label {border-bottom: 1px solid blackdisplay: blockpaddin...

继续访问

html css 隐藏和显示按钮

html 隐藏和显示按钮 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div><!--display:block:显示按钮--

继续访问

去掉radio单选按钮的默认样式

在实际项目中radio单选按钮的默认样式是很讨厌的 很多地方用了跟主色调不一样很突兀 我在网上查了查自己改了一个 <dd><label><input type="radio" checked="checked" name="classId" class="radio" value="1">商品咨

继续访问

关于单选框的css和css控制显隐

<label class="edf-line" for="z"><input type="radio" name="pay-radio" value="2" id="z" class="st-one"><i class="checkbox_ico"></i>...

继续访问

两个单选按钮,点击其中一个隐藏或显示其他的div

HTML代码 <div class="am-u-sm-9 am-u-end"><input type="radio" onClick="return diva()" class="tpl-form-input" name="article[activity_publish]" value="1" checked="checked">手动发布 <i...

继续访问

css 隐藏按钮_CSS3隐藏的社交按钮

css 隐藏按钮 Today we'll be looking at some very simple techniques using CSS3 transforms to make social link buttons. Usually you'll see these links all over a site sitting there making a site look ugly. ...

继续访问

css 单选框隐藏

css设置按钮隐藏

写评论

评论

收藏

点赞

踩

分享

---