Question

我想使用复选框中的状态来显示和隐藏:: after，而后者通常是兄弟姐妹。我正在使用此代码，也许您可以帮助解决此问题。谢谢。

.form-check label {
  position: relative;
}

.form-check label:after {
  content: " ";
  height: 25px;
  width: 25px;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  right: -30px;
  top: 0;
  background-color: red;
}

.form-check [type="checkbox"]:checked~ ::after {
  background-color: blue;
}

<div class="form-check">
  <label class="form-check-label" for="example">
			<input class="form-check-input" type="checkbox" value="" id="example">
			<span>Example</span>
			::after
		</label>
</div>

Answer 1

在<input>之后需要一个元素，以便使用这样的伪元素。在这种情况下，您在那里有<span>。

.form-check [type="checkbox"]:checked  ~  span::after {
    background-color: blue;
}

Answer 2

问题是您缺少CSS中的基本属性– public class ImageExtractor : IRenderListener { int _currentPage = 1; int _imageCount = 0; int _index = 0; int _count = 0; readonly string _outputFilePrefix; readonly string _outputFolder; readonly bool _overwriteExistingFiles; string[] _fileTypes; public ImageExtractor(string outputFilePrefix, string outputFolder, bool overwriteExistingFiles, string[] fileTypes, int index) { _outputFilePrefix = outputFilePrefix; _outputFolder = outputFolder; _overwriteExistingFiles = overwriteExistingFiles; _fileTypes = fileTypes; _index = index; } public static int ExtractImageByIndex(string pdfPath, string outputFilePrefix, string outputFolder, bool overwriteExistingFiles, int pageNumber, int index, string[] fileTypes = null) { // Handle setting of any default values outputFilePrefix = outputFilePrefix ?? System.IO.Path.GetFileNameWithoutExtension(pdfPath); outputFolder = String.IsNullOrEmpty(outputFolder) ? System.IO.Path.GetDirectoryName(pdfPath) : outputFolder; var instance = new ImageExtractor(outputFilePrefix, outputFolder, overwriteExistingFiles, fileTypes, index); instance._currentPage = pageNumber; using (var pdfReader = new PdfReader(pdfPath)) { if (pdfReader.NumberOfPages == 0) return 0; if (pdfReader.IsEncrypted()) throw new ApplicationException(pdfPath + " is encrypted."); var pdfParser = new PdfReaderContentParser(pdfReader); pdfParser.ProcessContent(instance._currentPage, instance); } return instance._imageCount; } public void BeginTextBlock() { } public void EndTextBlock() { } public void RenderText(TextRenderInfo renderInfo) { } public void RenderImage(ImageRenderInfo renderInfo) { // If _index is greater than 0, we're looking for a specific image. If _count is // equal to _index, we've already found it, so don't go any farther. if (_index > 0 && _count == _index) return; var imageObject = renderInfo.GetImage(); var imageFileName = ""; if (_fileTypes != null) { var type = imageObject.GetFileType().ToLower(); var flag = false; foreach (var t in _fileTypes) { if (t.ToLower() == type) { flag = true; break; } } if (flag) imageFileName = String.Format("{0}_{1}_{2}.{3}", _outputFilePrefix, _currentPage, _imageCount, imageObject.GetFileType()); } else { imageFileName = String.Format("{0}_{1}_{2}.{3}", _outputFilePrefix, _currentPage, _imageCount, imageObject.GetFileType()); } if (!string.IsNullOrEmpty(imageFileName)) { // If _index is 0, multiple images may be extracted. If _index is greater than 0, // RenderImage will increment count every time it finds an image that matches the // file type and will only extract the image if count equals index. if (_index > 0) { _count++; if (_count != _index) return; } var imagePath = System.IO.Path.Combine(_outputFolder, imageFileName); if (_overwriteExistingFiles || !File.Exists(imagePath)) { var imageRawBytes = imageObject.GetImageAsBytes(); File.WriteAllBytes(imagePath, imageRawBytes); } // Subtle: Always increment even if file is not written. This ensures consistency should only some // of a PDF file's images actually exist. _imageCount++; } } }，content，height和width –如果您添加了这些代码，则发布的代码将起作用：

display

.form-check label {
  position: relative;
}

.form-check label:after {
  content: " ";
  height: 25px;
  width: 25px;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  right: -30px;
  top: 0;
  background-color: red;
}

.form-check [type="checkbox"]:checked~ ::after {
  /* forces the creation of the pseudo-element, without content
     it effectively doesn't exist: */
  content: '';
  /* because an empty string doesn't have any height, or width, by
     default we need to assign arbitrary non-zero values: */
  height: 1em;
  width: 1em;
  /* the ::before and ::after pseudo-elements are 'display: inline'
     by default, so to enable the element to accept its assigned width
     we make it 'display: inline-block' instead (though other values
     could be used if preferred): */
  display: inline-block;
  background-color: blue;
}

值得注意的是，提供的选择器：

<div class="form-check">
  <label class="form-check-label" for="example">
			<input class="form-check-input" type="checkbox" value="" id="example">
			<span>Example</span>
		</label>
</div>

将选中所有选中复选框之后的.form-check [type="checkbox"]:checked ~ ::after个伪元素；您可能希望将选择器修改为减少意外匹配的可能性，以便：

::after

将匹配.form-check [type="checkbox"]:checked ~ span::after个元素的所有::after个伪元素，或匹配：

<span>

仅匹配相邻.form-check [type="checkbox"]:checked + span::after元素的::after伪元素。

参考文献：

参考书目：

” What is the default display property of the [::before] and [::after] pseudo-elements?。

如何从其父级的:: after使用通用的同级选择器

2 个答案: