知识点
相关文章
更多最近更新
更多css选择器使用
2019-03-01 22:34|来源: 网路
标签选择器:
语法: 标签名 {
属性键:属性值;
}
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<p>标签选择器</p>
<p>标签选择器</p>
</body>
</html>
ID属性唯一标识符.
要确保页面当中id属性的唯一性.
ID选择器:
语法: #ID {
属性键:属性值;
}
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#one {
color:red;
}
</style>
</head>
<body>
<p id="one" >ID选择器示例</p>
<p>ID选择器示例</p>
</body>
</html>
class属性可以随意重复.
CLASS选择器:
语法: .CLASS名称 {
属性键:属性值;
}
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.one {
color:green;
}
</style>
</head>
<body>
<p class="one" >CLASS选择器示例</p>
<p>CLASS选择器示例</p>
<p>CLASS选择器示例</p>
<p class="one" >CLASS选择器示例</p>
<h1 class="one" >CLASS选择器示例</h1>
</body>
</html>
选择器分组:
语法: 选择器1,选择器2...... {
属性键:属性值;
}
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.one,#two {
color:yellow;
}
</style>
</head>
<body>
<p class="one" >选择器分组</p>
<p id="two" >选择器分组</p>
<p>选择器分组</p>
<p class="one" >选择器分组</p>
<h1 class="one" >选择器分组</h1>
</body>
</html>
伪类选择器:指的是选择的某个标签的 某种状态
常见状态有4种,a标签最全.
l link 没有点击 过的状态
v visited 访问过
h hover 鼠标悬浮
a active 激活状态(鼠标点下去没有弹起)
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color:blue;
}
a:active {
color:yellow;
}
</style>
</head>
<body>
<a href="01-结合方式01.html" >01-结合方式01.html</a>
</body>
</html>
转自网络
相关问答
更多-
jquery和css选择器[2022-08-13]
你是意思是用css来让他隐藏，在css2中是没办法选中的，除非单独给最后一个th加上一个class或id，用css3就可以选择最后一个th，但是考虑到css3有部分浏览器不兼容，所以建议直接使用jquery来让最后一个th下的td隐藏，在用一个按钮来显示： $(function(){ $('th').eq(2).find('td').hide(); $('input').click(functon(){ $('th').eq(2).find('td').show(); }) }) -
CSS类选择器问题[2021-11-08]
div.ui-slider-range.hilite这并不是什么选择器 你这样理解吧，div .ui-slider-range .hilite就是DIV下class为ui-slider-range下class为hilite的元素。 在某些布局下，没有空格，是错误的，是不会应用上的， -
引用Selector Level 4文档 ： 否定伪类， :not() ，是一个将选择器列表作为参数的函数伪类。 它代表了一个没有被其参数表示的元素。 注意：在选择器级别3中，只允许一个简单选择器作为参数:not() 。 这解释了为什么这... input:not([type="radio"][type="submit"]) ...在没有实现这部分CSS4规范的浏览器中不受支持（据我所知，在这个时候没有人会这样做;毕竟它只是一个工作草案）。 但是这个选择器的逻辑也是有缺陷的：即使语法被普遍支持，它应该被写 ...
-
可以为选择器使用变量吗？(Can I use variables for selectors?)[2023-01-06]
$gutter: 10; .grid#{$gutter} { background: red; } 如果在一个字符串中使用例如URL： background: url('/ui/all/fonts/#{$filename}.woff') $gutter: 10; .grid#{$gutter} { background: red; } If used in a string for example in a url: background: url('/ui/all/fonts/# ... -
负CSS选择器(Not CSS selectors)[2023-07-30]
使用当前的浏览器CSS支持，您不能。 较新的浏览器现在支持它 - 请参阅Sam的更多信息的答案 。 （有关CSS中的替代方案，请参阅其他答案。） 如果在JavaScript / jQuery这样做是可以接受的，你可以做： $j(':not(.classname)>input').css({background:'red'}); With current browser CSS support, you can't. Newer browsers now support it- see Sam's answ ... -
我查看了Backbone.js的源代码，发现如果你的视图的events是一个函数，那么函数被调用，它的返回值被用作events对象。 这意味着您的代码可以像这样更改： app.views.Selfcare = Backbone.View.extend({ events: function() { var _events = { // all "standard" events can be here if you like } _events["events" + " ...
-
选择器使用变量(selector using variable)[2023-11-09]
无论somediv是DOM元素还是选择器，请使用.closest [docs] ： if ($(e.target).closest(somediv).length > 0) 这将遍历DOM，从e.target开始，并测试任何祖先（或元素本身）是否有somediv 。 如果您想排除e.target ，请从其父级开始： $(e.target).parent().closest(somediv) 另一种方式，取决于整体上下文，可以简单地将事件处理程序绑定到somediv ： somediv.click(fun ... -
$('#'+theid).remove() $('#'+theid).remove()
-
考虑以下情况，您有两个带有上述类的Div标记 写下面的内容只得到那些有“g”类的div alert($("div[class='g']").length); Considering the following scenario where you have two Div tag with above classes ...
-
来自兄弟姐妹div的儿童选择器使用css进行悬停效果(childrens selectors from sibling parent divs using css for hover effect)[2023-02-02]
你不能用纯CSS 回到DOM中 ，这就是为什么在悬停元素时只能选择兄弟姐妹的孩子，兄弟姐妹和孩子。 以下内容演示了当前可以通过悬停第一个父级来选择的内容： #parent1:hover > div { color: blue; } #parent1:hover > div > div { color: purple; } #parent1:hover ~ div { color: red; } #parent1:hover ~ div > div { color: ora ...