CSS - id选择器 ¶

id属性
把id使用在CSS选择器上

作者：KK
发表日期：2016.1.26

id属性 ¶

在学ID选择器先向你补充一个HTML的知识先,就是标签属性中有一个属性叫id,比如<a id="myLink" href="http://xxx.com">XX页面</a>,这里给a标签添加了一个叫id的属性,值是"myLink",值可以自己随便起名字的,在整块HTML代码中,所有标签都可以添加id属性,但属性的值不能出现相同的,所以

<a id="myLink" href="http://xxx.com">XX页面</a>
<a id="myLink" href="http://xxx.com">YY页面</a>

这样有两个a标签的id属性值都叫"myLink"是不合法的,必须把名字改成不同的

把id使用在CSS选择器上 ¶

<body>
	<style type="text/css">
	#myLink{color:red;}
	</style>
	<p>
		<a id="myLink" href="http://xxx.com">链接</a>
	</p>
</body>

就是在选择器中先以#号开头,再接着写id的值myLink,用来描述"针对id=myLink的标签进行样式渲染",在这种情况下,就算代码被调整成以下结构也依然能进行样式渲染

<body>
	<style type="text/css">
	#myLink{color:red;}
	</style>
	<p>
		哎呀我包住的a标签被拿走了!
	</p>
	<a id="myLink" href="http://xxx.com">链接</a>
</body>

就是说,只要知道id,不管标签飞到哪里我都能对你进行样式渲染

最后补充:id也可以参与派生选择器,比如p #myId span a这样;而另外,实际工作中并不太支持你使用id选择器,这里只是让你认识一下,你开头可以用,工作一年后希望你不要再使用了

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });